Building an HTML form is easy.
Processing the form is usually where things become complicated.
You can create a contact form with a few lines of HTML:
<form>
<input type="text" name="name" placeholder="Your name" />
<input type="email" name="email" placeholder="Your email" />
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Send</button>
</form>
The form looks complete.
But when someone clicks Send, where does the data go?
Normally, you would need to build a backend using Node.js, PHP, Python, Laravel, Express, or another server-side technology.
Then you would need to:
- Create an API endpoint
- Validate the request
- Store the submission
- Handle spam
- Send email notifications
- Handle errors
- Deploy and maintain the server
That is a lot of infrastructure just to receive a contact form.
For many static websites, portfolios, landing pages, and small projects, there is a much simpler solution.
You can use a form backend.
What Is a Form Backend?
A form backend is a hosted service that receives submissions from your HTML form.
Instead of sending the form to your own API:
HTML Form
↓
Your Backend
↓
Database
↓
Email
you send it directly to a hosted form endpoint:
HTML Form
↓
Form Backend
↓
Submission Dashboard
↓
Email / Webhooks / Integrations
Your website remains completely static.
You don't need:
- Node.js
- PHP
- Express
- A database
- A server
- A serverless function
- An email service
This makes a form backend especially useful for:
- Static websites
- Developer portfolios
- Landing pages
- Documentation sites
- Marketing websites
- GitHub Pages
- Cloudflare Pages
- Netlify
- Vercel
- Astro sites
- Plain HTML websites
Why Can't HTML Handle Form Submissions by Itself?
HTML can create the user interface for your form, but it does not provide permanent server-side processing.
Consider this:
<form method="POST">
<input name="email" type="email" />
<button type="submit">Submit</button>
</form>
The browser knows that it should submit the form.
But it still needs to know where to send the request.
That is what the action attribute is for.
For example:
<form
action="/api/contact"
method="POST"
>
Here the browser sends the form submission to:
POST /api/contact
But /api/contact needs to exist somewhere.
If you have a static website, there may be no backend available to process that request.
Instead, we can point the action attribute to a hosted form endpoint.
Creating an HTML Form Without a Backend
Let's create a real contact form.
Start with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<form method="POST">
<label for="name">Name</label>
<input
id="name"
type="text"
name="name"
required
/>
<label for="email">Email</label>
<input
id="email"
type="email"
name="email"
required
/>
<label for="message">Message</label>
<textarea
id="message"
name="message"
required
></textarea>
<button type="submit">
Send Message
</button>
</form>
</body>
</html>
At this point, the form exists, but it doesn't have a destination.
Now we need a form backend.
Using Formboost as the HTML Form Backend
Formboost is a developer-first form backend.
It doesn't build your form for you.
You keep your own HTML, CSS, React components, or frontend design.
Formboost only handles what happens after the user clicks Submit.
The flow looks like this:
Visitor
↓
Your HTML Form
↓
Formboost Endpoint
↓
Spam Processing
↓
Submission Storage
↓
Dashboard
↓
Email / Integrations / Webhooks
After creating a form in Formboost, you receive an endpoint that looks similar to:
https://formboost.app/f/YOUR_ENDPOINT_ID
Now add that endpoint to your HTML form:
<form
action="https://formboost.app/f/YOUR_ENDPOINT_ID"
method="POST"
>
<input
type="text"
name="name"
placeholder="Your name"
required
/>
<input
type="email"
name="email"
placeholder="Your email"
required
/>
<textarea
name="message"
placeholder="Your message"
required
></textarea>
<button type="submit">
Send Message
</button>
</form>
That's it.
You now have a working HTML form without building your own backend server.
No SDK is required.
No JavaScript is required.
No npm package is required.
No API route is required.
Why the name Attribute Is Important
One small detail is extremely important.
Every field you want to submit should have a name attribute.
For example:
<input
type="email"
name="email"
/>
The name becomes the field name sent to the backend.
For example:
<input name="firstName" />
<input name="email" />
<input name="company" />
<textarea name="message"></textarea>
The submission will conceptually look like:
{
"firstName": "John",
"email": "john@example.com",
"company": "Acme",
"message": "I'd like to know more."
}
An input without a name attribute will not be included in a normal HTML form submission.
Creating a Contact Form Without JavaScript
One advantage of native HTML forms is that JavaScript is optional.
You can simply use:
<form
action="https://formboost.app/f/YOUR_ENDPOINT_ID"
method="POST"
>
The browser handles the POST request for you.
This is often the simplest approach for:
- Portfolio websites
- Contact pages
- Landing pages
- Small business sites
- Static websites
You don't need to write:
fetch()
unless you want a custom JavaScript experience.
Submitting the Form With JavaScript
Sometimes you don't want the page to navigate after submission.
For example, you might want to display:
Thanks! Your message has been sent.
without leaving the page.
In that case, JavaScript can send the submission.
<form id="contact-form">
<input
type="text"
name="name"
placeholder="Your name"
required
/>
<input
type="email"
name="email"
placeholder="Your email"
required
/>
<textarea
name="message"
placeholder="Your message"
required
></textarea>
<button type="submit">
Send
</button>
</form>
<p id="status"></p>
Then:
const form = document.getElementById("contact-form");
const status = document.getElementById("status");
form.addEventListener("submit", async (event) => {
event.preventDefault();
const data = Object.fromEntries(
new FormData(form)
);
try {
const response = await fetch(
"https://formboost.app/f/YOUR_ENDPOINT_ID",
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
);
if (!response.ok) {
throw new Error("Submission failed");
}
status.textContent =
"Thanks! Your message has been sent.";
form.reset();
} catch (error) {
status.textContent =
"Something went wrong. Please try again.";
}
});
Now the visitor stays on the same page.
The architecture is still:
Browser
↓
Formboost
There is still no application backend running on your website.
Add a Custom Thank-You Page
Another useful approach is redirecting users after a successful submission.
For example:
<form
action="https://formboost.app/f/YOUR_ENDPOINT_ID"
method="POST"
>
<input
type="hidden"
name="_redirect"
value="https://example.com/thank-you"
/>
<input
type="email"
name="email"
required
/>
<button type="submit">
Submit
</button>
</form>
After submitting the form, the visitor can be sent to your own thank-you page.
This works well for:
/contact
↓
Form submission
↓
/thank-you
It is useful for landing pages because you can also track visits to the thank-you page as conversions.
What About Spam?
As soon as a public form goes online, automated bots can eventually find it.
If you build your own backend, spam protection becomes another thing you need to maintain.
A production form backend should handle things such as:
- Request validation
- Rate limiting
- Spam detection
- Honeypot detection
- Submission filtering
Formboost handles spam screening on the backend so your static website doesn't need to implement its own spam-processing infrastructure.
HTML Form Without PHP
A common solution for HTML forms is PHP:
contact.html
↓
contact.php
↓
send email
That works if your hosting environment supports PHP.
But many modern websites are deployed to static hosting platforms.
For example:
GitHub Pages
Cloudflare Pages
Static Vercel deployment
S3
CDN hosting
These environments don't run arbitrary PHP scripts.
A hosted form backend removes that requirement.
Your architecture becomes:
contact.html
↓
Form backend endpoint
This means you can have a working HTML contact form without PHP.
HTML Form Without Node.js
You could also create an Express endpoint:
app.post("/contact", async (req, res) => {
// validate data
// prevent spam
// save submission
// send email
// return response
});
But now you also need to maintain:
Node.js server
Database
Validation
Rate limiting
Spam protection
Email provider
Logging
Monitoring
Deployment
That's completely reasonable when form handling is part of your core application.
But if you're building a portfolio or landing page, maintaining an entire backend just for one contact form is usually unnecessary.
When Should You Build Your Own Backend?
A form backend isn't automatically the right solution for every application.
You should consider building your own backend when form submissions require complex business logic.
For example:
Form
↓
Check authenticated user
↓
Query account
↓
Calculate price
↓
Create payment
↓
Update database
↓
Trigger internal workflow
That belongs in your application backend.
But consider a normal contact form:
Name
Email
Message
Or:
Email
Newsletter signup
Or:
Name
Company
Project details
Building and maintaining a dedicated server for these submissions can be unnecessary overhead.
When a Form Backend Makes Sense
A hosted form backend works especially well when your website is primarily frontend-only.
Typical use cases include:
Contact Forms
Name
Email
Message
Portfolio Forms
Name
Email
Project type
Budget
Message
Landing Pages
Name
Work email
Company
Newsletter Forms
Email
Waitlists
Name
Email
Product interest
Feedback Forms
Email
Rating
Feedback
Support Forms
Email
Subject
Message
All of these can be collected without deploying your own form-processing server.
Static Site Form Backend Architecture
This architecture also keeps responsibilities nicely separated.
Your frontend handles:
HTML
CSS
User interface
Client-side validation
The form backend handles:
Receiving POST requests
Submission processing
Spam detection
Storage
Notifications
Integrations
Your site stays simple:
Static Website
|
|
POST
|
↓
Form Backend
This approach works regardless of whether the frontend was built with:
HTML
React
Next.js
Vue
Astro
Svelte
Hugo
Jekyll
As long as your frontend can make an HTTP POST request, it can use a form backend.
Complete HTML Example
Here is everything together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<form
action="https://formboost.app/f/YOUR_ENDPOINT_ID"
method="POST"
>
<div>
<label for="name">
Name
</label>
<input
id="name"
type="text"
name="name"
required
/>
</div>
<div>
<label for="email">
Email
</label>
<input
id="email"
type="email"
name="email"
required
/>
</div>
<div>
<label for="message">
Message
</label>
<textarea
id="message"
name="message"
rows="6"
required
></textarea>
</div>
<button type="submit">
Send Message
</button>
</form>
</body>
</html>
Replace:
YOUR_ENDPOINT_ID
with your actual Formboost form endpoint.
You can now deploy this page as a completely static website and still receive real form submissions.
Final Thoughts
You don't always need to build a backend just because your website contains a form.
For simple contact forms, feedback forms, newsletter forms, waitlists, and landing pages, a hosted form backend can remove a surprising amount of infrastructure.
Instead of building:
Frontend
+
API
+
Server
+
Database
+
Email
+
Spam protection
you can keep:
Frontend
+
Form endpoint
For developers, that means less infrastructure to maintain and more time spent building the actual product.
If you already have an HTML form, connecting it to a service such as Formboost generally requires changing only the form's action URL.
Your HTML stays yours.
Your design stays yours.
You simply don't have to build a backend just to receive a form submission.
Top comments (0)