Gravity Forms – dynamic form reloading

  1. Home
  2. Knowledge Base
  3. Documentation
  4. Snippets
  5. Gravity Forms – dynamic form reloading

This script will reload all Gravity Forms inside an Area (“Popup”) when that Area is opened. For this snippet, you need the Gravity Forms Reload Form add-on.

How it works

The script can be copy-pasted without and adjustment. It works out-of-the-box for any Popup or other Area type.

The code will hook into the JS API and validate the Area right before it’s displayed to the visitor. When the script detect a Gravity Form inside the Area, that form is reloaded using the Gravity Forms Reload Form API.

When the Area does not contain such a form, the script does nothing. When the Gravity Form Reload Form add-on is missing, the script does nothing. It can also handle Popups that contain more than one GF form.

Where to paste the script?

Option a) Go to your wp-admin dashboard and navigate to Divi > Theme Options. Open the tab “Integrations” and paste the entire script into the field “Add code to the < body >”

Option b) When your child-theme loads a custom .js-file, add the JS code to that .js file. Just make sure that the .js file is enqueued on all front-end pages.

Notice

The snippet below has an optional debugging output in line 33: Uncomment that line to display an alert message every time a Gravity Form is detected inside an Area.

We recommend to uncomment that line and test your Popup at least once, to make sure the script is correctly loaded and no JS error occurs – even though the script has some “fail-safes”, you might paste it in the wrong place or maybe forget a few characters, etc. Temporarily enabling the alert() in line 33 gives you the confirmation that you did everything right and the code is working.

The Code

<script>
// The "show_area" action is fired right before any Area (i.e., Popup) is made visible.
// See https://divimode.com/knowledge-base/action-show-area/

// The callback function receives a single parameter: The DiviAreaItem object.
// See https://divimode.com/knowledge-base/object-diviareaitem/
DiviArea.addAction('show_area', function(area) {
	// Find all forms inside the Popup that have an ID starting with "gform".
	var forms = area.find('form[id^="gform"]');

	// When no gravity forms exist inside the Popup, there's nothing to do.
	if (!forms.length) {
		return;
	}

	// Loop through all forms in the Popup and reload them.
	forms.each(function() {
		// Get the form element.
		var form = jQuery(this);

		// Calculate the gwrf name: 
		// Use the forms ID attribute and replace "gform" with "gwrf".
		var gwrf_name = form.attr('id').replace('gform', 'gwrf');

		// Get the gwrf-instance with the calculated name ("gwrf_<id>").
		var gwrf = window[gwrf_name];

		// When the gwrf-instance exists, use it to reload the form.
		if ('undefined' !== typeof gwrf) {
			gwrf.reloadForm();

			// Uncomment the following line to see if the script works:
			// alert('Reloaded the GF form ' + gwrf_name);
		}
	});

});
</script>

Was this article helpful?

Related Articles