Step 3: Form Integration

Form Integration is where you connect external forms and services to your API endpoint. This step handles the crucial task of mapping form fields to your API fields and setting up data flow.

Overview

The Form Integration step allows you to:

Connect various form platforms to your API
Map form fields to API fields
Transform data between different formats
Configure security and webhook settings

Supported Integrations

Typeform Integration

Typeform is a popular form builder that can send data to your API via webhooks.

Setup Process

Get Your API Endpoint URL
- Copy your API endpoint URL from the previous step
- Example: https://your-api.com/endpoint/user-feedback
Configure Typeform Webhook
- Go to your Typeform settings
- Navigate to "Connect" → "Webhooks"
- Add your API endpoint URL
- Set method to POST
Map Typeform Fields to API Fields
- Typeform uses field IDs like name_12345
- Map these to your API field names
- Use the field mapping interface

Field Mapping Example

Typeform Field ID → API Field Name
"name_12345" → "name"
"email_67890" → "email"
"rating_11111" → "rating"
"feedback_22222" → "feedback"

Typeform Webhook Payload

json

{
  "form_id": "abc123",
  "token": "def456",
  "submitted_at": "2024-01-15T10:30:00Z",
  "answers": [
    {
      "field": {
        "id": "name_12345",
        "type": "short_text"
      },
      "text": "John Doe"
    },
    {
      "field": {
        "id": "email_67890",
        "type": "email"
      },
      "email": "john@example.com"
    }
  ]
}

Google Forms Integration

Google Forms can be connected to your API using Google Apps Script or webhook services.

Setup Process

Enable Google Forms API
- Go to Google Cloud Console
- Enable Google Forms API
- Create credentials (API key or OAuth)
Configure Webhook
- Use Google Apps Script or third-party service
- Point webhook to your API endpoint
- Set up form submission triggers
Map Google Form Fields
- Google Forms uses question IDs
- Map to your API field names
- Handle different question types

Field Mapping Example

Google Form Question → API Field Name
"entry.123456789" → "name"
"entry.987654321" → "email"
"entry.456789123" → "rating"

Custom HTML Forms

Connect your own HTML forms directly to your API endpoint.

Basic HTML Form

html

<form action="https://your-api.com/endpoint/user-feedback" method="POST">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="rating">Rating:</label>
    <select id="rating" name="rating" required>
      <option value="">Select rating</option>
      <option value="1">1 Star</option>
      <option value="2">2 Stars</option>
      <option value="3">3 Stars</option>
      <option value="4">4 Stars</option>
      <option value="5">5 Stars</option>
    </select>
  </div>

  <div>
    <label for="feedback">Feedback:</label>
    <textarea id="feedback" name="feedback" rows="4"></textarea>
  </div>

  <button type="submit">Submit Feedback</button>
</form>

Form with JavaScript Enhancement

html

<form id="feedback-form" action="https://your-api.com/endpoint/user-feedback" method="POST">
  <!-- form fields -->
</form>

<script>
document.getElementById('feedback-form').addEventListener('submit', async function(e) {
  e.preventDefault();

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

  try {
    const response = await fetch(this.action, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data)
    });

    if (response.ok) {
      alert('Thank you for your feedback!');
      this.reset();
    } else {
      alert('There was an error submitting your feedback.');
    }
  } catch (error) {
    alert('Network error. Please try again.');
  }
});
</script>

Field Mapping Configuration

Automatic Mapping

The system automatically maps fields when:

Field names match exactly (case-insensitive)
Common field name variations are recognized
Field types are compatible

Automatic Mapping Rules

Form Field → API Field
"name" → "name" ✓
"Name" → "name" ✓
"full_name" → "name" ✓
"user_name" → "name" ✓
"email_address" → "email" ✓
"e_mail" → "email" ✓

Manual Mapping

Use the drag-and-drop interface to manually map fields:

Visual Field Mapping
- Drag form fields to API fields
- See real-time preview of mapping
- Validate field compatibility
Nested Field Mapping
- Map complex form structures
- Handle nested objects and arrays
- Support for conditional fields
Custom Transformations
- Apply data transformations during mapping
- Convert data types
- Apply formatting rules

Data Transformation

Format Conversion

javascript

// String to Number
"5" → 5

// Date Formatting
"2024-01-15" → "2024-01-15T00:00:00Z"

// Phone Number Formatting
"1234567890" → "(123) 456-7890"

Value Mapping

javascript

// Rating Scale Conversion
"Very Good" → 5
"Good" → 4
"Average" → 3
"Poor" → 2
"Very Poor" → 1

// Boolean Conversion
"Yes" → true
"No" → false
"1" → true
"0" → false

Data Cleaning

javascript

// Remove Extra Spaces
"  John Doe  " → "John Doe"

// Standardize Phone Numbers
"+1 (123) 456-7890" → "1234567890"

// Clean Email Addresses
"JOHN@EXAMPLE.COM" → "john@example.com"

Integration Settings

Webhook Configuration

Basic Settings

URL: Your API endpoint URL
Method: POST (recommended for form data)
Content-Type: application/json or application/x-www-form-urlencoded
Timeout: Set appropriate timeout values

Advanced Settings

Retry Logic: Configure retry attempts for failed submissions
Rate Limiting: Control submission frequency
Queue Management: Handle high-volume submissions
Error Handling: Define error response handling

Security Settings

API Authentication

javascript

// API Key Authentication
headers: {
  'Authorization': 'Bearer your-api-key',
  'Content-Type': 'application/json'
}

// Basic Authentication
headers: {
  'Authorization': 'Basic ' + btoa('username:password'),
  'Content-Type': 'application/json'
}

IP Whitelisting

Restrict access to specific IP addresses
Configure allowed IP ranges
Block suspicious IP addresses
Monitor access patterns

Data Validation

Validate incoming data format
Check required fields
Sanitize input data
Prevent injection attacks

Testing Your Integration

Test Form Submission

Create Test Data

json

{
  "name": "Test User",
  "email": "test@example.com",
  "rating": 5,
  "feedback": "This is a test submission"
}

Submit Test Request

bash

curl -X POST https://your-api.com/endpoint/user-feedback \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test User",
    "email": "test@example.com",
    "rating": 5,
    "feedback": "This is a test submission"
  }'

Verify Response

json

{
  "success": true,
  "data": {
    "id": "sub_12345",
    "name": "Test User",
    "email": "test@example.com",
    "rating": 5,
    "feedback": "This is a test submission",
    "submitted_at": "2024-01-15T10:30:00Z"
  },
  "message": "Feedback submitted successfully"
}

Integration Testing Checklist

[ ] Form fields map correctly to API fields
[ ] Data transformations work as expected
[ ] Required field validation functions
[ ] Error handling works properly
[ ] Response format is correct
[ ] Security measures are in place
[ ] Performance is acceptable
[ ] Error logging is working

Troubleshooting

Common Issues

Field Mapping Problems

Issue: Fields not mapping correctly
Solution: Check field names and types, use manual mapping if needed

Data Format Issues

Issue: Data not in expected format
Solution: Configure data transformations in mapping settings

Authentication Errors

Issue: 401 Unauthorized responses
Solution: Check API key configuration and permissions

CORS Issues

Issue: Browser blocking requests
Solution: Configure CORS settings in your API

Debugging Tips

Check Webhook Logs
- Monitor webhook delivery status
- Review error messages and response codes
- Check payload format and content
Test with cURL
- Use cURL to test API endpoints directly
- Verify request format and headers
- Check response format and status codes
Use Browser Developer Tools
- Monitor network requests
- Check for JavaScript errors
- Verify form data being sent

Next Steps

After completing form integration:

Configure Validation Rules → Step 4: Validation Rules
Set Up Response Configuration → Step 5: Response Configuration
Test and Deploy → Step 6: Testing & Deployment

Field Configuration - Setting up API fields
Validation Rules - Data validation and business logic
API Reference - Complete API documentation

Step 3: Form Integration ​

Overview ​

Supported Integrations ​

Typeform Integration ​

Setup Process ​

Field Mapping Example ​

Typeform Webhook Payload ​

Google Forms Integration ​

Setup Process ​

Field Mapping Example ​

Custom HTML Forms ​

Basic HTML Form ​

Form with JavaScript Enhancement ​

Field Mapping Configuration ​

Automatic Mapping ​

Automatic Mapping Rules ​

Manual Mapping ​

Data Transformation ​

Format Conversion ​

Value Mapping ​

Data Cleaning ​

Integration Settings ​

Webhook Configuration ​

Basic Settings ​

Advanced Settings ​

Security Settings ​

API Authentication ​

IP Whitelisting ​

Data Validation ​

Testing Your Integration ​

Test Form Submission ​

Integration Testing Checklist ​

Troubleshooting ​

Common Issues ​

Field Mapping Problems ​

Data Format Issues ​

Authentication Errors ​

CORS Issues ​

Debugging Tips ​

Next Steps ​

Related Topics ​

Step 3: Form Integration

Overview

Supported Integrations

Typeform Integration

Setup Process

Field Mapping Example

Typeform Webhook Payload

Google Forms Integration

Setup Process

Field Mapping Example

Custom HTML Forms

Basic HTML Form

Form with JavaScript Enhancement

Field Mapping Configuration

Automatic Mapping

Automatic Mapping Rules

Manual Mapping

Data Transformation

Format Conversion

Value Mapping

Data Cleaning

Integration Settings

Webhook Configuration

Basic Settings

Advanced Settings

Security Settings

API Authentication

IP Whitelisting

Data Validation

Testing Your Integration

Test Form Submission

Integration Testing Checklist

Troubleshooting

Common Issues

Field Mapping Problems

Data Format Issues

Authentication Errors

CORS Issues

Debugging Tips

Next Steps

Related Topics