Integrate

React, Vue, Svelte and more

Idiomatic submit code for the frameworks people ask about most.

Every example posts JSON to the submit endpoint and keeps the honeypot empty. Replace FORM_ID with yours.

import { useState } from 'react'

export function ContactForm() {
  const [state, setState] = useState('idle')

  async function onSubmit(e) {
    e.preventDefault()
    setState('sending')
    const body = Object.fromEntries(new FormData(e.currentTarget))
    const res = await fetch('https://forms.pixelverse.tech/api/forms/FORM_ID/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...body, sweetidentity: '' }),
    })
    setState(res.ok ? 'sent' : 'error')
  }

  if (state === 'sent') return <p>Thanks, we will be in touch.</p>
  return (
    <form onSubmit={onSubmit}>
      <input name="name" placeholder="Your name" />
      <input name="email" type="email" required />
      <textarea name="message" />
      <button disabled={state === 'sending'}>Send</button>
    </form>
  )
}

Server-side posts

When you post from your own server the request IP is your server's, so the per-IP rate limit applies to it. Forward the original visitor's address in the payload if you want it in the inbox, and keep the per-email limit in mind for shared addresses. See Rate limits and spam.

Something missing or wrong? Email us and we will fix it.