Guide

Next.js contact form without backend code

Add a production-ready contact form to your Next.js site using a standard HTML form and a FormHook endpoint.

Step 1

Create a form endpoint

Sign in to FormHook, create a new form endpoint, and copy the generated submission URL. Your endpoint is private to your account and ready to receive submissions immediately.

Step 2

Paste the HTML

Use the snippet below in any Next.js page. Replace YOUR_FORM_ID and YOUR_TURNSTILE_SITE_KEY with your FormHook values.

contact-form.html

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<form
  action="https://formhook.site/f/YOUR_FORM_ID"
  method="POST"
  enctype="multipart/form-data"
>
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />

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

  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Send message</button>
</form>

Step 3

Deploy and test

Deploy your Next.js site as usual. Submit a test message, then open the FormHook dashboard to confirm the submission, email notification, and spam status.