FireBox Form Block Javascript API

The FireBox Form Block JavaScript Events API provides a set of events to which you can bind your custom Javascript functionality, further extending the provided Form Block to suit your specific needs.

Before Submit

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.

const form = document.querySelector('#form-123');
form.addEventListener("beforeSubmit", function(event) {
    // your code
});

Validate and limit characters allowed in a field

This example displays an error message when the name field exceeds the 10-character limit.

const form = document.querySelector('#form-123');
form.addEventListener("beforeSubmit", function(event) {
	var input = form.querySelector('input[name="fb_form[name]"]');

	if (input.value.length > 10) {
		event.preventDefault();
		event.detail.error = "Name cannot exceed 10 characters.";
	}
});

Validation Error

Fires after the form has been submitted, but there are validation errors. Validation error messages can appear when the form is submitted but:

• A required field is left empty
• The email field doesn’t contain a valid email address

const form = document.querySelector('#form-123');
form.addEventListener("validation_error", function(event) {
    // your code
});

Success

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

const form = document.querySelector('#form-123');
form.addEventListener("success", function(event) {
    // your code
});

Before Redirect User

Fires when the form is set to redirect to a URL. This is useful when you need to intervene before the redirection occurs, so you can modify the redirect URL.

const form = document.querySelector('#form-123');
form.addEventListener("beforeRedirectUser", function(event) {
    event.detail.url = 'NEW URL';
});

Error

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

An error can appear when an action cannot be performed, such as an email cannot be sent, or syncing the submissions with a 3rd-party service cannot be performed, etc…

const form = document.querySelector('#form-123');
form.addEventListener("error", function(event) {
    // your code
});

Notes

Use the correct Form ID

The above code blocks refer to a Form with ID #123 for demonstration purposes. Replace this number with your Form ID. To find the Form ID, click here.