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 accept-charset="UTF-8" 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.
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.