JSONPost
Free HTML Form Generator
Beta
Sign InGet Started
Quick Start Guide

Get Started with JSONPost
in 5 Minutes

Learn how to integrate JSONPost's headless form backend into your website. From HTML forms to React components, we'll show you exactly how to collect form submissions without writing any backend code.

Start Free Account Follow Along

What You'll Learn

This guide will walk you through everything you need to know to start collecting form submissions with JSONPost, from basic HTML forms to advanced integrations.

Account Setup

Create your account and first project in under 2 minutes

Endpoint Configuration

Configure your form endpoint with notifications and webhooks

Form Integration

Connect your HTML, React, or any frontend to JSONPost

View Submissions

Monitor and manage your form submissions in real-time

Total Time: 5-10 minutes

Perfect for developers who want to add form handling to their website quickly

1

Create Your Account & Project

First, let's get you set up with a JSONPost account and create your first project.

Sign Up Process

1

Visit the signup page

Click "Start Free Account" and enter your email and password

2

Verify your email

Check your inbox and click the verification link

3

Create your first project

Give your project a name like "My Website Forms"

Free Tier Includes:

  • • 100 form submissions per month
  • • Email notifications
  • • Basic webhook support
  • • File uploads up to 10MB

Screenshot: Dashboard After Signup

JSONPost Dashboard

Your project overview with quick stats

2

Create Your First Endpoint

Now let's create an endpoint that will receive your form submissions.

Endpoint Configuration

Give it a descriptive name like "Contact Form" or "Newsletter Signup"

Choose a path like "contact" or "newsletter" (letters, numbers, hyphens only)

Enter your email to get notified when someone submits the form

Your Endpoint URL

After creating the endpoint, you'll get a URL like this:

# Your unique endpoint URL
https://jsonpost.com/api/submit/
your-project-id
/
contact
Copy this URL - you'll need it for your form

Screenshot: Create Endpoint Form

Endpoint Configuration

Form to create your endpoint

3

Connect Your HTML Form

The simplest way to get started - just point your HTML form to your JSONPost endpoint.

Basic HTML Contact Form

Copy and paste this code into your HTML file, replacing the action URL with your endpoint

<!-- Simple contact form -->
<form
action="https://jsonpost.com/api/submit/your-project-id/contact"
method="POST"
class="contact-form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>

JavaScript/React Integration

For more control, use JavaScript fetch or React to submit forms programmatically

// React component with form submission
const
ContactForm = () => {
const
[formData, setFormData] = useState({
name:
''
,
email:
''
,
message:
''
});
const
handleSubmit =
async
(e) => {
e.preventDefault();
try
{
const
response =
await
fetch(
'https://jsonpost.com/api/submit/your-project-id/contact',
{
method:
'POST'
,
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
}
);
if
(response.ok) {
alert(
'Message sent successfully!'
);
setFormData({ name:
''
, email:
''
, message:
''
});
}
}
catch
(error) {
alert(
'Error sending message'
);
}
};
return
(
// Your JSX form here
);
};

Important Notes

Replace "your-project-id" with your actual project ID

Form field names become keys in your submission data

JSONPost supports JSON, form-data, and URL-encoded submissions

Pro Tips

Add a hidden "redirect" field to redirect users after submission

Use descriptive field names for better organization

Test your form with sample data before going live

4

Test Your Form & View Submissions

Now let's test your form and see how to view and manage submissions in your dashboard.

Testing Your Form

1

Fill out your form

Enter some test data and submit the form

2

Check your email

You should receive an email notification (if enabled)

3

View in dashboard

Go to your JSONPost dashboard to see the submission

Managing Submissions

View all submissions in a clean table format
Search and filter submissions by date or content
Export submissions as CSV for analysis
View detailed information including IP and user agent

Screenshot: Submissions Dashboard

Submissions Dashboard

View and manage all your form submissions

Advanced Features

Take your forms to the next level with these powerful features

File Uploads

Accept file uploads with automatic storage and validation. Support for images, documents, and more.

<input type="file"
name="attachment"
accept=".pdf,.jpg,.png" />

Webhooks

Forward submissions to Slack, Discord, Zapier, or any webhook URL for automated workflows.

POST
to webhook
Content-Type: application/json
{ submission_data }

JSON Validation

Validate form submissions against custom JSON schemas to ensure data quality and structure.

{
"type": "object",
"required": ["email"]
}

Custom Email Templates

Customize email notifications with your own templates and branding for a professional look.

API Key Authentication

Secure your endpoints with API key authentication for sensitive forms and applications.

Analytics & Insights

Track submission trends, popular form fields, and user behavior with detailed analytics.

You're All Set! 🎉

Congratulations! You now have a fully functional form backend. Here's what you can do next:

Customize Your Endpoint

Add webhooks, file uploads, custom validation, and more advanced features

View Documentation

Need Help?

Join our community or contact support if you have questions or need assistance

Get Support
Start Building Your Forms

Free tier • No credit card required • 100 submissions/month