Static Forms - Secure form backend and form endpoint for contact forms

Documentation

Quick StartBasic SetupAPI ReferenceSpam ProtectionAdvanced FeaturesFramework ExamplesTroubleshootingFAQ

Basic Setup

Everything you need to know to get started with Static Forms

Registration

To use Static Forms, you need to create a free account:

  1. Visit the registration page
  2. Enter your email address
  3. Verify your email through the link sent to your inbox
  4. Access your dashboard to get your API key

Understanding Your API Key

Your API key is a unique identifier that connects form submissions to your account. It's automatically generated when you create your account.

Important: Keep your API key secure. While it's safe to use in client-side forms, don't share it publicly or commit it to public repositories.

Basic Form Structure

Here's a complete example of a basic contact form:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  
  <form action="https://api.staticforms.xyz/submit" method="POST">
    <!-- Required: Your API Key -->
    <input type="hidden" name="apiKey" value="YOUR_API_KEY" />
    
    <!-- Form Fields -->
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required />
    </div>
    
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
    </div>
    
    <div>
      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone" />
    </div>
    
    <div>
      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    
    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Field Names

All form fields with a name attribute will be included in the email you receive. Use descriptive names for better organization:

Field NameDescription
nameContact's name
emailContact's email address
messageMessage content
phoneContact's phone number (optional)

Handling Form Submission

After a successful submission, you have two options:

1. Redirect (Recommended)

Add a redirectTo field to send users to a thank you page:

<input type="hidden" name="redirectTo" value="https://yoursite.com/thank-you" />

2. JSON Response

For AJAX submissions, the API returns a JSON response. See Advanced Features for details.