Form DOM Submission Actions on Strattic

Strattic offers out-of-the-box integrations with several form solutions, including Gravity Forms, Contact Form 7, and Elementor Forms (coming soon!).

Many form integrations have JavaScript DOM actions that fire throughout the submission process.

DOM Events

If you need to listen for any form events, please reference this chart. We have included some “native” plugin events, but you can also find the “Strattic Events” that fire as well:

Strattic Event	Fires when…	Passes Params	WPCF7 Equivalent	GF Equivalent
strattic-form-submit	fires before recaptcha, before upload, before post data	`{form: form, formattedData: formattedData}`
strattic-form-response	fires after the response comes back for the form submission	`{form: form, formattedData: formattedData, result: result}`	wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.
strattic-form-reset	fires when the reset method is called on the form, after the response comes backe, before success,	`{form: form}`
strattic-form-success	fires if success is truthy	`{form: form, formattedData: formattedData, result: result}`	wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.	gform_confirmation_loaded: Fired on AJAX-enabled forms when the confirmation page is loaded.
strattic-form-error	fires if success is falsey	`{form: form, formattedData: formattedData, result: result}`	wpcf7invalid: Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.

DOM Events Not Available on Strattic

There are a few actions that are native to plugins like Gravity Forms and Contact Form 7, that there isn’t an exact match for on Strattic. These would be:

Contact Form 7	Gravity Forms
`wpcf7mailfailed` : Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.	`gform_page_loaded`: Fires on multi-page forms with AJAX submission enabled when changing pages (i.e. going to the next or previous page).
`wpcf7spam` : Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.	`gform_post_render` : This jQuery hook is fired every time the form is rendered to allow custom jQuery to be executed. This includes initial form load, going to the next/previous page on multi-page forms, form rendered with validation errors, confirmation message displayed, etc.
	`gform_pre_conditional_logic`

If there are any of these events you would like, please reach out and let us know the name of the event hook, and where you need it to fire, and we can adjust and update our platform.

Usage Examples

If you need to send some data to Google Tag Manager after a submission, you can do something like this:

jQuery('#gform_1').on('strattic-form-success', function(event){
    var formId = event.detail.form.id
    var formDetails = event.detail.formattedData
    window.dataLayer.push({
        'event' : 'gravityFormSubmission',
        'gfformID' : formId,
        'gfformSubmission' : formDetails
    });
});

Note: You can also rewrite this in “vanilla” JavaScript:

document.addEventListener( 'strattic-form-success', function(event){
    var formId = event.detail.form.id
    var formDetails = event.detail.formattedData
    window.dataLayer.push({
        'event' : 'gravityFormSubmission',
        'gfformID' : formId,
        'gfformSubmission' : formDetails
    });
});

Form DOM Submission Actions on Strattic

DOM Events

DOM Events Not Available on Strattic

Usage Examples

Did this answer your question?

Thank you for your feedback!