Live Support by a Striking Team member to assist with forum questions is offline at this time.
To insert code use <code>...</code>.
Gravity Forms in a pop-up iframe
  • I would like to have a gravity form pop up within an i-frame or possible a light box when a user clicks a link.

    I have tried a few ways, and before upgrading to 5.0.1 got it working by putting the gravity forms short code into a blank template page that I created. however after the upgrade this has now stopped working.

    The blank template page simply had the header logo, navigation and footer removed.

    Can you offer any help in getting this to work please?
  • 8 Comments sorted by
  • Hi,

    Can you give me your page url?

    If you can provide the code you used on the page that would be helps.

  • Thank you for your prompt response... I have highly recommended your theme and service to all of my clients and collegues.

    The draft site page is here:

    Please use user: Guest password: IamaGuest to access the site

    If you need a wordpress login please email me and I will supply it privately

    The link in question is the 4th image down ("information required") on the process map

    As you will see the lightbox comes up with the iframe in it... and the feature title section and the breadcumb comes up... but not the gravity form that is on the page.

    I created a blank template based on the full wdith template, took out the footer and header then maually put in the header code minus the logo and menu... it was working perfectly on 4.0.3 but stopped after I upgraded to 5.0.1

    Here is the blank page code...

    <?php <br />/*
    Template Name: Blank Page
    return require(THEME_DIR . "/template_blog.php");
    return require(THEME_DIR . "/front-page.php");
    <!DOCTYPE html>

    " />
    <?php theme_generator('title'); ?>
    <?php if($custom_favicon = theme_get_option('general','custom_favicon')) { ?>
    " />
    <?php } ?>

    RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
    " />

    <?php wp_head(); ?>

    <?php<br /> if(theme_get_option('cufon','enable_cufon')){

    var image_url='<?php echo THEME_IMAGES;?>';

    <?php<br /> if(theme_get_option('general','analytics') && theme_get_option('general','analytics_position')=='header'){
    echo stripslashes(theme_get_option('general','analytics'));

    <?php theme_generator('introduce',$post->ID);?>

    <?php theme_generator('breadcrumbs',$post->ID);?>
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '' ) ); ?>
    <?php edit_post_link(__('Edit', 'striking_front'),'<footer>


    '); ?>

    <?php endwhile; ?>

    The shortcode for linking the graphic to the pop up is:

    [lightbox title="please fill in this form" width="1000px" height="80%" href="" iframe="true"]Debtors personal and financial information sent by administrator[/lightbox]

    The Gravity Forms shortcode is:

    [gravityform id="2" name="Community Details"]

    Thank you for your help in this matter
    David Rook
  • You can make a custom page template as you did. In that custom page template you can call a tripped down version of the header.php and footer.php file. Make a copy of those two files and take out the parts that you don't want ie navigation etc. Name these new files something like header-form.php and footer-form.php

    In your custom page template instead of calling get_header() and get_footer() call get_header(form) and get_footer(form).

    This way you don't have to make so many changes in your page and you can use the new header and footer multiple time.

    This might help

    One problem that I've notice calling in a form on another page in an iframe is that it takes a longer time for the form to load. I would suggest embedding the form on your page with the class hidden and call it from the light box as inline content.

    The gravity form shortcode allows the form to be either Ajax or not, make sure you make it Ajax so the entire lightbox will not be refreshed.
  • Brilliant... why didn't I think of that! Thank you, it works perfectly.

    Just one thing can you please expand a little on your comment "I would suggest embedding the form on your page with the class hidden and call it from the light box as inline content."

    are you saying put the form shortcode within an iframe on the new page I make and then calling that from the lightbox as inline? (sorry a bit confused here)
  • Hi!

    I try to do exactly the same thing. I want to display a form using lightbox but I want it to be a hidden inline content. I did try a couple of ways (using Striking shortcodes) but it didn't work. If I do:

    [lightbox href="#35" inline="true"][button id="order" size="large" align="center" color="blue" bgColor="#2f5274" width="350"]Form[/button][/lightbox]

    all images from the site will disappear including images from slider and the form won't display anyway. I use the latest versions of Striking and Gravity Forms.
  • Wrrr.... a bit of the code is missing. Here's how it looks like:

    [lightbox href="#23" inline="true"]Form[/lightbox] <div class="hidden"><div id="23">[gravityform id="1" name="newform" ajax="true"]</div></div>

    This doesn't work on the homepage but works on any other page.
  • Sorry it took so long.... but in your template (or you could do this in your function.php file using the add_action('wp-footer' ....) put a hidden class with your gravity form shortcode (or actual code) be sure that you have checked ajax is true

    <div class="hidden"> <div id="gravityform_popup">[gravityform id="xx" name="pop-upform" ajax="true"] </div></div>

    Then in your Post or where ever you want the form to popup in a light box put the following shortcode

    [lightbox title="Contact Form Popup" href="#gravityform_popup" inline="true" width="700" height="400"][button size="large" bgcolor="blue"]Say Hello[/button][/lightbox]

    That is one way....
  • As I said before it doesn't work on the homepage.