[Plugin: Easy FancyBox] Easy Fancybox and Gravity Forms

Hi cheeseshark,

Start with giving <div id="fancyboxID-1"> some size values, like style="width:300px;height:400px" or width="300" height"400" for example, that fit your form.

Then give the link class="fancybox-inline" (instead of -iframe) and enable the Inline Content option on Settings > Media.

RavanH,

Thanks for the reply. I modified my code as follows :

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:800px;height:500px">
[gravityform id="1" name="Vendor Space Request" ajax="true"]
</div></div>
<a href="#fancyboxID-1" class="fancybox-inline">Easy FancyBox (lightbox) test</a>

It now displays this:

[gravityform id=”1″ name=”Vendor Space Request” ajax=”true”]

which is the shortcode that is used to display the form on a webpage.

RavanH,

Thanks for the reply. I modified my code as follows :

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:800px;height:500px">
[gravityform id="1" name="Vendor Space Request" ajax="true"]
</div></div>
<a href="#fancyboxID-1" class="fancybox-inline">Easy FancyBox (lightbox) test</a>

It now displays this:

[gravityform id="1" name="Vendor Space Request" ajax="true"]

which is the shortcode that is used to display the form on a webpage.

Oh, hang on… you have added this code snippet to a theme template file? If so, then use this for the shortcode:

<?php do_shortcodes('[gravityform id="1" name="Vendor Space Request" ajax="true"]'); ?>

Thank you!

Much better now!

I am so confused & need help :o( I am trying to load Gravity forms onto a page using FancyBox, however, using the code that is recommended is just not working at all.

” <div style=”display:none” class=”fancybox-hidden”><div id=”fancyboxID-1″>
[gravityform id=”1″ ajax=”true”]
</div></div>

Click here to enter your details
In the above, change id of form and anchor text if needed. “

I make sure to have the correct form number in place as stated.

When viewing the page, the form is on the page but there no lightbox. Instead right above the form I can see the code ” <div style=”display:none” class=”fancybox-hidden”><div id=”fancyboxID-1″>
[gravityform id=”1″ ajax=”true”]
</div></div> “

I have been working on this for hours now and researching solutions but havent had any luck.

Any help is greatly appreciated.

And yes, I download the Fancybox plugin and activated it.

QuirkyGirlie,

I ran into the same issue as you in which the Gravity Forms shortcode wasn’t being called from the fancybox.

My code is as follows:

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:800px;height:425px">
<?php
        $vcl_c = '526';
        $gfsc = '[gravityform id="1" ajax="true" field_values="fc_itemID='.$vcl_c.'"]';
        echo do_shortcode($gfsc);
?>
</div></div>

basically what you are missing (that I have in my code) is building the shortcode in a string, then calling it using a “do_shortcode()” function.

Give that a try and see if that works for you. Also, you need to call your fancybox in an iframe (make sure you have iframe ticked on in the settings.

My call looks like this :

<a href="#fancyboxID-'.$org_link.'" class="fancybox-inline">

$org_link is my GF form number (each form has its own ‘<div>’ setup.

I hope this helps.

Hey Cheeseshark, Thanks for your input. That as well did not work. The form is now contained in a “box” (like a message box”, on the page. Still no a lightbox :o(

If your form is in a “message box” (looks like what pops up with an alert) then it is working as intended.

The lightbox is a message box like popup that overlays the existing page, unless I am misunderstanding what you are saying.

Do you have a link to the page so we can see what is being displayed?

Cheeseshark,

Now the entire form is missing :o( I didn’t do anything other than refresh the page.

The page is https://palstride.co/client-center/

I have the code under FORMS and above Pet Care Service Agreement

I know what a lightbox is and am trying to have that feature for my forms, but it’s just not working :o(

What are you using to launch the lightbox?

I’m making an assumption based on what I can see on your site. Under the “Forms” heading, you have a number of forms listed as text on the page. Should these be links to open the individual form? or do you have those links in another place?

If they should be the link to open the form, you will want to build your link in the following manner (in place of the text):

<a href="#fancyboxID-1" class="fancybox-inline">Pet Care Service Agreement</a>

I found that I had to configure each link with it’s own <a> and <div> to get it to work the way I intended. I have 7 different forms that I display, and with that comes 7 different <div> and 7 different <a> configurations. I build the <a> on the fly replacing the ? “#fancyboxID-?” with the form number and then match it in the <div id ="fancyboxID-?"> with the form number as well. Your forms are static, so you won’t have to build the links on the fly.

When that link is clicked on, it will fire off the code below:

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:800px;height:425px">
<?php

        $gfsc = '[gravityform id="1" ajax="true"]';
        echo do_shortcode($gfsc);
?>
</div></div>

I apologize that I previously stated you needed to do “iframe”, when in fact it is “inline”.

If I remember correctly, I struggled with this as well.

I have my link attached to a button image instead of a straight link, but it should work the same.

OMGoodness, it worked!!! Thank you, thank you, thank you!!!

Now I see another issue, when the lightbox opens, it doesn’t allow scrolling to view the entire form. Is there a fix to include a scroll or is it just to make the height longer?

If you want to have scroll bars visible on the form in the lightbox, make sure under the “Inline content” heading to have the scrolling set to “Auto” or “Always” or you won’t be able to use scroll bars to scroll through the form.

You can find the fancybox settings under Settings / Media.

Cheeseshark,

You are a genius! I cannot thank you enough for helping this girl out!

YOU ARE AWESOME!!!

Inga