> For the complete documentation index, see [llms.txt](https://docs.devhub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devhub.com/themes-and-custom-templates/advanced-examples/form-events.md).

# Form events

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.

```markup
<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.

```markup
<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>
```