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.

Event	Description
ajax-form-failure	This event is fired if a form is submitted, but comes back to validation error
ajax-form-progress	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.
ajax-form-success	This event is fired if a form is submitted successfully.

Basic examples

Here are some simple event binding examples using vanilla JS.

<script>
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');
});
</script>

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.

<script>
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) / progressEvent.total);
  if (percentProgress < 96) {
    event.target.innerHTML = '<div class="sb-progress"><div class="sb-progress-bar" style="width:' + percentProgress + '%">' + percentProgress + '%</div></div>';
  }
});
</script>
<style>
.sb-progress,
.sb-progress-bar {
    height: 50%;
}
.sb-progress {
    width: 100%;
    background-color: #ddd;
}
.sb-progress-bar {
    width: 0%;
    background-color: #1F618D;
    color: white;
    padding: 20px;
}
</style>