Developers: Using the JavaScript Events API

The Convert Forms JavaScript Events API is extremely powerful, providing a set of events on which you can bind your custom Javascript functionality to further extend Convert Forms to suit your specific needs.

BeforeSubmit

Fires before the form submission starts. This is rather useful when you need to do some extra validations, change field values and prevent the form submission.

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

AfterSubmit

Fires after the form submission request is completed regardless if the submission was successfull or not.

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

AfterTask

Fires after the form is successfully submitted and the form task is finished. Eg: Display 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
});

Success

Fires after the form is successfuly submitted. This is rather 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

Fires when an error occurs during form submission. This is rather useful when you want to modify 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.";
});

Impression

Fires after the form is seen by the user.

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

Notes

Use the correct ConvertForm ID

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