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: ```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: ```html ``` **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](/blog/recaptcha-v3-for-pro-users) for details. ## Step 3: Customize the Form Behavior Static Forms allows you to customize the behavior of your form with additional hidden fields: ```html ``` ## 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: ```html Contact Us

Contact Us

``` 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](/contact).

Posts tagged “getting started”

Filter by Tag

Getting Started with Static Forms