SilentForms

Redirect after submit

Send visitors to your own thank-you page after an HTML form submission with a hidden redirect field or a dashboard setting.

When a plain HTML form is submitted, the browser leaves your page and follows the endpoint's response. On success that response is a redirect to the SilentForms thank-you page. Point it at a page on your own site instead and visitors stay inside your design, your navigation and your analytics.

Add a redirect field#

Add a hidden redirect input with the full URL of your thank-you page:

<form action="https://silentforms.com/api/submit" method="POST">
  <input type="hidden" name="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <input type="hidden" name="redirect" value="https://example.com/thanks">

  <label for="name">Name</label>
  <input id="name" type="text" name="name" required>

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

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
</form>

_next is accepted as well, so a Formspree form keeps its thank-you page after switching.

The URL must be absolute and start with https:// or http://. A relative path like /thanks is refused with 400 "redirect must be an absolute http(s) URL.", because the endpoint lives on a different domain and cannot know which site /thanks belongs to.

Set it in the dashboard instead#

In the dashboard, each form has a "Redirect after submit" setting. When it is set, it wins over any redirect or _next field in the HTML. That is useful when:

  • you want to change the thank-you page without redeploying the site,
  • one key is used on several pages and they should all land in the same place,
  • you would rather not depend on what is in the markup.

If you want a different thank-you page per form, leave the dashboard setting empty and use the hidden field, or create a separate form (with its own key) for each.

What happens on each kind of request#

RequestSuccessError
Plain HTML form post303 redirect to your URL (or the default thank-you page)303 redirect to the SilentForms error page with the reason
fetch with a JSON body or Accept: application/jsonJSON response; redirect is ignoredJSON response with the error message

Two consequences worth knowing:

  • Errors never go to your redirect URL. A missing key or an invalid email sends the visitor to the SilentForms error page, which shows the reason. To handle errors on your own page, submit with JavaScript. See AJAX form with JavaScript.
  • JavaScript submissions are not redirected. If you use fetch and want to move to a thank-you page, do it yourself after a successful response:
const response = await fetch('https://silentforms.com/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
  body: JSON.stringify(data),
});
if (response.ok) window.location.href = '/thanks';

Here a relative path is fine, because your own code is doing the navigation.

Submissions caught by the honeypot are redirected like any other success, so a bot cannot tell it was filtered.

Build the thank-you page#

The thank-you page is an ordinary static page on your site. A few things make it work better:

  • Say clearly that the message was sent and when to expect an answer.
  • Link back to the page the visitor was on, or to your home page.
  • Keep it out of search results with <meta name="robots" content="noindex">, since nobody should land on it from a search.
  • If you track conversions, this page is a clean place to fire the event: it is only reached after a successful submission.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>Thanks for your message</title>
</head>
<body>
  <main>
    <h1>Thanks, your message is on its way</h1>
    <p>We usually reply within one working day.</p>
    <p><a href="/">Back to the home page</a></p>
  </main>
</body>
</html>

Passing data to the thank-you page#

The redirect URL is used exactly as you write it. SilentForms does not append the submitted fields or any other query parameters, so you cannot read the visitor's name from the URL on the thank-you page.

What you can do:

  • Add a fixed query string yourself. Since the URL is used as-is, https://example.com/thanks?form=quote arrives with ?form=quote, which lets one thank-you page tell forms apart.
  • Remember values in the browser. Save what you need in sessionStorage while the form is being submitted, and read it on the thank-you page:
<!-- On the form page -->
<script>
  document.querySelector('form').addEventListener('submit', function (event) {
    sessionStorage.setItem('contactName', event.target.elements.name.value);
  });
</script>

<!-- On the thank-you page -->
<p>Thanks<span id="who"></span>, we will be in touch.</p>
<script>
  var name = sessionStorage.getItem('contactName');
  if (name) document.getElementById('who').textContent = ', ' + name;
</script>

sessionStorage is per site, so this works as long as the form page and the thank-you page are on the same domain. Use textContent, not innerHTML, so a name containing markup is shown as text.

Next steps#