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:

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:

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:

Testing Your Form

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

1. Fill out the form with valid information
2. Complete the reCAPTCHA challenge (if enabled)
3. Submit the form
4. 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:

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.