Docs

[Richard R]

Here is a pic of what I am getting for the lightbox.. I want to click the button (with the circle) and the lgithbox come up with the form..
I have looked in other posts and i see one wehre you have a div tag with the contact short code in it and the picture above is what i get

div id="my-content">
 [contact-form-7 id="5" title="Contact form 1"]
</div>

<a href="#my-content" class="lightbox-selector" data-type="inline">Click Me</a>

[lightbox selector=".lightbox-selector"]

[button href="#" title="Get Started" target="blank" shape="rounded" size="regular" block="true" circle="true" icon_only="true" info="popover" info_place="top" info_trigger="hover" info_content="Contact Us or send us any questions you may have.. Dont Be Shy.. Lets do it!"] Lets Get Started [/button]
[/column]

[Kory]

Hey Richard,

Thanks for writing in! As stated in that original post, the [button] shortcode does not work in this manner as it does not allow you to launch HTML content since there’s no way to add the data-type=“inline” attribute to the link. To do this properly, you’d need to take all of the HTML output by your [button] and write it in manually and then add in the data-type=“inline” attribute yourself. Also, note how the class of the link is the same as the selector attribute on the [lightbox] shortcode and the href attribute on the link points towards the id of the <div> element containing the form. All of this is necessary for this particular setup to work.

<div id="my-content">
 [contact-form-7 id="1985" title="Contact form 1"]
</div>

<div class="x-btn-circle-wrap x-btn-regular x-btn-block">
  <a href="#my-content" class="x-btn x-btn-rounded x-btn-regular x-btn-block lightbox-selector" title="Get Started" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Contact Us or send us any questions you may have.. Dont Be Shy.. Lets do it!" data-type="inline"> Lets Get Started </a>
</div>

[lightbox selector=".lightbox-selector"]

Thanks!

[Richard R]

Thank you for the reply.

With that code you prived the contact was on page AND in the button as a lightbox.. I figured out how to hide it on the page:

<div id="my-contentwedding"style="display: none;">
[column type="full"]
[custom_headline style="text-transform: uppercase;" level="h2" looks_like="h4" accent="true"]Contact our Office[/custom_headline]
[contact-form-7 id="1517" title="Contact Us"]
[/column type]
</div>

<div class="x-btn-circle-wrap x-btn-regular x-btn-block">
  <a href="#my-contentwedding" class="x-btn x-btn-rounded x-btn-regular x-btn-block lightbox-selector" title="Get Started" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Contact Us or send us any questions you may have.. Dont Be Shy.. Lets do it!" data-type="inline"> Lets Get Started </a>
</div>
[lightbox selector=".lightbox-selector"]

However, when the lightbox opens.. Its very thin and looks awkward. when the ” style=”display: none;”” is in the original “<div id=”my-contentwedding”>” line I even tied to contain the DIV with a full column and half but it doesnt do anything. But the problem is .. when that line isnt there.. the contact form shows in the page and when clicking the button

Thank you

[Rubin]

Hey Richard,

it probably requires some tweaking since it’s something custom we do not ship out of the box if you need any more help with this let me know exactly the problem maybe with some visual reference to make it easier.

[Author]

Posts