Redirections

Control where users are directed after successfully submitting your form.

---

Default Behavior

By default, all successful form submissions redirect to Forminit’s thank-you page:

https://forminit.com/thank-you

This page displays a simple confirmation message to let users know their submission was received.

---

Redirect Options

Forminit offers two redirect options:

Option	Description
Forminit Thank-You Page	Use Forminit’s hosted thank-you page with customizable content and analytics
Custom URL	Redirect to your own thank-you page or any destination

Configure in Dashboard

1. Go to your form in the Forminit dashboard
2. Navigate to Form Settings → Redirections
3. Choose your redirect option:
   • Select Forminit Thank-You Page to use the default page
   • Select Custom URL and enter your destination URL
4. Save changes

---

Forminit Thank-You Page

When using the default Forminit thank-you page, you can customize its appearance and add tracking codes.

Customize Content

Personalize the thank-you page to match your brand:

1. Go to Form Settings → Redirections
2. Select Forminit Thank-You Page
3. Customize the following:
   • Heading — The main title displayed after submission
   • Message — The confirmation message shown to users
   • Button Text — Text for the call-to-action button (optional)
   • Button URL — Where the button links to (optional)

Add Analytics Tracking

Track form conversions by adding your analytics codes to the thank-you page:

1. Go to Form Settings → Redirections
2. Scroll to the Analytics section
3. Add your tracking codes:
   • Google Tag Manager ID — Your GTM container ID (e.g., GTM-XXXXXX)
   • Google Analytics ID — Your GA4 measurement ID (e.g., G-XXXXXXXXXX)

The tracking codes are automatically loaded when users land on the thank-you page, allowing you to:

• Track form submission conversions
• Create remarketing audiences
• Measure form performance in Google Analytics
• Trigger custom events in Tag Manager

Tip: Use Google Tag Manager to fire conversion events for Google Ads, Facebook Pixel, LinkedIn Insight Tag, and other marketing platforms.

---

Custom Redirect URL

For complete control over the post-submission experience, redirect users to your own page.

Configure Custom URL

1. Go to Form Settings → Redirections
2. Select Custom URL
3. Enter your full redirect URL (e.g., https://yoursite.com/thank-you)
4. Save changes

All submissions to this form will now redirect to your specified URL.

---

SDK Redirect Handling

When using the Forminit SDK, successful submissions return a redirectUrl in the response. This URL reflects your configured redirect setting (Forminit thank-you page or custom URL).

Response Structure

const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

// redirectUrl contains:
// - Your custom URL from Form Settings → Redirections
// - Or the Forminit thank-you page URL

Programmatic Redirect

Handle the redirect in your code using window.location:

const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

if (error) {
  // Handle error
  return;
}

// Redirect to the configured URL
window.location.href = redirectUrl;

---

Framework Examples

HTML / JavaScript

<script src="https://forminit.com/sdk/v1/forminit.js"></script>

<script>
  const forminit = new Forminit();
  const FORM_ID = 'YOUR_FORM_ID';
  
  document.getElementById('my-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);
    
    if (error) {
      alert(error.message);
      return;
    }
    
    // Option 1: Redirect to thank-you page
    window.location.href = redirectUrl;
    
    // Option 2: Show success message instead (no redirect)
    // document.getElementById('result').textContent = 'Thank you!';
  });
</script>

Next.js

'use client';

import { Forminit } from 'forminit';

export function ContactForm() {
  const forminit = new Forminit({ proxyUrl: '/api/forminit' });

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const formData = new FormData(e.currentTarget);
    const { data, redirectUrl, error } = await forminit.submit('YOUR_FORM_ID', formData);

    if (error) {
      console.error(error.message);
      return;
    }

    // Redirect to configured thank-you page
    window.location.href = redirectUrl;
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
    </form>
  );
}

Nuxt.js

<script setup lang="ts">
import { Forminit } from 'forminit';

const forminit = new Forminit({ proxyUrl: '/api/forminit' });

async function handleSubmit() {
  const formData = new FormData(formRef.value);
  const { data, redirectUrl, error } = await forminit.submit('YOUR_FORM_ID', formData);

  if (error) {
    console.error(error.message);
    return;
  }

  // Redirect to configured thank-you page
  window.location.href = redirectUrl;
}
</script>

---

Redirect vs. In-Page Confirmation

You can choose between redirecting users or showing an in-page success message:

Approach	Best For
Redirect	Dedicated thank-you pages, tracking conversions, preventing duplicate submissions
In-page message	Single-page apps, inline forms, better UX for multi-step flows

Redirect Approach

const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

if (!error) {
  window.location.href = redirectUrl;
}

In-Page Confirmation Approach

const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

if (!error) {
  document.getElementById('form-container').innerHTML = '<p>Thank you for your submission!</p>';
  // Or update React/Vue state to show success component
}

---

Passing Data to Thank-You Page

When using a custom redirect URL, you can append submission data using query parameters:

const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

if (!error) {
  // Append submission ID to redirect URL
  const url = new URL(redirectUrl);
  url.searchParams.set('submission', data.hashId);
  
  window.location.href = url.toString();
}

On your thank-you page, retrieve the data:

const params = new URLSearchParams(window.location.search);
const submissionId = params.get('submission');

if (submissionId) {
  console.log('Submission ID:', submissionId);
}

---

Native HTML Form Submissions

For native HTML form submissions (without JavaScript), Forminit automatically handles the redirect:

<form action="https://forminit.com/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="fi-sender-fullName" required />
  <input type="email" name="fi-sender-email" required />
  <textarea name="fi-text-message" required></textarea>
  <button type="submit">Send</button>
</form>

After submission, users are automatically redirected to your configured URL or the Forminit thank-you page.

Note: Native form submissions use HTTP redirects (302). The SDK approach gives you more control over the redirect timing and allows you to show loading states or perform additional actions before redirecting.

---

Best Practices

1. Use HTTPS URLs — Always use secure URLs for your redirect destinations
2. Test your redirect URL — Ensure the destination page exists and loads correctly
3. Consider mobile users — Make sure your thank-you page is mobile-friendly
4. Track conversions — Add GTM or GA to the Forminit thank-you page, or use your own tracking on custom pages
5. Prevent back-button resubmission — Redirecting helps prevent users from accidentally resubmitting by pressing back
6. Customize your message — Personalize the thank-you page content to match your brand voice

---

Related Documentation

• Form Blocks Reference — Complete reference for all block types
• HTML Integration — Static site setup guide
• Next.js Integration — Next.js setup guide
• Nuxt.js Integration — Nuxt.js setup guide