Form events

Using event binding to use our native form statuses to create custom experiences

Below is a list of the custom events you have access to.




This event is fired if a form is submitted, but comes back to validation error


This event fires multiple times for forms that have File fields. Returns an event that can be used to show upload progress to a visitor.


This event is fired if a form is submitted successfully.

Basic examples

Here are some simple event binding examples using vanilla JS.

document.addEventListener('ajax-form-success', function(e) {
  console.log('ajax-form-success event - form was valid');
document.addEventListener('ajax-form-failure', function(e) {
  console.log('ajax-form-failure event - most likely is a validation error');

Using ajax-form-progress

For large file uploads, you can use our ajax-form-progress event to render a progress bar as the files are uploaded.

Here is a rough example, that will display a blue progress bar that shows the percentage uploaded.

document.addEventListener('ajax-form-progress', function(event) {
  console.log('ajax-form-progress event - updates with completed progrsss as the form processes');
  var progressEvent = event.progressEvent;
  var percentProgress = Math.round((progressEvent.loaded * 100) /;
  if (percentProgress < 96) { = '<div class="sb-progress"><div class="sb-progress-bar" style="width:' + percentProgress + '%">' + percentProgress + '%</div></div>';
.sb-progress-bar {
    height: 50%;
.sb-progress {
    width: 100%;
    background-color: #ddd;
.sb-progress-bar {
    width: 0%;
    background-color: #1F618D;
    color: white;
    padding: 20px;

Last updated