← Back to Blog
Developer9 min read

Form API Integration: A Developer's Guide

Learn how to integrate forms into your apps using REST APIs. Webhooks, authentication, and best practices.

FastSubmit provides a complete REST API for developers to integrate forms into their applications. This guide covers everything from authentication to webhooks and best practices.

Why Use the FastSubmit API?

  • Full Control: Programmatically create and manage forms
  • Custom Integrations: Build forms into your existing workflows
  • Automation: Automate form creation and data processing
  • Webhooks: Real-time notifications for submissions
  • Data Export: Fetch submissions programmatically

Getting Started

1. Get Your API Key

First, you'll need an API key from your FastSubmit dashboard:

  1. Log in to your FastSubmit account
  2. Go to Settings → API Keys
  3. Click "Generate New API Key"
  4. Copy and store it securely

Security Best Practices:

  • • Never commit API keys to version control
  • • Use environment variables to store keys
  • • Rotate keys regularly
  • • Use different keys for development and production

2. Authentication

All API requests require authentication using Bearer tokens:

cURL
curl -X GET \
  https://fastsubmit.hostspica.com/api/v1/forms \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"

Core API Endpoints

Create a Form

POST /api/v1/forms
const response = await fetch(
  'https://fastsubmit.hostspica.com/api/v1/forms',
  {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'Contact Form',
      fields: [
        { name: 'name', type: 'text', required: true },
        { name: 'email', type: 'email', required: true },
        { name: 'message', type: 'textarea', required: false }
      ],
      settings: {
        redirectUrl: '/thank-you',
        emailNotifications: true
      }
    })
  }
);

const form = await response.json();
console.log('Form ID:', form.id);

Submit to a Form

POST /api/v1/forms/:formId/submit
const response = await fetch(
  'https://fastsubmit.hostspica.com/api/v1/forms/FORM_ID/submit',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'John Doe',
      email: 'john@example.com',
      message: 'Hello from the API!'
    })
  }
);

const result = await response.json();
console.log('Submission ID:', result.submissionId);

Get Submissions

GET /api/v1/forms/:formId/submissions
const response = await fetch(
  'https://fastsubmit.hostspica.com/api/v1/forms/FORM_ID/submissions?limit=50',
  {
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    }
  }
);

const { submissions, total, page } = await response.json();
console.log(`Found ${total} submissions`);

Update a Form

PATCH /api/v1/forms/:formId
const response = await fetch(
  'https://fastsubmit.hostspica.com/api/v1/forms/FORM_ID',
  {
    method: 'PATCH',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'Updated Contact Form',
      settings: {
        emailNotifications: false
      }
    })
  }
);

Delete a Form

DELETE /api/v1/forms/:formId
const response = await fetch(
  'https://fastsubmit.hostspica.com/api/v1/forms/FORM_ID',
  {
    method: 'DELETE',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    }
  }
);

Webhooks

Real-Time Notifications

Webhooks allow you to receive real-time notifications when events occur, such as new form submissions.

Setting Up Webhooks

POST /api/v1/webhooks
const response = await fetch(
  'https://fastsubmit.hostspica.com/api/v1/webhooks',
  {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url: 'https://your-app.com/webhooks/fastsubmit',
      events: ['submission.created', 'submission.updated'],
      formId: 'FORM_ID' // Optional: specific form
    })
  }
);

Webhook Payload

When a submission is created, you'll receive a POST request:

Webhook Payload
{
  "event": "submission.created",
  "timestamp": "2024-12-08T10:30:00Z",
  "form": {
    "id": "form_abc123",
    "name": "Contact Form"
  },
  "submission": {
    "id": "sub_xyz789",
    "data": {
      "name": "John Doe",
      "email": "john@example.com",
      "message": "Hello!"
    },
    "createdAt": "2024-12-08T10:30:00Z",
    "ipAddress": "192.168.1.1",
    "userAgent": "Mozilla/5.0..."
  }
}

Handling Webhooks (Node.js/Express)

server.js
const express = require('express');
const app = express();

app.post('/webhooks/fastsubmit', express.json(), (req, res) => {
  const { event, submission } = req.body;
  
  if (event === 'submission.created') {
    console.log('New submission:', submission.data);
    
    // Process the submission
    // - Send to CRM
    // - Add to email list
    // - Trigger notifications
    // - etc.
  }
  
  // Always respond with 200 to acknowledge receipt
  res.status(200).json({ received: true });
});

app.listen(3000);

Error Handling

HTTP Status Codes

200Success
201Created
400Bad Request - Invalid data
401Unauthorized - Invalid API key
404Not Found - Resource doesn't exist
429Too Many Requests - Rate limit exceeded
500Server Error

Error Response Format

Error Response
{
  "error": {
    "code": "INVALID_REQUEST",
    "message": "Email field is required",
    "details": {
      "field": "email",
      "reason": "missing_required_field"
    }
  }
}

Rate Limiting

API requests are rate-limited to ensure fair usage:

  • Free Plan: 1,000 requests per hour
  • Pro Plan: 10,000 requests per hour
  • Enterprise: Custom limits

Rate limit headers are included in every response:

X-RateLimit-Limit: 1000
X-RateLimit-Remaining: 999
X-RateLimit-Reset: 1702034400

Best Practices

✅ Do This:

  • Use environment variables for API keys
  • Implement exponential backoff for retries
  • Cache responses when appropriate
  • Validate data before sending to API
  • Handle errors gracefully
  • Use webhooks instead of polling
  • Monitor rate limits
  • Log API requests for debugging

Example: Full Integration

Complete Example
class FastSubmitClient {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseUrl = 'https://fastsubmit.hostspica.com/api/v1';
  }

  async createForm(formData) {
    const response = await fetch(`${this.baseUrl}/forms`, {
      method: 'POST',
      headers: this.getHeaders(),
      body: JSON.stringify(formData)
    });
    return this.handleResponse(response);
  }

  async getSubmissions(formId, options = {}) {
    const params = new URLSearchParams(options);
    const response = await fetch(
      `${this.baseUrl}/forms/${formId}/submissions?${params}`,
      { headers: this.getHeaders() }
    );
    return this.handleResponse(response);
  }

  getHeaders() {
    return {
      'Authorization': `Bearer ${this.apiKey}`,
      'Content-Type': 'application/json'
    };
  }

  async handleResponse(response) {
    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error.message);
    }
    return response.json();
  }
}

// Usage
const client = new FastSubmitClient(process.env.FASTSUBMIT_API_KEY);

// Create a form
const form = await client.createForm({
  name: 'Newsletter Signup',
  fields: [
    { name: 'email', type: 'email', required: true }
  ]
});

// Get submissions
const submissions = await client.getSubmissions(form.id, {
  limit: 100,
  page: 1
});

Ready to Build with Our API?

Get your free API key and start integrating forms into your applications.

Get API Key

Conclusion

The FastSubmit API provides everything you need to integrate forms into your applications. With full CRUD operations, webhooks, and comprehensive error handling, you can build powerful form-based workflows that scale with your business.

Start with the basics, implement proper error handling, and use webhooks for real-time updates. For complete API documentation, visit our API docs.