Create a Form
After creating your account, the first step is to create a form in the FormSubmits web-app. This defines submission rules and what fields your form will accept and how they should be validated.
How to create a form:
Go to Forms page in your dashboard
Click "Create Form" button
Give your form a name (e.g., "Contact Form", "Newsletter Signup") and configure other form settings
Add fields that match your HTML form inputs (name, email, message, etc.)
Configure validation rules for each field (required, min/max length, format)
Save the form and copy the Form ID — you'll need it for your HTML form
Pro Tip: Field Names Must Match
The field names you configure in the dashboard must match the name attributes in your HTML form. For example, if you add a field named "email" in the dashboard, your HTML input should be <input name="email" />.
Add and Verify Email Address
If you want to receive email notifications when someone submits your form, you need to add and verify your email address first. This step helps prevent abuse of our email service.
How to add an email address:
Go to Emails - Email Addresses page
Click "Add Email Address"
Enter a display name (e.g., "Sales Team") and the email address
Click "Confirm" button next to the newly added email
Agree to send a verification email with a confirmation code
Check your inbox, copy the code, and enter it in the dashboard
Once verified, you can use this email in your form's notification settings
Note: This step is optional. You can skip it if you don't need email notifications and prefer to check submissions directly in the dashboard or send them to external services via webhooks/connectors.
Set Up Connectors
Connectors allow you to send form submissions to external services automatically. Use your own email provider, store files in your cloud storage, or integrate with productivity tools.
Free Plan Limitation
Connectors are not available on the Free plan. Upgrade to a paid plan to unlock integrations with external services. On the Free plan, you can still view submissions in the dashboard and receive basic email notifications.
View PlansEmail Services (BYOE)
SendGrid, AWS SES, or your own SMTP server for branded email notifications
Cloud Storage (BYOS)
Store submissions and/or uploaded files in your AWS S3, Azure Blob, or Google Cloud Storage
Communication
Send submissions to Slack, Discord, or Telegram channels
Productivity
Append data to Google Sheets, Notion, Airtable, or HubSpot
What are BYOE and BYOS?
BYOE (Bring Your Own Email) lets you use your own email service (like SendGrid or AWS SES) to send notifications from your domain. BYOS (Bring Your Own Storage) lets you store uploaded files (and even form data as JSON file with metadata) directly in your cloud storage instead of ours. Both features give you full control over your data and branding.
You can skip this step for now and set up connectors later. Your forms will work without them — submissions will be stored in FormSubmits and you can view them in the dashboard.
Create Your HTML Form
Now it's time to create the HTML form on your website. Point your form's action attribute to the FormSubmits API endpoint with your Form ID.
Key Points:
- Form action URL:
https://api.formsubmits.com/api/submissions/YOUR_FORM_ID - Use
method="POST"for all forms - Input
nameattributes must match field names in dashboard - By default, after submission user is redirected back with
?submission=successor?submission=failed
Custom Redirect URLs
You can configure custom success redirect URLs in your form settings. This lets you send users to a "Thank You" page.
Advanced: reCAPTCHA & File Uploads
For forms that need extra protection against bots or accept file uploads, here's a complete example with reCAPTCHA Enterprise, honeypot fields, and file handling.
Using the Helper Script
The example above includes our optional helper script formsubmits-core.js which simplifies error handling and form state management. See the Helper Script Documentation below for details.
Test Your Form
Now it's time to test everything! Submit your form and verify that the data arrives correctly in the FormSubmits on the Submissions page.
Testing Checklist:
Open your form page
Can be on localhost, staging, or production
Fill out the form with test data
Use a real email if you want to test notifications
Submit the form
Check for success message or redirect with ?submission=success
Go to Submissions in the dashboard
Your submission should appear in the list
Click on the submission to view details
Verify all field data was captured correctly
Submission Details
In the submission details view, you can see all submitted data, uploaded files, submission timestamp, IP address, user agent, and any validation or processing notes. You can also add internal notes for your team.
Understanding Submission Results
Submissions can either be accepted, rejected, or marked as spam. Here's how each works:
Unknown Fields Are Accepted by Default
By default, forms accept all submitted fields — even those not listed in your configuration. Only fields with validation rules are checked. You can change this behavior in form settings to accept without checking or ignore unknown fields.
Debugging with AJAX Submissions
When submitting via AJAX, the API returns detailed error information for each field that failed validation. Use this to display helpful error messages to your users so they can correct their input and resubmit.
🎉 Congratulations!
Your form is now live and collecting validated submissions. You're all set!
Helper Script Documentation
The formsubmits-core.js helper script simplifies AJAX form submissions by handling error display, loading states, and success messages automatically.
Script URL:
https://api.formsubmits.com/api/scripts/formsubmits-core.js<!-- Include the script -->
<script src="https://api.formsubmits.com/api/scripts/formsubmits-core.js"></script>
<script>
const form = document.getElementById('myForm');
const handler = new FormSubmissionHandler(form, {
// Callbacks
onSuccess: (response) => {
console.log('Form submitted!', response);
},
onError: (response) => {
console.log('Validation errors:', response.errors);
},
onBeforeSubmit: () => {
console.log('Submitting...');
},
onAfterSubmit: () => {
console.log('Done!');
},
// Options
autoScroll: true, // Scroll to messages (default: true)
resetOnSuccess: true, // Clear form after success (default: true)
invalidClass: 'is-invalid', // Class for invalid inputs
showClass: 'show', // Class to show error elements
// Selectors (customize if your HTML differs)
errorSummarySelector: '.error-summary',
errorSummaryListSelector: '#errorSummaryList',
fieldErrorSelector: '[data-field]',
successMessageSelector: '.success-message',
successMessageTextSelector: '#successMessageText'
});
// Enable auto-clearing of field errors when user types
handler.enableAutoClearErrors();
</script>jQuery Support
If jQuery is available on your page, you can also use the jQuery plugin syntax:
$('#myForm').formSubmissionHandler({ onSuccess: ... });Dependencies: The script works with native fetch() API or Axios if available. No other dependencies required.
Ready to Get Started?
Create your free account and start collecting form submissions in minutes.