JavaScript Form Events – Bit Form

The Bit Form plugin offers JavaScript Form Events, which are powerful tools that allow you to customize and extend the functionality of your forms. These Form Events enable you to execute specific tasks at different stages of the form submission process. Using JavaScript code, you can add custom behaviors, perform validations, interact with APIs, and much more.

Here are some of the Form Events provided by Bit Form:

1. On Form Submit Success
2. On Form Submit Error
3. On Form Reset
4. On Form Validation Error

On Form Submit Success

Description

Bit Form’s On Form Submit Success event allows you to perform additional actions or integrations after a form is successfully submitted. This includes displaying a success message to the user, sending email notifications, integrating with third-party services, redirecting to a specific page, storing form data in a database, and more. This event helps you customize the behavior of Bit Form and seamlessly integrate it with your website or external services.

Usage​

/* On Form Submit Success */
document.querySelector(`#form-${bfContentId}`).addEventListener('bf-form-submit-success', ({detail:{formId, entryId, formData}}) => {
    /* Write your code here... */
})

Parameters​

• formId (integer) Form ID
• entryId (integer) Entry ID of this response
• formData (array) Entry Response as key-value pairs array as input name as array key

On Form Submit Error​

Description​

The event allows you to perform additional actions after submitting a form with an error.

Usage​

/* On Form Submit Error */
document.querySelector(`#form-${bfContentId}`).addEventListener('bf-form-submit-error', ({detail:{formId, errors}}) => {
    /* Write your code here... */
})

Parameters​

• formId (integer) Form ID
• error (string) Error message

On Form Reset​

Description​

The When event allows you to perform additional actions after the form is reset

Usage​

// On Form Reset
document.querySelector(`#form-${bfContentId}`).addEventListener('bf-form-reset', ({detail:{formId}}) => {
    // Write your code here...
})

Parameters​

• formId (integer) Form ID

On Form Validation Error​

Description​

The event allows you to perform additional actions after submitting a form with field validation error.

Usage​

/* On Form Validation Error */
document.querySelector(`#form-${bfContentId}`).addEventListener('bf-form-validation-error', ({detail:{formId, fieldId, error}}) => {
    /* Write your code here... */
})

Parameters​

• formId (integer) Form ID
• fieldId (integer) Field ID
• error (string) Error message

How to add JavaScript form events in the Bit Form builder​

Follow these steps:

1. Open the Bit Form builder.
2. Click on the gear icon located in the top right corner of the visual form editor.
3. Navigate to the “Custom Code” tab.
4. In the JavaScript tab, click on the three-dot icon in the popup’s top right corner.
5. Scroll down to find the “Form Events” section.
6. Select the desired form event from the available options.
   • For example, you can choose the “On Form Submit” event.
7. Once you select the event, you can add your custom JavaScript code to define the actions or functionality you want to execute when the event is triggered.
8. Save and update the form to apply the JavaScript form event.