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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.devhub.com/themes-and-custom-templates/advanced-examples/form-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.