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.xyz/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="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <button type="submit">Send Message</button>
</form>

Make sure to replace YOUR_ACCESS_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.xyz/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="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <input type="hidden" name="recaptchaSecretKey" value="YOUR_RECAPTCHA_SECRET_KEY">
  <button type="submit">Send Message</button>
</form>

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.xyz/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="@email"> <!-- 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:

Customizing Email Templates: Create branded email notifications
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

For more information, visit our documentation or check out the API reference.

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.xyz/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="accessKey" value="YOUR_ACCESS_KEY_HERE">
    <input type="hidden" name="replyTo" value="@email">
    <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.