The Easiest Way to Handle Forms in Webflow
Because Webflow generates static HTML or handles server-side rendering differently depending on your setup, managing a database for contact form submissions is often an annoying distraction. FormBox acts as your headless backend.
1. The HTML Approach
The simplest method is to use a standard HTML form. This requires absolutely zero JavaScript.
<form action="https://api.formbox.com/submit/YOUR_FORM_ID" method="POST">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
2. The AJAX / JSON Approach
If you want to keep the user on the same page and show a custom success message, FormBox natively accepts JSON requests.
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const data = Object.fromEntries(formData.entries());
const response = await fetch("https://api.formbox.com/submit/YOUR_FORM_ID", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify(data)
});
if (response.ok) {
alert("Thanks for your submission!");
}
};