How to automatically reload a Gravity Form when a modal is closed

By default GP Reload Form will provide the ability to add a link that when clicked will reload a Gravity Form automatically. It also has support for reloading a form after a specific time in seconds.

We recently had a Gravity Perks user request support for allowing a Gravity Form in a modal to automatically reload when the modal was closed.

So for example, a user visits your site and fills out part of a Gravity Form or there are validation errors on the Gravity Form in a modal, then the user exits the modal where the form is located, you may want to “reset” the form back to its default state.

We have now added support for this feature with GP Reload Form. This article will show you how to automatically reload a Gravity Form when a modal is closed!

Steps

1. Enable GP Reload Form.
2. Add jQuery snippet to a callback event.

1. Enable GP Reload Form

1. Visit the form you would like to use in your modal
2. Select “Settings” from the Form Menu to visit the “Form Settings” page
3. Scroll to the bottom of this page and select the “Automatically Reload Form” option. There will also be an option that appears labeled “Seconds until Reload.” Leave this option empty.

2. Add jQuery snippet to a callback event

1. Copy and paste the snippet that corresponds to your modal of choice (see Usage Examples below).
2. Update the selected usage example to use your own form ID. All of the usage examples are based on a form ID of 82; replace with your own form ID.

Usage Examples

1. Magnific Popup
2. Fancybox
3. Popup Maker

Magnific Popup Example

This is an example of how you would setup this functionality using Magnific Popup

Bind to an already initialized Magnific Popup

Here is an example of how you would bind this to a Magnific Popup that has already been initialized elsewhere.

Fancybox Example

This is an example of how you would set up this functionality using Fancybox Popup

Bind to an already initialized Fancybox Popup

Here is an example of how you would bind this to a Fancybox Popup that has already been initialized elsewhere.

Popup Maker (formerly Easy Modal) Example

This is an example of how you would set up this functionality using Popup Maker

Since Popup Maker is a plugin solution, setting this up will be a little different. You’ll notice that the trigger we are using in the example above is “#pum-13256”

When you create a Popup Maker popup, they will automatically assign you a trigger class, which you can find on the All Popups page. In the example above, this class is “popmake-13256”

This class is the trigger for the popup to appear on a page. So you just need to identify this class and the number value will be what you use in the snippet above.

Digging Deeper

The above examples will work out of the box with quick changes to the Form ID and modal triggers, but what about other modal options?

This is the base code that enables this functionality and it can be used in conjunction with any modal.

In order to activate it with other modals, you’ll need to:

1. Identify the trigger for the modal. This can be something you set yourself or that is already set by the plugin you are using.
2. Identify the callback close event for the modal. Each modal solution will have a callback that fires when the modal is closed. You just need to add the snippet to that callback.
3. For plugin solutions such as Popup Maker, you aren’t handling the initialization manually so you instead identify the modal close event being used by the plugin then apply the snippet above to it. In the case of Popup Maker, there is a close event called pumAfterClose so you would need to find the equivalent event in the modal plugin you are using.

We hope you find this useful!

Did this help you out? Let us know in the comments below!