Documentation

Quick Start Basic Setup API Reference Spam Protection Advanced Features Framework Examples Troubleshooting FAQ

Advanced Features

Unlock the full potential of Static Forms

Auto-Responders

PRO

Automatically send confirmation emails to users who submit your form.

Setup

Navigate to Auto-Responders settings
Enable auto-responder for your form
Customize the email subject and message
Save your configuration

Email Field Requirement

Your form must include an email field for auto-responders to work:

<input type="email" name="email" required />

💡 Tip: Personalize your auto-responder by using variables like {{name}} in your message template.

Webhooks

PRO

Send form submission data to your own endpoints in real-time for custom processing, integrations, or analytics.

Setup

Go to Webhook settings
Add your webhook URL
Configure authentication (optional)
Test your webhook

Webhook Payload

Your endpoint will receive a POST request with JSON data:

{
  "apiKey": "your-api-key",
  "timestamp": "2024-10-27T12:34:56Z",
  "formData": {
    "name": "John Doe",
    "email": "john@example.com",
    "message": "Hello, I'm interested in your services."
  }
}

Security

Verify webhook authenticity using the signature header:

// Example: Verifying webhook signature in Node.js
const crypto = require('crypto');

function verifyWebhook(payload, signature, secret) {
  const hash = crypto
    .createHmac('sha256', secret)
    .update(JSON.stringify(payload))
    .digest('hex');
  
  return hash === signature;
}

// In your webhook endpoint
app.post('/webhook', (req, res) => {
  const signature = req.headers['x-staticforms-signature'];
  const secret = process.env.WEBHOOK_SECRET;
  
  if (!verifyWebhook(req.body, signature, secret)) {
    return res.status(401).send('Invalid signature');
  }
  
  // Process webhook data
  console.log('Form submitted:', req.body);
  res.status(200).send('OK');
});

File Uploads

PRO

Allow users to upload files (documents, images, etc.) with their form submissions.

Implementation

<form 
  action="https://api.staticforms.xyz/submit" 
  method="POST"
  enctype="multipart/form-data"
>
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />
  
  <label for="name">Name:</label>
  <input type="text" name="name" required />
  
  <label for="email">Email:</label>
  <input type="email" name="email" required />
  
  <label for="document">Upload Document:</label>
  <input type="file" name="document" accept=".pdf,.doc,.docx" />
  
  <button type="submit">Send</button>
</form>

File Restrictions

Maximum file size: 5MB per file
Supported formats: PDF, DOC, DOCX, JPG, PNG, GIF, WEBP, TXT, RTF
Files must be attached via multipart/form-data
Pro tier required for file uploads

⚠️ Note: File uploads require the form to use enctype="multipart/form-data" and are limited to 5MB per file.

Read the complete file upload guide →

Custom Redirect with Data

Pass submission data to your thank you page via URL parameters.

<form action="https://api.staticforms.xyz/submit" method="POST">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />
  <input 
    type="hidden" 
    name="redirectTo" 
    value="https://yoursite.com/thanks?submitted=true" 
  />
  
  {/* Your form fields */}
</form>

After submission, users will be redirected to your URL with their submission data available in query parameters.

Email Preferences

Customize how you receive form submissions:

Email Formatting

Choose between plain text or HTML formatted emails in your email preferences.

CC and BCC

Add additional email addresses to receive copies of submissions.

Reply-To Configuration

Control the reply-to address for notification emails using the replyTo field or email field:

<!-- Option 1: Using replyTo field -->
<input type="hidden" name="replyTo" value="custom@example.com" />

<!-- Option 2: Email field automatically used as reply-to -->
<input type="email" name="email" value="user@example.com" />

Honeypot Spam Protection

Add an invisible field to catch spam bots without requiring CAPTCHA. Any field containing "honeypot" in its name will work:

<form action="https://api.staticforms.xyz/submit" method="POST">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />
  
  {/* Honeypot field - hide with CSS */}
  {/* Any field name containing "honeypot" works */}
  <input 
    type="text" 
    name="honeypot" 
    style="display:none" 
    tabindex="-1" 
    autocomplete="off" 
  />
  
  {/* Your visible form fields */}
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  
  <button type="submit">Send</button>
</form>

Bots will fill out the honeypot field, and their submissions will be automatically rejected. The honeypot field is automatically removed from your notification email.

💡 Tip: You can name the field honeypot, _honeypot, or honeypot-field - any field containing "honeypot" in the name works!

AJAX Submissions

Submit forms without page reload using JavaScript:

async function handleSubmit(event) {
  event.preventDefault();
  
  const form = event.target;
  const formData = new FormData(form);
  
  try {
    const response = await fetch('https://api.staticforms.xyz/submit', {
      method: 'POST',
      body: formData
    });
    
    const result = await response.json();
    
    if (result.success) {
      alert('Message sent successfully!');
      form.reset();
    } else {
      alert('Failed to send message: ' + result.message);
    }
  } catch (error) {
    alert('An error occurred. Please try again.');
  }
}

// Add to your form
<form onsubmit="handleSubmit(event)">
  {/* form fields */}
</form>

Need More Power?

Upgrade to Pro to unlock advanced features like auto-responders, webhooks, and file uploads.

View Pricing Plans