gform/submission/pre_submission

• Description
• Usage
• Parameters
• Examples
• Accessing the form ID
• Accessing a field value
• Aborting based on a field value
• Triggering Meta Pixel
• Triggering HubSpot tracking
• Triggering CallRail form tracking
• Since
• Source Code

Description

The gform/submission/pre_submission filter should be used to perform custom actions between a form button (e.g. submit, next, previous) being clicked and the request being posted to the server.

Usage

The gform/submission/pre_submission filter should be used with the gform.utils.addAsyncFilter method.

gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
	// Perform your custom action here.
	// Use `data.abort = true;` to abort the submission if needed.

	return data;
});

We recommend adding the filter via the gform/theme/scripts_loaded event to ensure the gform.utils.addAsyncFilter method is available at the time the filter is added.

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		// Do something.
		return data;
	});
});

If you only want to add the filter for a specific form, you could use the gform/post_render event, which has access to the ID of the form being rendered, e.g.

document.addEventListener('gform/post_render', (event) => {
    if (event.detail.formId !== 2) {
        return;
    }
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		// Do something.
		return data;
	});
});

Parameters

• data JavaScript Object
  The data object.
  • form HTMLFormElement
    The form element object.
  • submissionType string
    The type of submission that is being made. Possible values, with their equivalent gform.submission constants, are:
    • submit (gform.submission.SUBMISSION_TYPE_SUBMIT)
      Indicates the form is being submitted, so the entry will be saved if the submission is valid.
    • next (gform.submission.SUBMISSION_TYPE_NEXT)
      Indicates the form is being submitted, so the next page will be displayed if the current page is valid.
    • previous (gform.submission.SUBMISSION_TYPE_PREVIOUS)
      Indicates the form is being submitted, so the previous page will be redisplayed.
    • save-continue (gform.submission.SUBMISSION_TYPE_SAVE_AND_CONTINUE)
      Indicates the user is saving their progress, so the save and continue confirmation with the resume link will be displayed.
    • send-link (gform.submission.SUBMISSION_TYPE_SEND_LINK)
      Indicates the user is submitting an email address via the save and continue confirmation, so the save and continue notification containing the resume link will be sent to the given email address.
  • submissionMethod string
    How the submission will be processed. Possible values, with their equivalent gform.submission constants, are:
    • postback (gform.submission.SUBMISSION_METHOD_POSTBACK)
      Indicates the form will use the default postback submission method.
    • iframe (gform.submission.SUBMISSION_METHOD_IFRAME)
      Indicates the form will use the iframe-based legacy Ajax submission method.
    • ajax (gform.submission.SUBMISSION_METHOD_AJAX)
      Indicates the form will use the experimental Ajax submission method introduced in 2.9.0, which uses a true Ajax request.
    • custom (gform.submission.SUBMISSION_METHOD_CUSTOM)
      Indicates the form will use a custom submission method. For example, payment add-ons that use custom JavaScript to communicate with the payment gateway before submitting the form will use this.
  • abort boolean
    Indicates if the submission should be aborted. Defaults to false.

Examples

Accessing the form ID

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		const formId = data.form.dataset.formid;
		// Do something with the formId.

		return data;
	});
});

Accessing a field value

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		const email = gform.utils.getNode('.gfield--type-email input', data.form, true);
		console.log('email:', email.value);

		return data;
	});
});

Aborting based on a field value

In this example, the submissions for form ID 1 will be aborted if the value of field ID 5 is not Yes.

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		if (data.submissionType !== gform.submission.SUBMISSION_TYPE_SUBMIT || data.form.dataset.formid !== '1') {
			return data;
		}

		const input = gform.utils.getNode(`#input_${data.form.dataset.formid}_5`, data.form, true);
		if (input?.value !== 'Yes') {
			data.abort = true;
		}

		return data;
	});
});

Triggering Meta Pixel

The following example shows how an analytics tracking script could be triggered on form submission. In this case, the Meta Pixel.

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		if (data.submissionType !== gform.submission.SUBMISSION_TYPE_SUBMIT || typeof fbq === 'undefined') {
			return data;
		}

		fbq('track', 'Lead');

		return data;
	});
});

Triggering HubSpot tracking

The following example shows how the HubSpot tracking script can be triggered on form submission if the hubspotutk cookie does not exist. See HubSpot’s Tracking code API overview page for more details about their script.

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		if (data.submissionType !== gform.submission.SUBMISSION_TYPE_SUBMIT || typeof window._hsq === 'undefined') {
			return data;
		}

		if (!document.cookie.split('; ').find(row => row.startsWith('hubspotutk'))) {
			window._hsq.push(['trackPageView']);
		}

		return data;
	});
});

Triggering CallRail form tracking

The following example shows how the CallRail form tracking script can be triggered on form submission. See the CallRail documentation for more details about configuring form tracking.

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		if (data.submissionType !== gform.submission.SUBMISSION_TYPE_SUBMIT || typeof CallTrk === 'undefined') {
			return data;
		}
		
		CallTrk.captureForm(`#${data.form.id}`);

		return data;
	});
});

Since

This filter was added in Gravity Forms v2.9.0

Source Code

This filter is located in submitForm() in /assets/js/src/theme/submission/submission.js.