React (Vite / CRA / React Hook Form)

Get Endpoint Free

Interactive Live Sandbox

Test submitting this live demo form in real-time.

Ready

3-Step Integration Checklist

1Create a form in your Formtruck Dashboard to get your endpoint URL.

2Paste the component code into your codebase.

3Receive instant submission alerts in your inbox and dashboard!

Implementation Code

Copy-paste ready

react-integration.tsx

1234567891011121314151617181920212223242526
import { useForm } from 'react-hook-form';
 
export function ContactForm() {
  const { register, handleSubmit, reset, formState: { isSubmitting, isSubmitSuccessful } } = useForm();
 
  const onSubmit = async (data) => {
    await fetch('https://api.formtruck.com/f/ft_YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify(data),
    });
    reset();
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} placeholder="Full Name" />
      <input {...register('email', { required: true })} type="email" placeholder="Work Email" />
      <textarea {...register('message', { required: true })} placeholder="How can we help?" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit Form'}
      </button>
      {isSubmitSuccessful && <p className="success">Message received!</p>}
    </form>
  );
}

Formtruck Special Form Field Attributes

name="_gotcha"Honeypot

Keep this field hidden via CSS. If a spam bot fills it out, Formtruck silently traps the submission into your spam folder.

name="_next"Redirect

Specify a custom thank-you page URL (e.g. https://yoursite.com/thank-you) for native HTML POST submissions.

name="_subject"Email Subject

Customize the email notification subject line (e.g. New VIP Client Inquiry).