✅Submission Status

Display part of an HTML page when a submission is successful or if an error occurs!

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

<!-- 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>