Getting Started with Static Forms
Static Forms provides a simple and reliable way to handle form submissions on static websites without any server-side code. In this guide, we'll walk you through setting up your first form with Static Forms.
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:
<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:
<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 on paid plans (Pro/Advanced). 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:
<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
- 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:
<!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.
Related Articles
Adding Contact Forms to Static Websites Guide
Learn how to easily add fully functional contact forms to your static website without backend code using a form endpoint service.
How to Add a Contact Form to Google Sites
Learn how to add a working contact form to your Google Sites website using Static Forms — no backend or coding experience required.
How to Add a Contact Form to Your Astro Website
Step-by-step tutorial for adding a working contact form to Astro sites using Static Forms — no backend required.