Getting Started with Static Forms

Static Forms provides a simple and reliable way to handle form submissions on your website, static or not, without any server-side code. In this guide, we'll walk you through setting up your first form with Static Forms.

Using a framework? The Static Forms examples repo has a ready-to-deploy contact form for 13 frameworks, including Next.js, Nuxt, React, Vue, SvelteKit, Astro, Angular, React Router, SolidStart, Qwik, Gatsby, Eleventy and plain HTML. Each one has a one-click Deploy to Vercel button.

Prerequisites

Before you begin, you'll need:

A static website (HTML, Gatsby, Next.js, etc.)
A Static Forms account (sign up for free)
Your API key from the dashboard

Step 1: Create a Basic HTML Form

First, let's create a basic HTML form that we'll integrate with Static Forms. Add the following to your HTML:

HTML

<form action="https://api.staticforms.dev/submit" method="POST">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <input type="hidden" name="apiKey" value="YOUR_API_KEY_HERE">
  <button type="submit">Send Message</button>
</form>

Make sure to replace YOUR_API_KEY_HERE with your actual API key from the Static Forms dashboard.

Step 2: Add reCAPTCHA Protection

To protect your form from spam, we recommend adding reCAPTCHA validation:

HTML

<head>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<form action="https://api.staticforms.dev/submit" method="POST">
  <!-- Form fields from Step 1 -->
  
  <!-- Add reCAPTCHA -->
  <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>
  
  <input type="hidden" name="apiKey" value="YOUR_API_KEY_HERE">
  <button type="submit">Send Message</button>
</form>

reCAPTCHA v2 vs v3:

v2 (shown above): Requires user to check "I'm not a robot" box. Available for all users.
v3: Invisible verification, no user interaction. Available from the Starter plan up ($6/month, or $4/month billed annually). See our reCAPTCHA v3 guide for details.

Step 3: Customize the Form Behavior

Static Forms allows you to customize the behavior of your form with additional hidden fields:

HTML

<form action="https://api.staticforms.dev/submit" method="POST">
  <!-- Form fields from previous steps -->
  
  <!-- Customize form behavior -->
  <input type="hidden" name="subject" value="New Contact Form Submission">
  <input type="hidden" name="replyTo" value="@"> <!-- Use the email from the form -->
  <input type="hidden" name="redirectTo" value="https://yourwebsite.com/thank-you">
  
  <button type="submit">Send Message</button>
</form>

Testing Your Form

Once you've integrated your form, you should test it to make sure everything works as expected:

Fill out the form with valid information
Complete the reCAPTCHA challenge (if enabled)
Submit the form
Check your email for the form submission

Troubleshooting

If you're not receiving form submissions, check the following:

Verify your API key is correct
Make sure your reCAPTCHA keys are valid (if using reCAPTCHA)
Check that all required form fields are present
Look for any JavaScript errors in your browser console

Next Steps

Now that you have your basic form working, you might want to explore more advanced features of Static Forms:

File Attachments: Allow users to upload files with their submissions (Starter plan and up)
Custom Redirects: Send users to different pages based on form data
Advanced Spam Protection: Additional layers of protection for your forms

Code Example: Complete Contact Form

Here's a complete example of a contact form with all the features mentioned above:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <style>
    form {
      max-width: 500px;
      margin: 0 auto;
    }
    input, textarea, button {
      display: block;
      width: 100%;
      margin-bottom: 15px;
      padding: 10px;
    }
    button {
      background: #fe5b5b;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Contact Us</h1>
  
  <form action="https://api.staticforms.dev/submit" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <input type="text" name="subject" placeholder="Subject" required>
    <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
    
    <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>
    
    <!-- Hidden fields -->
    <input type="hidden" name="apiKey" value="YOUR_API_KEY_HERE">
    <input type="hidden" name="replyTo" value="@">
    <input type="hidden" name="redirectTo" value="https://yourwebsite.com/thank-you">
    
    <button type="submit">Send Message</button>
  </form>
</body>
</html>

We hope this guide has been helpful in getting you started with Static Forms! If you have any questions or need assistance, don't hesitate to contact our support team.