Logo for FormBackend
« back to blog
tutorial

Redirect to URL with submitted values from your form

When someone submits your form, you might want to redirect them to a custom page on your website instead of showing FormBackend’s default thank-you page. Even better, you can pass the submitted form values along in the URL so you can show a personalized confirmation message.

This is useful for showing order confirmations, personalizing thank-you pages, or passing data to analytics and tracking tools.

How it works

Let’s say you have a form like this:

<form action="https://www.formbackend.com/f/your-token-here" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="product">Product</label>
  <select id="product" name="product">
    <option value="starter">Starter</option>
    <option value="pro">Pro</option>
    <option value="enterprise">Enterprise</option>
  </select>

  <button type="submit">Submit</button>
</form>

In your FormBackend form settings, you can set a custom redirect URL that includes merge tags. Merge tags are placeholders wrapped in curly braces that get replaced with the actual submitted values.

For example, setting your redirect URL to:

https://www.mywebsite.com/thank-you?name={name}&email={email}&product={product}

When a user named “Jane” with email “jane@example.com” selects the “Pro” product and submits, they will be redirected to:

https://www.mywebsite.com/thank-you?name=Jane&email=jane%40example.com&product=pro

FormBackend automatically URL-encodes the values so special characters like @ are handled correctly.

Setting up the redirect

  1. Log in to FormBackend and go to your form
  2. Navigate to the Settings tab
  3. Find the Redirect URL field
  4. Enter your URL with merge tags for any fields you want to pass along
  5. Save your settings

That’s it. The next time someone submits the form, they’ll be redirected to your custom URL with the form values included.

Reading the values on your page

On your thank-you page, you can read the URL parameters with JavaScript to personalize the content:

<h1>Thanks, <span id="user-name"></span>!</h1>
<p>We received your interest in our <span id="selected-product"></span> plan.</p>

<script>
  const params = new URLSearchParams(window.location.search);
  document.getElementById('user-name').textContent = params.get('name');
  document.getElementById('selected-product').textContent = params.get('product');
</script>

This gives the user a personalized confirmation without any server-side code.

Common use cases

  • Order confirmations: Show the product name, quantity, or order total on a custom confirmation page
  • Personalized thank-you pages: Greet the user by name after they fill out a contact form
  • Analytics tracking: Pass form values to your analytics platform by including them in the redirect URL
  • Conditional content: Show different content depending on a dropdown selection or checkbox value
  • Lead qualification: Redirect users to different pages based on their answers (e.g., redirect enterprise leads to a calendar booking page)

Combining with other features

Redirects work alongside all of FormBackend’s other features. You can still receive email notifications for every submission, send auto-reply emails to the person who submitted, and forward data to integrations like Slack or Google Sheets.

For more details on redirect configuration, see the redirect after submission documentation. You can also customize the default thank-you page if you prefer not to redirect.

Next steps