Documentation

Minimal contact form

<form action="https://app.paceforms.com/api/f/NR-6Ww88ET" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="Email address" required />
  <textarea name="message" placeholder="Your message"></textarea>
  <button type="submit">Send</button>
</form>

Every name attribute becomes a field in your submissions inbox. No configuration required.

With honeypot spam protection

<form action="https://app.paceforms.com/api/f/NR-6Ww88ET" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message"></textarea>

  <!-- Honeypot: hidden from real users, filled by bots -->
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off" />

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

With custom redirect

<form action="https://app.paceforms.com/api/f/NR-6Ww88ET" method="POST">
  <input type="hidden" name="_redirect" value="https://yoursite.com/thank-you" />
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
</form>

Fetch API (JSON body)

const response = await fetch(
  'https://app.paceforms.com/api/f/NR-6Ww88ET',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: 'Alice',
      email: 'alice@example.com',
      message: 'Hello from fetch!',
    }),
  }
);

const data = await response.json();

if (response.ok) {
  console.log('Submitted:', data);  // { id: 'sub_abc123', status: 'ok' }
} else {
  console.error('Error:', data.error);
}

Fetch API (FormData — includes file uploads)

const form = document.getElementById('my-form');

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

  const formData = new FormData(form);

  const response = await fetch(
    'https://app.paceforms.com/api/f/NR-6Ww88ET',
    { method: 'POST', body: formData }
  );

  const data = await response.json();

  if (response.ok) {
    form.innerHTML = '<p>Thanks! We'll be in touch.</p>';
  } else {
    alert('Something went wrong. Please try again.');
  }
});

React component

import { useState } from 'react';

const ENDPOINT = 'https://app.paceforms.com/api/f/NR-6Ww88ET';

export default function ContactForm() {
  const [status, setStatus] = useState('idle');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('loading');

    const res = await fetch(ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(
        Object.fromEntries(new FormData(e.target))
      ),
    });

    setStatus(res.ok ? 'success' : 'error');
  }

  if (status === 'success') return <p>Thanks! We'll be in touch.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" />
      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending...' : 'Send Message'}
      </button>
      {status === 'error' && <p>Something went wrong.</p>}
    </form>
  );
}

Next.js Server Action (App Router)

'use server';

export async function submitForm(formData) {
  const res = await fetch(
    'https://app.paceforms.com/api/f/NR-6Ww88ET',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: formData.get('name'),
        email: formData.get('email'),
        message: formData.get('message'),
      }),
    }
  );

  if (!res.ok) throw new Error('Submission failed');
  return await res.json();
}

Success — 200 OK

{
  "status": "ok",
  "id": "sub_NR6Ww88ET_1746612345",
  "message": "Submission received"
}

Validation error — 422 Unprocessable Entity

{
  "status": "error",
  "error": "validation_failed",
  "fields": {
    "email": "Must be a valid email address"
  }
}

Spam blocked — 400 Bad Request

{
  "status": "error",
  "error": "spam_detected"
}

Rate limit exceeded — 429 Too Many Requests

{
  "status": "error",
  "error": "rate_limit_exceeded",
  "message": "Monthly submission limit reached. Upgrade your plan."
}

Honeypot field Automatic

Add a hidden field named _honeypot. Real users never fill it; bots do. Any submission with a filled honeypot is silently rejected.

<!-- Hidden from users via CSS, filled by bots -->
<input
  type="text"
  name="_honeypot"
  style="display:none"
  tabindex="-1"
  autocomplete="off"
/>

Time-based check Automatic

PaceForms checks how quickly a form was submitted after the page loaded. Submissions under 2 seconds are flagged as likely bot activity. No configuration needed.

reCAPTCHA v3 Optional

Pass a reCAPTCHA v3 token with the field name _recaptcha. Configure your site key in your form settings.

// Get token before submission
const token = await grecaptcha.execute(SITE_KEY, { action: 'submit' });

const res = await fetch('https://app.paceforms.com/api/f/NR-6Ww88ET', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ ...fields, _recaptcha: token }),
});

Hidden _redirect field

<form action="https://app.paceforms.com/api/f/NR-6Ww88ET" method="POST">
  <input
    type="hidden"
    name="_redirect"
    value="https://yoursite.com/thank-you"
  />
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
</form>

AJAX — handle redirect yourself

When submitting via fetch, no redirect happens — you control what shows next based on the response.

const res = await fetch('https://app.paceforms.com/api/f/NR-6Ww88ET', {
  method: 'POST',
  body: formData,
});

if (res.ok) {
  window.location.href = '/thank-you';  // your own redirect
}

CSV Export

From your Submissions Inbox, click Export → CSV. The file includes all fields, submission IDs, and timestamps. Use the date filter to export a specific range.

Webhooks

Configure a webhook URL in your form settings. PaceForms sends a POST request to your URL for every new submission:

{
  "event": "submission.created",
  "form_id": "NR-6Ww88ET",
  "submission_id": "sub_NR6Ww88ET_1746612345",
  "submitted_at": "2026-05-07T12:34:56Z",
  "fields": {
    "name": "Alice",
    "email": "alice@example.com",
    "message": "Hello!"
  }
}

Webhooks are available on Builder and Developer plans.