How to Redirect After Form Submission (3 Methods)

Why redirect after form submission?

After a visitor hits submit on your contact form, two things should happen: the data reaches your inbox, and the visitor gets confirmation. The redirect is the second half — it sends them to a thank-you page, a booking calendar, a download link, or any other next step you want them to take.

Without a redirect, the visitor stares at the same form after submitting. They don't know if it worked. They might submit it again. A clean redirect to a thank-you page solves all three problems: confirmation, next steps, and no accidental duplicate submissions.

If your form itself isn't working, see contact form not working first.

Method 1: Hidden redirect field (no JavaScript)

The simplest approach. Add a hidden input named redirect to your form. Hosted form backends like splitforms read this field and send a 302 redirect to the specified URL after processing the submission:

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="redirect"
         value="https://yoursite.com/thank-you">

  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>

  <button type="submit">Send Message</button>
</form>

When the form is submitted:

1. The browser sends a POST request to splitforms.com/api/submit.
2. Splitforms stores the submission and sends you an email notification.
3. Splitforms responds with a 302 Found redirect to https://yoursite.com/thank-you.
4. The browser follows the redirect automatically — the visitor lands on your thank-you page.

No JavaScript required. Works on every browser, every device, even with JavaScript disabled. This is the most resilient approach.

Method 2: Server-side redirect (your own backend)

If you run your own server (Express, Next.js API route, PHP, Rails, Django), you handle the redirect in your response. The key: use HTTP 302 or 303, never 301.

Express.js example

app.post('/api/contact', (req, res) => {
  // 1. Process the form data
  const { name, email, message } = req.body;

  // 2. Save to database, send email, etc.
  await saveSubmission({ name, email, message });

  // 3. Redirect (302 = temporary, not cached)
  res.redirect(302, '/thank-you');
});

Next.js App Router example

// app/api/contact/route.ts
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const data = await request.formData();

  // Process the submission...
  await saveSubmission(data);

  // 303 See Other — correct status for redirect-after-POST
  return NextResponse.redirect(new URL('/thank-you', request.url), 303);
}

The 303 See Other status is technically the most correct for redirect-after-POST — it tells the browser "the response to this POST is available at a different URL via GET." Browsers treat 302 and 303 identically in practice, but 303 is the spec-compliant choice.

Method 3: JavaScript redirect after fetch()

For single-page apps and AJAX form submissions, redirect with JavaScript after the fetch call resolves successfully. This gives you the most control — you can show a loading spinner, handle validation errors inline, and then redirect:

<form id="contact-form">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

<script>
const form = document.getElementById('contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const button = form.querySelector('button');
  button.textContent = 'Sending...';
  button.disabled = true;

  try {
    const response = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: new FormData(form),
    });

    const result = await response.json();

    if (result.success) {
      // Redirect to thank-you page
      window.location.href = '/thank-you';
    } else {
      alert('Error: ' + result.message);
      button.textContent = 'Send';
      button.disabled = false;
    }
  } catch (err) {
    alert('Network error. Please try again.');
    button.textContent = 'Send';
    button.disabled = false;
  }
});
</script>

Use window.location.href if you want the form page in browser history (so the back button works). Use window.location.replace() if you don't want the form page in history — useful for multi-step forms where going back would resubmit.

Why you should never use 301 redirects for forms

A 301 redirect is permanent. The browser caches it. If you return a 301 redirect after a form submission, here's what happens:

1. Visitor submits the form. Server responds with 301 → /thank-you.
2. Browser caches the 301 mapping: /api/contact → /thank-you.
3. Next time anyone on that browser tries to submit the form, the browser skips the POST entirely and goes straight to /thank-you.
4. The submission is lost. The visitor sees the thank-you page but you never received their data.

Always use 302 (Found) or 303 (See Other) for form submission redirects. Both are non-cached and temporary.

What to put on your thank-you page

A good thank-you page does three things:

• Confirms receipt — "Thanks for reaching out. We'll reply within 24 hours."
• Sets expectations — tell them what happens next (phone call, email reply, onboarding email).
• Offers a next step — link to your calendar, a relevant blog post, a product page, or social profiles. Don't let the conversation die on the thank-you page.

Track the thank-you page as a conversion goal in Google Analytics. It's more reliable than tracking the form submit event itself, because it only fires after the backend confirms the submission.

Ready to add a redirect to your form? Get a free splitforms access key — 500 submissions/month free, no credit card required. Questions? Email hello@splitforms.com. Plans: Free 500/mo, Starter $1/mo, Pro $5/mo.

FAQ

More reads: form action attribute guide, contact form not working, all posts.