Gravity Forms Live Preview

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 Highlighted

Default Configuration

Advanced Configuration

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!