Documentation

Getting Started

FormDrop makes it easy to add form handling to your static site. Follow these steps to get started:

1. Create an account at formdrop.io/signup
2. Create a new form in your dashboard
3. Copy the endpoint URL
4. Add it to your HTML form

HTML Integration

The simplest way to use FormDrop is with a standard HTML form:

<form action="https://formdrop.io/f/YOUR_ENDPOINT" 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"></textarea>

  <!-- Honeypot field for spam protection -->
  <input type="text" name="_gotcha" style="display:none">

  <button type="submit">Send</button>
</form>

Custom Redirect

By default, FormDrop redirects users to a thank you page. You can customize this with a hidden field:

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

AJAX Submissions

You can also submit forms via JavaScript for a seamless experience:

// Using fetch
const response = await fetch('https://formdrop.io/f/YOUR_ENDPOINT', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com',
    message: 'Hello!'
  })
});

const data = await response.json();
console.log(data); // { success: true, message: '...' }

Spam Protection

Honeypot Fields

A honeypot is a hidden field that humans won't see or fill in, but bots will. FormDrop automatically filters submissions that fill in the honeypot field.

<!-- Add this to your form (hidden with CSS) -->
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

You can customize the honeypot field name in your form settings.

Rate Limiting

FormDrop automatically rate limits submissions per IP address to prevent abuse. The default is 100 submissions per hour per IP. You can adjust this in your form settings.

Email Notifications

FormDrop sends you an email notification for every non-spam submission. The email includes:

• All form field data
• Submission timestamp
• Link to view in dashboard

React Example

import { useState } from 'react';

function ContactForm() {
  const [status, setStatus] = useState('idle');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('submitting');

    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    try {
      const response = await fetch('https://formdrop.io/f/YOUR_ENDPOINT', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(data)
      });

      if (response.ok) {
        setStatus('success');
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  }

  if (status === 'success') {
    return <p>Thanks for your message!</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Sending...' : 'Send'}
      </button>
      {status === 'error' && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Response Format

When you send an Accept: application/json header, FormDrop returns JSON responses:

// Success response
{
  "success": true,
  "message": "Form submitted successfully",
  "submissionId": "abc123..."
}

// Error response
{
  "success": false,
  "error": "Rate limit exceeded. Please try again later."
}

Plan Limits