Simple contact form (with redirect)

A simple contact form that redirects after submission

by formbackend

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<h1 class="text-xl text-gray-800 font-semibold mb-2">
  Simple contact form (with redirect)
</h1>
<p class="mb-6 text-gray-600 w-2/3 leading-normal">
  This form redirects to a URL after it has been submitted. The URL it redirects to contains the email in the URL params. This can be done by
  setting a redirect url in the settings of the form on FormBackend similar to this: <span class="bg-indigo-100 rounded px-1">https://www.example.com?email={email}</span> - where <span class="bg-indigo-100 rounded px-1">{email}</span> is the name of the email field. This can be useful if you want to reference submitted
  values on the page you redirect to.
</p>

<form accept-charset="UTF-8" action="https://www.formbackend.com/f/af879ebcb3745f91" 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="mt-4">
    <button type="submit" class="bg-blue-700 text-white px-4 py-2 rounded">Submit</button>
  </div>
</form>

CSS

body {
  margin: 3rem;
}