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 ) => {
	if ( ! gform?.utils ) {
		return;
	}

	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 );

	if ( gform.core?.triggerPostRenderEvents ) {
		// For Gravity Forms 2.9.5 and newer.
		gform.core.triggerPostRenderEvents( formId, currentPage );
	} else {
		// For older versions.
		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?