Gravity Forms Live Preview

Preview your forms on the frontend of your site.

Stop! There's a better way.

This snippet is available as a plugin with Gravity Perks, a suite of over 47 premium Gravity Forms plugins!

View Plugin Buy Gravity Perks

live-preview-browsers

Gravity Forms’ “preview” mode is an awesome utility for previewing new forms while you build them. No distractions with theme styling or any potential script conflicts.

But what do you do when you want to see how your form will look on an actual page on your site? You add a new page, add/configure the [gravityform] shortcode, and publish the post. Not the end of the world but surely a bit of hassle when it could be as simple as a “Live Preview” link on the Gravity Forms form editor toolbar.

You agree? That’s good to hear because that’s exactly what this Live Preview snippet will do for you!

How do I get started?

  1. First, you’ll want to make sure you’re running 1.8.beta1 or later. You can download that here.
  2. Copy and paste the snippet into your theme’s functions.php file.
  3. Navigate to the Permalinks page in your WordPress admin: Settings > Permalinks. You don’t need to actually do anything on this page. Simply accessing the page refreshes your permalinks and allows the preview URL configured by this snippet to load correctly.
  4. That’s it! You will now see the “Live Preview” link in your Gravity Forms toolbar.
Live Preview Link HighlightedLive Preview Link Highlighted

Default Configuration

new GWLivePreview();

Advanced Configuration

new GWLivePreview( array( 
	'title' => false, 
	'description' => false,
	'ajax' => true
) );

With this configuration, you can specify the default options used to generate the [gravityform] which in turn is used to render the form. The options available are:

  • title (bool) Whether to show or hide the form title. Defaults to true.
  • description (bool) Whether to show or hide the form description. Defaults to true.
  • ajax (bool) Whether the form should be submitted via AJAX. Defaults to false.

Configure via Query String

You can override any of the default configuration options by passing the option you would wish to override via the query string. For example, the default query string for the Live Preview will be something like this:

http://yoursite.com/gw_form_preview/?id=12

Let’s assume you’re using the default configuration which leaves the ajax option disabled. Now you want to test this current form with the ajax option enabled. Just pass it via the query string:

http://yoursite.com/gw_form_preview/?id=12&ajax=true

See a list of the available parameters above.

Summary

This snippet is probably most useful to the Gravity Form developers out there but I think even users just dipping their toes in the Gravity Forms pool will find it beneficial. If you use it and like it, let me know!

Comments

    1. David Smith
      David Smith Staff January 15, 2017 at 11:30 pm

      The easiest (and best) way is to pick up a copy of Gravity Perks. It includes GP Live Preview which provides a much enhanced version of this code.

      If you’d prefer to just use this snippet, you can slap a plugin header at the top of the snippet and drop this into your WordPress plugins directory.

    2. Christopher
      Christopher January 16, 2017 at 5:46 am

      I tried on a multisite installation but the following code doesn’t work:

          if( ! property_exists( 'GFCommon', 'version' ) || ! version_compare( GFCommon::$version, '1.8', '>=' ) )
              return;
      
    3. David Smith
      David Smith Staff January 16, 2017 at 8:48 am

      Could you elaborate on how it doesn’t work and how you’ve narrowed it down to that specific code?

    4. Christopher
      Christopher January 16, 2017 at 9:04 am

      If I install it as a plugin on a multisite installation the Preview link doesn’t appear.

      If I remove the above code it works fine.

      So maybe the plugin loads before Gravity Forms?

    5. David Smith
      David Smith Staff January 16, 2017 at 9:06 am

      Yeah, that’s probably what’s going on. Multi-site loads alphabetically. Just name the plugin something that will load after “gravityforms”.

  1. hannanstd
    hannanstd March 25, 2015 at 3:14 am

    hi when we use

        $url = get_bloginfo("wpurl") . '/?post_type=gw_live_preview&id=' . $form_id;
    

    rather than

        $url = get_post_type_archive_link( $this->post_type ) . '?id=' . $form_id;
    

    then dont need to change permalink structure …. it always work good.

    Reply
  2. Daniel
    Daniel March 12, 2015 at 10:20 am

    Does this work with the latest version of gravity forms (I’m currently testing with v1.9.3)? I tried the snippet in my functions file, and updated the permalinks page, but it is still displaying the same preview page.

    Reply
    1. Daniel
      Daniel March 12, 2015 at 2:03 pm

      Nope. Only the default preview link. I even tried to use the format for the url that was at the bottom of the article. I only got a 404 error page.

  3. Fran
    Fran April 19, 2014 at 5:07 pm

    Does this work in WordPress 3.9? I watched the troubleshooting video, copied the snippet and I have the Live Preview option now, but when I click it the window opens up and there is nothing in it. It’s likely I’ve missed something , since I’m not a programmer, but I’ve gone over it several times and I just don’t see what the problem is. Any help would be appreciated!

    Fran

    Reply
  4. Jos Vermeulen
    Jos Vermeulen April 17, 2014 at 2:27 am

    Hi David, I got to the point where I can see the new link “Live Preview” in my form editor. Clicking it brings me to a blank page. I use WordPress 3.8.3, Headway 3.6.3 and Gravity Forms 1.8.7

    ??

    Thanks for any advice, Jos

    Reply
    1. David Smith
      David Smith Staff April 17, 2014 at 8:51 am

      Hi Jos, did you access your permalinks page? It’s under Settings -> Permalinks in your WordPress admin menu. Just access the page, and it should work. If it still isn’t working, send me a WP login and URL to view the preview form (david at gravitywiz dot com).

  5. David Schmeikal
    David Schmeikal March 14, 2014 at 12:01 am

    Hey David. Great site! Is there anyway we can preview a form that has page breaks and required fields?

    Always wants the fields to be populated before proceeding. Quite annoying when you are just testing things.

    Reply
    1. Bruce Munson
      Bruce Munson January 19, 2014 at 10:00 am

      Hey David,

      Yep, turned out to be a waste of my time and yours. When I changed themes, it worked fine. I’ll hunt down the conflict in the other theme.

      Gravity Wiz is a great resource and site. Thanks!

  6. Shawn Hunter
    Shawn Hunter December 22, 2013 at 8:19 pm

    YES!!! A post!! It has been a long wait but always worth it. Another great post.

    I was griping about the ‘live preview’ last week. I love that I can actually submit a form and test the functionality with the current live preview functionality, but there are many instances where I need to see what it will actually look like on a page – and it is a bit tedious to have to post embed the form into a page manually. Great instruction to take live preview to greatness. Thanks!!

    Reply
    1. David Smith
      David Smith Staff December 23, 2013 at 7:23 am

      Glad I did not disappoint, Shawn. I hope you’re ready for a lot more Gravity Wiz love in 2014. ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Download Snippet

Gravity Forms Live Preview

This field is for validation purposes and should be left unchanged.