Docs

[Dominic E]

Hi how can I launch a lightbox containing a form from a button.

Thanks,
Dom

[Kory]

Hey Dominic,

You’ll need to kind of set this one up manually, but something like the following would give you what you’re after:

<div id="my-content">
  ...content here...
</div>

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

[lightbox selector=".lightbox-selector"]

So you’ll need to make sure to add a unique ID to the content you want to open up in the lightbox, then have a clickable link use that ID in the href attribute. You’ll also need to add a unique selector to the link via a class, which you’ll use with the [lightbox] shortcode.

Thanks!

[Han Z]

I believe this is huge and worthwhile considering as a standard feature. If I understand correctly, you would be able to define which content (container?) would show in the lightbox and fully style that content. That would give us the possibility to replicate what Leadpages does with the 2-step opt-in.

[Rubin]

Hey Han,

you only can display images or videos in the lightbox container. But you’re right having a popup with an opt-in box or something like this could be a really neat shortcode or even little plugin for X. People could put custom content inside a shortcode tag and maybe also adding the function for an onload popup trigger would be something that is possible. We will have to look into this. Thank you for the feedback!

[Wes G]

According to the specifications for the native plugin listed on the developer’s site (http://ilightbox.net/index.html#html_inline_content), you are able to use iLightbox for Inline Content, Ajax, iFrame, etc. Why is this not currently supported within the theme? Seems like a non-brainer to include it. I know I’d use this functionality all of the time and I can’t believe only Han Z and myself are the only one’s asking for it.
thanks!

[Rubin]

Hey,

thanks for the feedback we will look into this!

[Wes G]

I also want to do what Han Z is requesting. Could you give me the exact code necessary to launch a Contact Form 7 form in a Lightbox when clicking on a button? Your example wasn’t an exact procedure. I’ve been messing with the shortcodes for Contact Form 7, Lightbox and button for quite some time with no luck. Thank you.

[Christian]

Hey Wes,

Please try:

<div id="my-content">
  [your_contact_form_shortcode]
</div>

Click Me

[lightbox selector=".lightbox-selector"]

Thanks.

[Wes G]

Here’s what I have, which is not working correctly:

[content_band inner_container="true" no_margin="true" border="all" padding_top="40px" padding_bottom="40px"]

<div id="launch_update" style="display: none;">[contact-form-7 id="54" title="Launch Update Request"]</div>

[button href="#launch_update" class="lightbox-selector" rel="nofollow" data-type="inline" shape="square" size="regular" type="real"]Click Me![/button]

[lightbox selector=".lightbox-selector" deeplink="true" opacity="0.85" orientation="vertical" thumbnails="false"]

[/content_band]

It launches lightbox, but displays the entire page within the lightbox modal. I also noticed that the url is being set to “/#gallery-image/0”.

Any advice?

thanks!

[Kory]

Hey Wes,

You are trying to achieve something that is not possible with our shortcodes as there is no data-type attribute for the [button] shortcode. You will need to implement something to our working solution above towards the beginning of this post, which is the following:

<div id="my-content">
  [contact-form-7 id="54" title="Launch Update Request"]
</div>

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

[lightbox selector=".lightbox-selector"]

If you need the link to look like a button, the following should work for you:

<div id="my-content">
  [contact-form-7 id="54" title="Launch Update Request"]
</div>

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

[lightbox selector=".lightbox-selector"]

Thanks!

[Wes G]

Thank you. That is working perfectly! A little more work, but it achieves what I wanted. (view result: http://studiowes.com/inline.png)

Please consider adding this as a standard feature as it would be a valuable tool for everyone.

Also, where do I find a list of classes like the “x-btn” class you provided?

Thanks!

[Rubin]

Hey Wes,

there is no list about this sorry! If you need anything else let me know.

[Caroline T]

I have done the same thing with a Gravity Form and the lightbox is working correctly buy if the form is submitted with an error, it never loads into the lightbox. It appears to be an Ajax problem. I have used these forms in other lightboxes before with success.

[Rubin]

Hey Caroline,

Can you provide us with the address of your site so we can take a look at the error?

[Caroline T]

Here is a link to a page with just the form http://sandboxes.iansterne.ca/sandbox16/form-test/ It is the get a quote button. If you close the lightbox and re-open it the updated form shows up.

[Author]

Posts