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

Did this answer your question?