« Back to examples

Simple contact form with redirect

This form redirects to a URL containing submitted values after submission.

Below is a HTML form that submits name and email to FormBackend. It’s similar to our Simple contact form. But this form contains values that has been submitted with the form in the URL it redirects to.

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

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.

Redirecting to a URL with values submitted via the form

Under the settings for your form in FormBackend, when you set up the redirect URL on a paid plan, if you enter https://example.com/?name={name} then we’ll insert the submitted value for the field named name. That way you can create custom submission pages, and refer values that have been submitted with the form on your own domain.

Want to try out FormBackend for free today?

You can try FormBackend for free for 1 form today!

Get started for free with one form!

© 2022 Formbackend. All rights reserved.