Simple contact form

Below is a HTML form that submits name and email to FormBackend. One of the benefits of FormBackend is that you don’t need to embed any iframes or have custom JavaScript on your page - it’s all plain HTML.

In the below example we’ve used TailwindCSS for styling - but you can use regular CSS or style it exactly the way you want.

<h1 class="text-xl text-gray-800 font-semibold mb-2">
  Simple contact form
</h1>
<p class="mb-6 text-gray-600 w-2/3 leading-normal">
  This is a simple contact form that submits to FormBackend. Styling for this example is done using TailwindCSS, but that's something
  you control 100%.
</p>

<form action="https://www.formbackend.com/f/8328ae24922e7415" method="POST">
  <div class="mb-3">
    <label for="name" class="font-bold uppercase text-gray-600 block tracking-wide text-sm mb-1">Name</label>
    <input type="text" id="name" name="name" class="bg-gray-300 rounded p-2 text-gray-600 focus:shadow-outline focus:outline-none" required>
  </div>

  <div class="mb-3">
    <label for="email" class="font-bold uppercase text-gray-600 block tracking-wide text-sm mb-1">Email</label>
    <input type="email" id="email" name="email" class="bg-gray-200 rounded p-2 text-gray-600 focus:outline-none" required>
  </div>

  <div class="mb-3">
    <button type="submit" class="bg-blue-700 text-white px-4 py-2 rounded">
      Submit
    </button>
  </div>
</form>

The above HTML results in the following form:

You can try filling out the fields and submitting it to FormBackend. Notice the action attribute on the form tag, that is how submissions go to FormBackend.

Message after submitting the form

Notice how you see the custom message Thank you for trying out this simple contact form :) after you have submitted the form? That is 100% customizable from the FormBackend settings. You can even redirect the user back to your own custom “Thank you”-page if you’re on a paid plan.