# Submission Status

To indicate to the user if the submission was successful, create HTML elements and add the appropriate attribute to make them visible after submission. The HTML elements must be inside the form to be displayed. Ensure the element is hidden by default with `style="display: none"`.

**Hide by Default:** `style="display: none"`

**✅ Success:** `data-bf-success`

**⛔️ Error:** `data-bf-error`

#### Example with Tailwind

```html
<!-- Success Message -->
<div class="w-full p-4 rounded-md bg-green-50" data-bf-success style="display: none">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="w-5 h-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium text-green-800">
        Thank you for reaching out. We will get back to you shortly.
      </p>
    </div>
  </div>
</div>

<!-- Error Message -->
<div class="w-full p-4 rounded-md bg-red-50" data-bf-error style="display: none">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium text-red-800">
        Something with wrong! Please try again later
      </p>
    </div>
  </div>
</div>
```


---

# 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.betterform.io/features/submission-status.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.