FormBase Documentation

The complete form backend platform for developers. Build, manage, and scale forms without writing backend code.

Getting Started

FormBase is a comprehensive form management platform that handles everything from form creation to submission management. Choose your preferred workflow: use our visual builder, start from templates, or integrate directly with your HTML/React forms.

Setup in 60 seconds

Create forms visually or integrate with code instantly

Spam Protection

Built-in spam filtering keeps your submissions clean

Email Notifications

Get instant email alerts for every submission

Platform Features

Form Management

Visual drag-and-drop form builder
16+ pre-built form templates
Custom field types and validation
Multi-page forms support
Custom styling and themes
Form versioning and history

Submissions

Real-time submission tracking
Export to CSV/Excel
Advanced filtering and search
Submission analytics
IP address logging
Spam detection and filtering

Integrations

Webhook support
Email notifications
API endpoints
React/Next.js components
HTML form integration
Custom redirect URLs

Team & Admin

Workspace management
Team collaboration
Admin dashboard
Activity logs
User management
Role-based access

Quick Start

Create an Account

Create Your First Form

You have three options to create a form:

Option 1: Visual Builder

Use our drag-and-drop builder to create forms visually. Perfect for non-developers.

Option 2: Template Library

Choose from 16+ pre-built templates (Contact, Job Application, Event Registration, etc.)

Option 3: Code Integration

Add your form endpoint to existing HTML/React forms.

Get Your Form Endpoint

Each form gets a unique endpoint. Find it in your dashboard:

https://your-domain.com/api/submit
Form Endpoint: contact-form

Visual Form Builder

Build professional forms without code using our drag-and-drop builder.

Available Field Types

Text Input

Single-line text field

Email validation built-in

Number

Numeric input only

Phone

Phone number format

URL

Website URL validation

Textarea

Multi-line text input

Select/Dropdown

Choose from options

Checkbox

Multiple selections

Date

Date picker

Field Settings

Required/Optional: Mark fields as required
Field Width: Full, half, or third width layouts
Placeholders: Add helpful placeholder text
Descriptions: Add field descriptions for clarity
Drag & Drop: Reorder fields easily

Template Library

Start with professionally designed templates and customize them to your needs.

Contact Form

8 fields

General

Simple contact form with name, email, and message

Job Application

12 fields

HR & Recruitment

Complete job application with resume upload and experience

Event Registration

12 fields

Events

Event signup with ticket selection and dietary preferences

Customer Feedback

13 fields

Customer Service

Comprehensive feedback survey with ratings

Newsletter Subscription

8 fields

Marketing

Email list signup with preference management

Lead Generation

11 fields

Marketing

B2B lead capture with company information

📚 16+ Templates Available: Contact Form, Job Application, Event Registration, Customer Feedback, Newsletter, Lead Generation, Quote Request, Membership, Survey, Support Ticket, Donation, Course Enrollment, Service Request, Volunteer Application, Appointment Booking, and more.

HTML Forms Integration

Integrate FormBase with any HTML form. Perfect for static sites and existing forms.

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
</head>
<body>
  <form action="https://your-domain.com/api/submit" method="POST">
    <!-- Required: Form endpoint identifier -->
    <input type="hidden" name="_form_endpoint" value="contact" />
    <input type="hidden" name="api_key" value="your_api_key_here" />
    
    <!-- Your form fields -->
    <label>Name</label>
    <input type="text" name="name" required />
    
    <label>Email</label>
    <input type="email" name="email" required />
    
    <label>Message</label>
    <textarea name="message" required></textarea>
    
    <button type="submit">Send Message</button>
  </form>
</body>
</html>

💡 Tip: The _form_endpoint field must match the endpoint you created in your FormBase dashboard.

React & Next.js Integration

Use FormBase with React or Next.js applications with full TypeScript support.

'use client';

import { useState } from 'react';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    
    try {
      const response = await fetch('https://your-domain.com/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _form_endpoint: 'contact',
          api_key: 'your_api_key_here',
          ...data
        }),
      });
      
      if (response.ok) {
        setStatus('success');
        e.target.reset();
      } else {
        setStatus('error');
      }
    } catch (error) {
      setStatus('error');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input
        type="email"
        name="email"
        placeholder="Your email"
        required
        className="w-full px-4 py-2 border rounded"
      />
      
      <textarea
        name="message"
        placeholder="Your message"
        required
        className="w-full px-4 py-2 border rounded"
        rows={4}
      />
      
      <button
        type="submit"
        disabled={status === 'sending'}
        className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
      >
        {status === 'sending' ? 'Sending...' : 'Send Message'}
      </button>
      
      {status === 'success' && (
        <p className="text-green-600">✅ Message sent successfully!</p>
      )}
      {status === 'error' && (
        <p className="text-red-600">❌ Failed to send. Please try again.</p>
      )}
    </form>
  );
}

Managing Submissions

View, filter, and export all form submissions from your dashboard.

Features

Real-time View: See submissions as they arrive
Export to CSV: Download all submissions for analysis
Search & Filter: Find specific submissions quickly
IP Tracking: See where submissions came from
Spam Detection: Automatically flag suspicious submissions
Bulk Actions: Delete multiple submissions at once

Spam Protection

FormBase includes multiple layers of spam protection to keep your submissions clean.

Built-in Protection

Automatic spam pattern detection
Rate limiting per IP address
Suspicious keyword filtering

Honeypot Field

Add a honeypot field to catch bots:

<form action="https://your-domain.com/api/submit" method="POST">
  <input type="hidden" name="_form_endpoint" value="contact" />
  <input type="hidden" name="api_key" value="your_api_key_here" />
  
  <!-- Honeypot field (hidden from real users) -->
  <input 
    type="text" 
    name="_honeypot" 
    style="display: none;" 
    tabindex="-1" 
    autocomplete="off"
  />
  
  <!-- Your visible form fields -->
  <input type="email" name="email" required />
  <button type="submit">Submit</button>
</form>

Webhooks

Configure webhooks to receive real-time notifications when forms are submitted.

Configure in Dashboard:

Forms → Your Form → Settings → Webhook URL

Webhook Payload:

{
  "event": "form.submitted",
  "form": {
    "id": "form_123",
    "name": "Contact Form",
    "endpoint": "contact"
  },
  "submission": {
    "id": "sub_456",
    "data": {
      "email": "user@example.com",
      "message": "Hello!"
    },
    "ip_address": "192.168.1.1",
    "created_at": "2025-11-19T00:00:00Z"
  }
}

⚡ Webhook Secret: Your webhook endpoint will receive a signature header for verification. Check the dashboard for your webhook secret.

Workspaces & Team Collaboration

Organize forms into workspaces and collaborate with team members.

Workspace Features

Team Collaboration: Invite team members to workspaces
Organize Forms: Group related forms together
Shared Access: All workspace members can manage forms
Permissions: Control who can view and edit

Analytics & Insights

Track form performance and submission trends.

Form Analytics

• Total submissions
• Submissions over time
• Conversion rates
• Average completion time
• Popular form fields

Activity Logs

• All form actions tracked
• User activity monitoring
• IP address logging
• Export audit logs
• Security monitoring

API Reference

Submit Form

POST/api/submit

Required Fields

_form_endpointrequired

Your form's endpoint identifier (found in dashboard)

string

Optional Fields

_honeypot

Honeypot field for spam protection (should be empty)

string

_redirect

URL to redirect after successful submission

string

Response (Success)

{
  "success": true,
  "message": "Form submitted successfully",
  "id": "sub_123"
}

Error Responses

400Missing _form_endpoint parameter

404Form not found

429Too many requests (rate limit exceeded)

500Internal server error

Need Help?

Have questions?

We're here to help! Access your dashboard or return to the homepage.

Go to Dashboard Back to Home

FormBase Documentation

The complete form backend platform for developers. Build, manage, and scale forms without writing backend code.

Getting Started

Setup in 60 seconds

Create forms visually or integrate with code instantly

Spam Protection

Built-in spam filtering keeps your submissions clean

Email Notifications

Get instant email alerts for every submission

Platform Features

Form Management

Visual drag-and-drop form builder
16+ pre-built form templates
Custom field types and validation
Multi-page forms support
Custom styling and themes
Form versioning and history

Submissions

Real-time submission tracking
Export to CSV/Excel
Advanced filtering and search
Submission analytics
IP address logging
Spam detection and filtering

Integrations

Webhook support
Email notifications
API endpoints
React/Next.js components
HTML form integration
Custom redirect URLs

Team & Admin

Workspace management
Team collaboration
Admin dashboard
Activity logs
User management
Role-based access

Quick Start

Create an Account

Create Your First Form

You have three options to create a form:

Option 1: Visual Builder

Use our drag-and-drop builder to create forms visually. Perfect for non-developers.

Option 2: Template Library

Choose from 16+ pre-built templates (Contact, Job Application, Event Registration, etc.)

Option 3: Code Integration

Add your form endpoint to existing HTML/React forms.

Get Your Form Endpoint

Each form gets a unique endpoint. Find it in your dashboard:

https://your-domain.com/api/submit
Form Endpoint: contact-form

Visual Form Builder

Build professional forms without code using our drag-and-drop builder.

Available Field Types

Text Input

Single-line text field

Email validation built-in

Number

Numeric input only

Phone

Phone number format

URL

Website URL validation

Textarea

Multi-line text input

Select/Dropdown

Choose from options

Checkbox

Multiple selections

Date

Date picker

Field Settings

Required/Optional: Mark fields as required
Field Width: Full, half, or third width layouts
Placeholders: Add helpful placeholder text
Descriptions: Add field descriptions for clarity
Drag & Drop: Reorder fields easily

Template Library

Start with professionally designed templates and customize them to your needs.

Contact Form

8 fields

General

Simple contact form with name, email, and message

Job Application

12 fields

HR & Recruitment

Complete job application with resume upload and experience

Event Registration

12 fields

Events

Event signup with ticket selection and dietary preferences

Customer Feedback

13 fields

Customer Service

Comprehensive feedback survey with ratings

Newsletter Subscription

8 fields

Marketing

Email list signup with preference management

Lead Generation

11 fields

Marketing

B2B lead capture with company information

HTML Forms Integration

Integrate FormBase with any HTML form. Perfect for static sites and existing forms.

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
</head>
<body>
  <form action="https://your-domain.com/api/submit" method="POST">
    <!-- Required: Form endpoint identifier -->
    <input type="hidden" name="_form_endpoint" value="contact" />
    <input type="hidden" name="api_key" value="your_api_key_here" />
    
    <!-- Your form fields -->
    <label>Name</label>
    <input type="text" name="name" required />
    
    <label>Email</label>
    <input type="email" name="email" required />
    
    <label>Message</label>
    <textarea name="message" required></textarea>
    
    <button type="submit">Send Message</button>
  </form>
</body>
</html>

💡 Tip: The _form_endpoint field must match the endpoint you created in your FormBase dashboard.

React & Next.js Integration

Use FormBase with React or Next.js applications with full TypeScript support.

'use client';

import { useState } from 'react';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    
    try {
      const response = await fetch('https://your-domain.com/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _form_endpoint: 'contact',
          api_key: 'your_api_key_here',
          ...data
        }),
      });
      
      if (response.ok) {
        setStatus('success');
        e.target.reset();
      } else {
        setStatus('error');
      }
    } catch (error) {
      setStatus('error');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input
        type="email"
        name="email"
        placeholder="Your email"
        required
        className="w-full px-4 py-2 border rounded"
      />
      
      <textarea
        name="message"
        placeholder="Your message"
        required
        className="w-full px-4 py-2 border rounded"
        rows={4}
      />
      
      <button
        type="submit"
        disabled={status === 'sending'}
        className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
      >
        {status === 'sending' ? 'Sending...' : 'Send Message'}
      </button>
      
      {status === 'success' && (
        <p className="text-green-600">✅ Message sent successfully!</p>
      )}
      {status === 'error' && (
        <p className="text-red-600">❌ Failed to send. Please try again.</p>
      )}
    </form>
  );
}

Managing Submissions

View, filter, and export all form submissions from your dashboard.

Features

Real-time View: See submissions as they arrive
Export to CSV: Download all submissions for analysis
Search & Filter: Find specific submissions quickly
IP Tracking: See where submissions came from
Spam Detection: Automatically flag suspicious submissions
Bulk Actions: Delete multiple submissions at once

Spam Protection

FormBase includes multiple layers of spam protection to keep your submissions clean.

Built-in Protection

Automatic spam pattern detection
Rate limiting per IP address
Suspicious keyword filtering

Honeypot Field

Add a honeypot field to catch bots:

<form action="https://your-domain.com/api/submit" method="POST">
  <input type="hidden" name="_form_endpoint" value="contact" />
  <input type="hidden" name="api_key" value="your_api_key_here" />
  
  <!-- Honeypot field (hidden from real users) -->
  <input 
    type="text" 
    name="_honeypot" 
    style="display: none;" 
    tabindex="-1" 
    autocomplete="off"
  />
  
  <!-- Your visible form fields -->
  <input type="email" name="email" required />
  <button type="submit">Submit</button>
</form>

Webhooks

Configure webhooks to receive real-time notifications when forms are submitted.

Configure in Dashboard:

Forms → Your Form → Settings → Webhook URL

Webhook Payload:

{
  "event": "form.submitted",
  "form": {
    "id": "form_123",
    "name": "Contact Form",
    "endpoint": "contact"
  },
  "submission": {
    "id": "sub_456",
    "data": {
      "email": "user@example.com",
      "message": "Hello!"
    },
    "ip_address": "192.168.1.1",
    "created_at": "2025-11-19T00:00:00Z"
  }
}

⚡ Webhook Secret: Your webhook endpoint will receive a signature header for verification. Check the dashboard for your webhook secret.

Workspaces & Team Collaboration

Organize forms into workspaces and collaborate with team members.

Workspace Features

Team Collaboration: Invite team members to workspaces
Organize Forms: Group related forms together
Shared Access: All workspace members can manage forms
Permissions: Control who can view and edit

Analytics & Insights

Track form performance and submission trends.

Form Analytics

• Total submissions
• Submissions over time
• Conversion rates
• Average completion time
• Popular form fields

Activity Logs

• All form actions tracked
• User activity monitoring
• IP address logging
• Export audit logs
• Security monitoring

API Reference

Submit Form

POST/api/submit

Required Fields

_form_endpointrequired

Your form's endpoint identifier (found in dashboard)

string

Optional Fields

_honeypot

Honeypot field for spam protection (should be empty)

string

_redirect

URL to redirect after successful submission

string

Response (Success)

{
  "success": true,
  "message": "Form submitted successfully",
  "id": "sub_123"
}

Error Responses

400Missing _form_endpoint parameter

404Form not found

429Too many requests (rate limit exceeded)

500Internal server error

Need Help?

Have questions?

We're here to help! Access your dashboard or return to the homepage.

Go to Dashboard Back to Home