Back to App

⏳Quick Start

Collect your first form submission in just 5 minutes.

Create a Project

To get started, create a new project with the URL of the website where you want to accept submissions. Later, there will be a section on testing for a development setup.

Add BetterForm to Code

Next, copy and paste the script tag into any page where you want BetterForm to capture submissions. We strongly recommend leaving async and defer for optimized website performance. We will still capture any forms submitted to those pages!

<script async defer src="https://betterform.io/embed.js"></script>

Prepare the Form

  • To start using a form, add the betterform attribute to the form tag in your HTML.

<form betterform>

  • Next, add a hidden input with a value that corresponds to the name of your form.

 <input type="hidden" name="form[name]" value="Contact Form" />

  • Finally, add name attributes to all inputs that you want to submit to your project.

Show 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

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

Development Testing

Submit your form from localhost for development testing. We will validate that everything is set up properly and return success if it works as expected.

That's it 🎉 You're ready to launch your website and start receiving submissions.

Example Form

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script async defer src="https://betterform.io/embed.js"></script>
  </head>
  <body>
    <form betterform>
      <!-- Form Name -->
      <input type="hidden" name="form[name]" value="Contact Form" />
      <input type="text" name="Name" placeholder="Name" />
      <input type="email" name="Email" placeholder="Email" />
      <input
        type="text"
        name="Message"
      />
      <!-- Success Message -->
      <div data-bf-success style="display: none">
        <p>Thank you for reaching out. We will get back to you shortly.</p>
      </div>
      <!-- Error Message Message -->
      <div data-bf-success style="display: none">
        <p>Something with wrong! Please try again later</p>
      </div>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Add semantic name attributes to easily view your submissions

ex: Name, Phone Number, Email, Message

NextFree Project w/ Attribution

Last updated