JavaScript Events

HTML Forms fires several JavaScript events when visitors interact with a form on your site. You can hook into these events to run your own code, for example to send events to Google Analytics.

Available Events

The following events are available:

submit

Fires right after the form is submitted, but before the request is processed.

submitted

Fires after the request is processed, for both successful submissions and errors.

error

Fires after the request is processed when a validation error occurs, for example, when a required field is missing.

success

Fires after the request is processed, and the submission was a success.

Hooking Into an Event

The following code example hooks into the “success” event for all forms (see above).

<script>
html_forms.on('success', function(formElement) {
   // your code goes here
});
</script>

Alternatively, you can hook into a specific form using the default browser events API too.

<script>
document.querySelector('.hf-form-5').on('hf-success', function(e) {
   // your code goes here
});
</script>

You can add this code directly to your form mark-up or to any other JavaScript file that is loaded on your site.