Debugging Form Submissions
Tools and techniques for debugging form issues
Debugging form submission issues can be challenging. This guide covers tools and techniques to help you identify and fix problems with your Static Forms integration.
Browser DevTools
Browser DevTools are your best friend when debugging forms:
Network Tab
The Network tab shows all HTTP requests, including form submissions:
Open DevTools
Press F12 or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows/Linux) to open DevTools.
Go to Network Tab
Click the "Network" tab and ensure it's recording (red circle should be active).
Submit Form
Submit your form and look for the request to api.staticforms.dev.
Inspect Request
Click on the request to see:
- Request URL and method
- Request headers
- Request payload (form data)
- Response status code
- Response body
Console Tab
Check the Console tab for JavaScript errors:
Testing Your Form
Systematic testing approach:
1. Test Form Structure
Verify your form has the required elements:
2. Test API Key
Verify your API key is correct:
- Check it starts with
sf_ - Verify it's 35 characters long
- Ensure no extra spaces or line breaks
- Confirm it matches your dashboard
3. Test Form Submission
Submit the form and check:
- Network request is made
- Request goes to correct URL
- Response status code (200 = success)
- Response message
Common Mistakes
Avoid these common errors:
Wrong Form Action URL
Ensure the action is exactly https://api.staticforms.dev/submit (not http:// or a different path).
Missing Method Attribute
Always include method="POST". GET requests won't work.
API Key Typo
Double-check your API key for typos, extra spaces, or missing characters.
Missing enctype for File Uploads
If uploading files, add enctype="multipart/form-data" to your form.
Testing Checklist
Use this checklist when debugging:
Debugging Tools
Useful tools for debugging:
Browser DevTools
Built-in browser tools for inspecting network requests, console logs, and DOM elements.
cURL
Test API requests directly from the command line to isolate issues.
Postman / Insomnia
API testing tools to manually test form submissions with different payloads.
Testing with cURL
Test your form submission directly with cURL: