Form backend for static sites

<form action="https://formpost.org/f/3QQPFnq8qVtVnfW" method="POST">
  <label>Your Email</label>
  <input type="email" name="email" required />

  <label>Message</label>
  <textarea name="message" required></textarea>

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

A plain form submit. The browser posts the fields and gets a confirmation page with a link back to your site.

const form = document.querySelector('#contact')

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

  const response = await fetch('https://formpost.org/f/3QQPFnq8qVtVnfW', {
    method: 'POST',
    body: new FormData(form),
    headers: { 'Accept': 'application/json' },
  })

  const result = await response.json()

  if (response.ok) {
    form.reset()
    showMessage(result.message)
  } else {
    // Errors come back as JSON too, e.g. submission_limit_reached
    showError(result.text)
  }
})

Submit without leaving the page. Success and failure both come back as JSON, so you render your own states.

export default function ContactForm() {
  const [status, setStatus] = useState(null)

  async function handleSubmit(event) {
    event.preventDefault()

    const response = await fetch('https://formpost.org/f/3QQPFnq8qVtVnfW', {
      method: 'POST',
      body: new FormData(event.target),
      headers: { 'Accept': 'application/json' },
    })

    const result = await response.json()

    setStatus(response.ok ? { sent: true } : { error: result.text })
  }

  if (status?.sent) return <p>Thanks!</p>

  return (
    <form onSubmit={handleSubmit}>
      {status?.error && <p>{status.error}</p>}
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button>Send</button>
    </form>
  )
}

The same call from a React component. Works unchanged in Next.js.

<script setup>
import { ref } from 'vue'

const sent = ref(false)
const error = ref(null)

async function submit(event) {
  const response = await fetch('https://formpost.org/f/3QQPFnq8qVtVnfW', {
    method: 'POST',
    body: new FormData(event.target),
    headers: { 'Accept': 'application/json' },
  })

  const result = await response.json()

  if (response.ok) sent.value = true
  else error.value = result.text
}
</script>

<template>
  <p v-if="sent">Thanks!</p>
  <form v-else @submit.prevent="submit">
    <p v-if="error">{{ error }}</p>
    <input name="email" type="email" required />
    <textarea name="message" required></textarea>
    <button>Send</button>
  </form>
</template>

The same idea in Vue. Nuxt and any other SFC setup behave identically.