Multi-step Form (Typeform-style)

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New feedback submission">

  <label for="rating">How would you rate your experience? *</label>
  <select id="rating" name="rating" required>
    <option value="">Choose…</option>
    <option>★★★★★</option>
    <option>★★★★☆</option>
    <option>★★★☆☆</option>
    <option>★★☆☆☆</option>
    <option>★☆☆☆☆</option>
  </select>
  <label for="feedback">What can we do better? *</label>
  <textarea id="feedback" name="feedback" placeholder="Be honest — we won't take it personally." required></textarea>
  <label for="email">Email (optional, for follow-up)</label>
  <input id="email" type="email" name="email" placeholder="you@example.com">

  <!-- honeypot — bots fill every field -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

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

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>

<form id="lf-form">
  <label for="rating">How would you rate your experience? *</label>
  <select id="rating" name="rating" required>
    <option value="">Choose…</option>
    <option>★★★★★</option>
    <option>★★★★☆</option>
    <option>★★★☆☆</option>
    <option>★★☆☆☆</option>
    <option>★☆☆☆☆</option>
  </select>
  <label for="feedback">What can we do better? *</label>
  <textarea id="feedback" name="feedback" placeholder="Be honest — we won't take it personally." required></textarea>
  <label for="email">Email (optional, for follow-up)</label>
  <input id="email" type="email" name="email" placeholder="you@example.com">
  <button type="submit">Send</button>
</form>

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>

<script>
  document.getElementById('lf-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New feedback submission');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    if (json.success) {
      e.target.reset();
      alert('Sent!');
    } else {
      alert('Error: ' + (json.message || 'Try again'));
    }
  });
</script>

'use client';

import { useState, type FormEvent } from 'react';

export default function FeedbackForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');

    const data = new FormData(e.currentTarget);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New feedback submission');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    setStatus(json.success ? 'sent' : 'error');
    if (json.success) e.currentTarget.reset();
  }

  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;

  return (
    <>
    <form onSubmit={onSubmit}>
      <label htmlFor="rating">How would you rate your experience? *</label>
      <select id="rating" name="rating" required>
        <option value="">Choose…</option>
        <option>★★★★★</option>
        <option>★★★★☆</option>
        <option>★★★☆☆</option>
        <option>★★☆☆☆</option>
        <option>★☆☆☆☆</option>
      </select>
      <label htmlFor="feedback">What can we do better? *</label>
      <textarea id="feedback" name="feedback" placeholder="Be honest — we won't take it personally." required />
      <label htmlFor="email">Email (optional, for follow-up)</label>
      <input id="email" type="email" name="email" placeholder="you@example.com" />

      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>

      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>

      <p style={{ marginTop: 12, fontSize: 11, color: '#888', textAlign: 'right' }}>
        Powered by <a href="https://splitforms.com" target="_blank" rel="noopener" style={{ color: '#888', textDecoration: 'none' }}>splitforms</a>
      </p>
    </>
  );
}

<?php
// Drop into a PHP page. Receives a form POST and proxies it to splitforms.com.
// Useful when you want to add server-side validation or rate limiting.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $allowed = ['rating', 'feedback', 'email'];
    $payload = ['access_key' => 'YOUR_ACCESS_KEY'];
    $payload['subject'] = 'New feedback submission';

    foreach ($allowed as $f) {
        if (isset($_POST[$f])) $payload[$f] = $_POST[$f];
    }

    $ch = curl_init('https://splitforms.com/api/submit');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($payload));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Accept: application/json']);
    $response = curl_exec($ch);
    $status   = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    header('Content-Type: application/json');
    http_response_code($status);
    echo $response;
    exit;
}
?>

curl -X POST https://splitforms.com/api/submit \
  -H "Accept: application/json" \
  -d "access_key=YOUR_ACCESS_KEY" \
  -d "subject=New feedback submission" \
  -d "rating=★★★★★" \
  -d "feedback=Hello from cURL" \
  -d "email=jane@example.com"