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:
- Log in to your FastSubmit account
- Go to Settings → API Keys
- Click "Generate New API Key"
- 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 -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
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
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
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
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
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
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:
{
"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)
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
200Success201Created400Bad Request - Invalid data401Unauthorized - Invalid API key404Not Found - Resource doesn't exist429Too Many Requests - Rate limit exceeded500Server ErrorError Response Format
{
"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-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
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 KeyConclusion
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.