---
title: "JavaScript Events API - Convert Forms"
description: "The Convert Forms JavaScript Events API is highly versatile. It offers a range of events that allow you to attach your custom JavaScript functions, en"
url: "https://www.tassos.gr/docs/convert-forms/developers/javascript-api"
date: "2026-04-03T21:03:13+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Convert Forms ](https://www.tassos.gr/index.php?option=com_content&view=category&id=43) / [ Developers ](https://www.tassos.gr/index.php?option=com_content&view=category&id=61)

#  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)

## [impression](#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](#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](#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](#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](#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](#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](#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](#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](#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](#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](#notes)

You should always wrap your code with the following closure:

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

## [Use the correct ConvertForm ID](#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.

 Last updated on Sep 25th 2025 08:09

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Convert Forms",
            "item": "https://www.tassos.gr/docs/convert-forms"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Developers",
            "item": "https://www.tassos.gr/docs/convert-forms/developers"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "JavaScript Events API",
            "item": "https://www.tassos.gr/docs/convert-forms/developers/javascript-api"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/convert-forms/developers/javascript-api"
    },
    "headline": "JavaScript Events API",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Sotiris Katsaniotis",
        "url": "https://www.tassos.gr/docs/convert-forms/developers/javascript-api"
    },
    "datePublished": "2017-07-05T18:33:30+03:00",
    "dateCreated": "2017-07-05T18:33:30+03:00",
    "dateModified": "2025-09-25T08:19:37+03:00"
}
```