Developers: Using the JavaScript Events API

The Convert Forms JavaScript Events API is highly versatile. It offers a range of events that allow you to attach your custom JavaScript functions, enhancing Convert Forms to meet your specific requirements. These events are triggered in the following order:

• impression
• beforeSubmit
• success
• error
• afterTask
• afterSubmit

impression

It fires after the user sees the form.

var form = document.querySelector("#cf_1");
form.addEventListener("impression", function(event) {
	var entry = event.entry // The IntersectionObserverEntry
	// your code
});

beforeSubmit

Fires before the form submission starts. This is useful when you need to perform extra validations, change field values, or prevent the form from being submitted.

var form = document.querySelector("#cf_1");
form.addEventListener("beforeSubmit", function(event) {
	// your code
});

Validate and limit characters allowed in a field

This example displays an error message when the field message exceeds the characters limit.

var formID = 160
var inputName = 'email';
var error = 'Maximum character limit reached.';

// DO NOT EDIT BELOW
var form = document.querySelector('#cf_' + formID);
form.addEventListener('beforeSubmit', function(event) {
	var input = form.querySelector('input[name="cf[' + inputName + ']"]');

	if (input.value.length > 10) {
		event.preventDefault();
		event.detail.error = error;
	}
});

Display a Confirmation Before Submit

This example is rather useful when you want to display some sort of confirmation/warning to confirm that you are proceeding with the form submission.

var formID = 123

// DO NOT EDIT BELOW
document.querySelector('#cf_' + formID).addEventListener('beforeSubmit', function(event) {
	if (!confirm('Are you sure?')) {
		event.preventDefault();
	}
});

Success

It fires after the form is successfully submitted. This is useful when you want to modify the success message displayed in the form.

var form = document.querySelector("#cf_1");
form.addEventListener("success", function(event) {
	// your code
});

Modify the default success message

The example below modifies the success message.

var form = document.querySelector("#cf_1");
form.addEventListener("success", function(event) {
	event.detail.response.value = "The form has been successfully submitted!";
});

Error

It fires when an error occurs during form submission. This is useful when modifying the error message displayed in the form.

var form = document.querySelector("#cf_1");
form.addEventListener("error", function(event) {
	// your code
});

Modify the error message

The example below modifies the error message.

var form = document.querySelector("#cf_1");
form.addEventListener("error", function(event) {
	event.detail.response.error = "The form can't be submitted right now.";
});

AfterTask

It fires after the form is successfully submitted and the form task is finished. For example, it Displays the thank you message.

var form = document.querySelector("#cf_1");
form.addEventListener("afterTask", function(event) {
    var response = event.detail.response // The response in JSON format
    var task = event.detail.task // The task name executed 

	// your code
});

AfterSubmit

Fires after the form submission request is completed, regardless of whether the submission was successful.

var form = document.querySelector("#cf_1");
form.addEventListener("afterSubmit", function(event) {
	// your code
});

Notes

You should always wrap your code with the following closure:

ConvertForms.Helper.onReady(function() {
   // your code
});

Use the correct ConvertForm ID

The above code blocks refer to the ConvertForm with id #1 for demonstration purposes. Replace this number with your ConvertForm's id.