Creating your first form with Normforms

July 5, 2026

Setting up a reliable contact form shouldn't require complex serverless functions, bloated third-party widgets, or hours of email server configuration. With NormForms, you can add a rock-solid, spam-filtered form to any website in under 60 seconds.

Here is the complete step-by-step guide from zero to a live, production-ready contact form that protects your customer inquiries.

Step 1: Create your free account (30 seconds)

Sign up for a free NormForms account. No credit card is required. You will be asked where customer inquiries should be delivered (your email is pre-filled) and which domain your site lives on.

Setting your domain activates your domain origin lock, ensuring that unauthorized automated scripts attempting to submit directly to your endpoint from other servers are dropped immediately.

Step 2: Copy your private endpoint URL

Every form receives a private, secure endpoint formatted like normforms.com/f/YOUR_TOKEN. This URL serves as both your form's submission endpoint and a pre-built hosted form page.

Step 3: Paste the HTML snippet into your site

Add this clean, semantic HTML snippet directly into your template or page: 

<form action="https://normforms.com/f/YOUR_TOKEN" method="POST">
  <label for="nf-name">Name</label>
  <input id="nf-name" type="text" name="name" autocomplete="name" required>

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

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

  <!-- Invisible honeypot traps spam bots silently -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send Inquiry</button>
</form>

Style the markup using your site's existing CSS or utility classes. There is zero client-side JavaScript, meaning zero impact on your site's speed or Core Web Vitals.

Keep the honeypot: The _gotcha field is hidden from real visitors. Automated bots fill in every input they find, allowing our system to identify and filter spam without forcing human customers to solve annoying CAPTCHA puzzles.

Step 4: Add any custom fields you need

Need to ask for a budget, phone number, or company name? Simply add the inputs to your HTML: 

<label for="nf-company">Company</label>
<input id="nf-company" type="text" name="company">

<label for="nf-budget">Budget</label>
<select id="nf-budget" name="budget">
  <option value="under-5k">Under $5,000</option>
  <option value="5k-15k">$5,000 – $15,000</option>
  <option value="15k+">$15,000+</option>
</select>

NormForms automatically parses and displays every custom field in your notification email and dashboard without requiring schema definitions.

Step 5: Test locally before deploying

You can test your form during development without deploying to production. Submissions sent from localhost are automatically flagged as test submissions:

You can also verify the endpoint via curl:

curl -X POST https://normforms.com/f/YOUR_TOKEN \
  -H "Origin: http://localhost:3000" \
  -d "[email protected]&message=Testing+my+first+form"

Step 6: No website yet? Use your hosted page

If your website is still under construction or you need a quick intake form for social media or print materials, open your form URL directly in any browser. Every form includes a responsive, accessible hosted page with an instant QR code available in your dashboard.

Step 7 (Optional): Wiring with AI coding assistants

If you are building your website with Cursor, Claude, v0, or Lovable, open your form in the dashboard and click the AI prompt tab. Copy the pre-formatted prompt and paste it into your assistant. It will generate the exact HTML and styling your site needs, with endpoint routing and spam protection pre-wired.

Create your first form now →