How to Trigger Gravity Forms Scripts in Elementor Popups

Introduction

This article explains how to trigger Gravity Forms scripts when a form is displayed inside an Elementor popup. Using a custom script, you can detect when an Elementor popup is shown, parse its content, and fire the necessary post-render events.

Script To Parse the Popup Content

The following script parses the popup content for a form, gets the ID of the found form, and then uses it to trigger the scripts.

window.addEventListener('elementor/popup/show', (event) => {
	const form = gform.utils.getNode('.gform_wrapper form', event.detail.instance.$elements, true);
	if (!form) {
		return;
	}

	const formId = form.dataset.formid;
	const currentPage = 1;
	console.log('elementor/popup/show: triggering post render scripts for form', formId);
	jQuery(document).trigger('gform_post_render', [formId, currentPage]);
	gform.utils.trigger({
		event: 'gform/postRender',
		native: false,
		data: {formId, currentPage}
	});
	gform.utils.trigger({
		event: 'gform/post_render',
		native: false,
		data: {formId, currentPage}
	});
});

Placement

Your code snippet can be placed in an HTML field on your form or in a theme custom JavaScript file.

See also the JavaScript/jQuery section in this article: Where Do I Put This Code?