Docs

[designerken]

Hi there, I was wondering if it is at all possible to create a button that will open a modal or lightbox type window with a gravity form in it? If so would someone please explain how that might be achieved?

Thanks
Ken

[Thai]

Hi There,
Thanks for writing in.
You can try adding this following code to the page / post content, don’t forget to switch your Content Editor to Text Mode:

<div id="my-content">
  [gravityform id=1 title=false description=false ajax=true tabindex=49]
</div>

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

[lightbox selector=".lightbox-selector"]

Hope it helps.

[designerken]

That looks very promising!

I added the code but it renders the form on the page and it shows it again when I click the button in the modal window. Do I just add css to hide the #my-content so it wont show initially?

[Darshana]

Hi there,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks!

[designerken]

I just added #my-content {display:none;} to the custom CSS. Now it doesn’t show the form in the container on initial page load and works in the modal window when I click the button.

Thanks for your direction on this.

[Darshana]

Glad you were able to figure it out 🙂

[nepatriot]

Hey there. I followed along with your instructions and everything works correctly… Except that I have two buttons on my page and for reasons unknown to me it looks like 2 forms are getting loaded on the page…

You can see what I mean here:
https://www.zomalo.com/invite/

Thank you!

[Rupok]

Hello @nepatriot

Thanks for updating! It seems you are using same ID (#my-content-1) for both of your contents. You should use different IDs for those.

Hope this helps.

Cheers!

[nepatriot]

No problem! Thanks for the response.

So I changed the div IDs to make them unique: #my-content-1/#my-content-2. However I am still seeing the same issue…

Here is the code I am using – not sure why it’s not working…

<div id="my-content-2">
  [gravityform id=11 title=false description=false ajax=true tabindex=49]</div>
<a href="#my-content-2" class="lightbox-selector x-btn" data-type="inline">Get Started</a>

[lightbox selector=".lightbox-selector"]

<div id="my-content-1">
  [gravityform id=11 title=false description=false ajax=true]</div>
<a href="#my-content-1" class="lightbox-selector x-btn" data-type="inline">Get Started</a>

[lightbox selector=".lightbox-selector"]

[Friech]

Hi There,

Sorry but I couldn’t see any gravity form on the URL provided, please clarify. Also make the [lightbox selector=".lightbox-selector"] shortcode unique for each contact form so they would not show on the same lightbox.

Thanks!

[nepatriot]

Thanks for the response.

To see the forms (loading the same form on each click event) you have to click the ‘Get Started’ button.

It looks like using the unique selector prevents the issue with the forms loading twice.

However, the lightboxes are different in size… any idea why this is happening? I tried setting the div width to a fixed value but no cigar. How can I get the two lightboxes be the same size?

[Rupok]

Hi There,

To make the form same size, You can add this under Custom > CSS in the Customizer.

.ilightbox-holder div.ilightbox-container {
  width: 100% !important;
}

Hope this helps.

Cheers!

[nepatriot]

Thanks. That works flawlessly!

[John Ezra]

You’re most welcome!

[Manny Costales]

How can I do this using cornerstone?

[Author]

Posts