Compatibility with WordPress Gravity Forms

[elliottmangham]

Describe the problem 🧐

Gravity Forms only work on the first page load, however, there is seemingly no way to reload/reinitialise a Gravity Form on page change with Swup.js. That's basically it, as right now, AJAX enabled Gravity Forms do not submit after page change, even with Head Plugin, or Forms Plugin installed.

Describe the proposed solution 😎

A simple way to reload Gravity Forms inside a Swup hook.

Gravity Forms is used on over 5 million websites, so it's a considerable deal for it to work with Swup.js.

There have been dozens of requests to Gravity Forms directly, with no responses as yet. My hope is to request help from Swup to see if there are any proposed suggestions or ways to make it work, since Gravity Forms are not being helpful. Below is a list of just some of the tickets:

• https://community.gravityforms.com/t/any-plans-to-make-gf-play-nicer-with-ajax-page-loading-libraries/11919
• https://community.gravityforms.com/t/loading-form-using-barba-swup/11543
• https://github.com/orgs/swup/discussions/899
• https://community.gravityforms.com/t/gravity-forms-and-swup-on-page-change/17452
• https://community.gravityforms.com/t/asynchronous-loading-form-using-barba-swup/12404
• https://community.gravityforms.com/t/barbajs-reset-form-after-submit-or-prevent-persisted-form-state-when-ajax-loads-html-form/15325/2
• https://stackoverflow.com/questions/60542351/wordpress-gravity-forms-ajax-swup-js

Alternatives considered 🤔

I have tried everything I can think of, as have many other users to no avail. And reaching out Gravity Forms has been fruitless.

How important is this feature to you? 🧭

I cannot use swup without it

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

Agreed, this would be a super helpful plugin. As the current maintainers aren't using Gravity Forms themselves, it'd require active users of the product to get together and work on a plugin. For anyone interested, there's official documentation on creating custom swup plugins.

The easiest solution might just be to pay the original developers, if that's an option, as reinitializing dynamically added forms will probably need first-party support to work reliably.

[elliottmangham]

Hey @daun, thank you for your response!

I'd be happy to assist you however I can. I agree that this issue likely requires intervention from the first-party, Gravity Forms, and I have requested they add it to their roadmap, but the timeline for a resolution is uncertain.

I can look into creating a custom Swup plugin, although that may be beyond my current capabilities.

In the meantime, we have discovered a helpful solution that combines the Swup Scripts Plugin with some PHP to selectively optin Gravity Forms scripts. This has been very beneficial for our team, so I'm sharing it here in case it proves useful for you as well.

<?php
/**
 * Gravity Forms
 */

// Enqueue required files
function gf_enqueue_required_files()
{
	if (function_exists('gravity_form_enqueue_scripts')) {
		gravity_form_enqueue_scripts(1, true);
	}
}
add_action('get_header', 'gf_enqueue_required_files');

// Only execute if Gravity Forms is installed
if (function_exists('gravity_form')) {
	/**
	 * Load Gravity Form Scripts
	 * Checks if Gravity Forms is installed, retrieves forms, and enqueues necessary scripts.
	 */
	function load_gravity_form_scripts()
	{
		if (class_exists('GFCommon')) {
			$forms = \GFAPI::get_forms();
			if ($forms) {
				foreach ($forms as $form) {
					gravity_form_enqueue_scripts($form['fields'][0]->formId, true);
				}
			}
		}
	}

	/**
	 * Alter WP Script Tags
	 * Adds a custom attribute to specified script tags to optimize reloading.
	 *
	 * @param string $tag The HTML script tag.
	 * @param string $handle The script handle.
	 * @param string $src The source URL of the script.
	 * @return string Modified script tag.
	 */
	function alter_wp_script_tags($tag, $handle, $src)
	{
		$reload_handles = [
			'wp-polyfill-inert',
			'regenerator-runtime',
			'wp-polyfill',
			'wp-dom-ready',
			'wp-hooks',
			'wp-i18n',
			'wp-a11y',
			'jquery-ui-core',
			'jquery-ui-datepicker',
			'gform_datepicker_legacy',
			'gform_datepicker_init',
			'gform_gravityforms_theme_vendors',
			'gform_gravityforms_theme',
		];
		if (in_array($handle, $reload_handles)) {
			$tag = str_replace('src=', 'data-swup-reload-script src=', $tag);
		}
		return $tag;
	}
	add_filter('script_loader_tag', 'alter_wp_script_tags', 10, 3);

	/**
	 * Alter Inline Script Tags
	 * Adds a custom attribute to all inline script tags.
	 *
	 * @param array $attributes Array of script attributes.
	 * @param string $handle The script handle.
	 * @return array Modified attributes array.
	 */
	function alter_inline_script_tags($attributes, $handle)
	{
		$attributes['data-swup-reload-script'] = '';
		return $attributes;
	}
	add_filter('wp_inline_script_attributes', 'alter_inline_script_tags', 10, 2);

	/**
	 * Modify Gravity Form Confirmation
	 * Adjusts the confirmation behaviour for AJAX forms.
	 *
	 * @param mixed $confirmation The confirmation text.
	 * @param array $form The current form object.
	 * @param array $entry The current form entry.
	 * @param bool $ajax Whether the form was submitted via AJAX.
	 * @return mixed Modified confirmation text.
	 */
	function modify_gform_confirmation($confirmation, $form, $entry, $ajax)
	{
		if ($ajax && $form['confirmation']['type'] === 'redirect') {
			$redirect_url = $form['confirmation']['url'];
		} elseif ($ajax && $form['confirmation']['type'] === 'page') {
			$redirect_url = get_the_permalink($form['confirmation']['pageId']);
		} else {
			$redirect_url = false;
		}
		if ($redirect_url) {
			$confirmation =
				"<script>function gformRedirect(){document.location.href='" . $redirect_url . "';}</script>";
		}
		return $confirmation;
	}
	add_filter('gform_confirmation', 'modify_gform_confirmation', 10, 4);
}