Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

Gravity Forms Live Preview

Preview your forms on the frontend of your site.

Last updated | Written by 25 Comments

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!

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!

View CodeDownload Plugin

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!

Did this resource help you do something awesome with Gravity Forms?

Then you'll absolutely love Gravity Perks; a suite of 47+ essential add-ons for Gravity Forms with support you can count on.

Comments

    • David Smith says

      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.

    • Christopher says

      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;

    • Christopher says

      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?

    • David Smith says

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

  3. hannanstd says

    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

  4. Daniel says

    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

  5. Fran says

    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

  6. Jos Vermeulen says

    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

    • David Smith says

      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).

  7. David Schmeikal says

    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

    • Bruce Munson says

      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!

  9. Shawn Hunter says

    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

    • David Smith says

      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 *

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.