Add forms to any HTML site
Works on Netlify, Vercel, GitHub Pages, Amazon S3, or any static host.
The simplest method
Paste the form HTML anywhere in your page. No build step, no JavaScript, no dependencies. The form submits directly to FormBlade and works on every hosting platform.
<form action="https://formblade.com/f/contact" 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</button> </form>
That is all you need. Replace your-endpoint-id with the form link ID from your FormBlade dashboard.
Full page example with styling
Here is a complete HTML page with a styled contact form you can use as a starting point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Us</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
max-width: 520px;
margin: 60px auto;
padding: 0 20px;
color: #1a1a1a;
}
h1 { font-size: 28px; margin-bottom: 8px; }
p { color: #666; margin-bottom: 28px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
input, textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 15px;
font-family: inherit;
margin-bottom: 16px;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, textarea:focus {
outline: none;
border-color: #6c47ff;
box-shadow: 0 0 0 3px rgba(108,71,255,.12);
}
button {
background: #6c47ff;
color: #fff;
border: none;
padding: 12px 32px;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
button:hover { background: #5a38e0; }
</style>
</head>
<body>
<h1>Contact Us</h1>
<p>We'd love to hear from you. Send us a message and we'll get back to you soon.</p>
<form action="https://formblade.com/f/contact" method="POST">
<label>Name</label>
<input type="text" name="name" required>
<label>Email</label>
<input type="email" name="email" required>
<label>Message</label>
<textarea name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</body>
</html>
Replace /f/contact with your own form link from the dashboard.
File uploads
To accept file uploads, add enctype="multipart/form-data" to your form tag and include a file input:
<form action="https://formblade.com/f/contact" method="POST" enctype="multipart/form-data"> <input type="text" name="name" placeholder="Your name" required> <input type="email" name="email" placeholder="Your email" required> <input type="file" name="attachment"> <textarea name="message" placeholder="Your message" required></textarea> <button type="submit">Send</button> </form>
Replace /f/contact with your own form link from the dashboard.
Honeypot spam protection
Add a hidden field to catch bots. FormBlade automatically detects the honeypot field — if it is filled in, the submission is flagged as spam.
<form action="https://formblade.com/f/contact" method="POST"> <!-- Honeypot field — hidden from real users --> <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off"> <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>
Replace /f/contact with your own form link from the dashboard.
The honeypot field is invisible to human visitors but gets auto-filled by bots. FormBlade checks for this and filters spam automatically.
AJAX submission
Submit the form with JavaScript to stay on the same page and show a custom success message. Send the request with the Accept: application/json header so FormBlade returns JSON instead of a redirect.
<form id="contact-form" action="https://formblade.com/f/contact" 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</button>
<p id="form-status" style="margin-top:12px;font-weight:600"></p>
</form>
<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
e.preventDefault();
var form = this;
var status = document.getElementById('form-status');
var btn = form.querySelector('button[type="submit"]');
btn.disabled = true;
btn.textContent = 'Sending...';
fetch(form.action, {
method: 'POST',
body: new FormData(form),
headers: { 'Accept': 'application/json' }
})
.then(function(response) { return response.json(); })
.then(function(data) {
form.reset();
status.textContent = 'Thank you! Your message has been sent.';
status.style.color = '#16a34a';
btn.disabled = false;
btn.textContent = 'Send';
})
.catch(function(error) {
status.textContent = 'Something went wrong. Please try again.';
status.style.color = '#dc2626';
btn.disabled = false;
btn.textContent = 'Send';
});
});
</script>
Replace /f/contact with your own form link from the dashboard.
Tips
Custom thank-you page
For standard (non-AJAX) forms, set a Redirect URL in your FormBlade form settings to send users to your own thank-you page after submission. For example, https://yoursite.com/thank-you.html.
Use your own CSS
The form is plain HTML — style it however you want with your site's existing CSS. There are no required class names or IDs. Just target the form elements as you normally would.
No build step needed
FormBlade works with plain HTML files. You do not need React, Webpack, or any framework. Just paste the form code into an HTML file and deploy. It works the same on a $5 shared host as it does on a modern JAMstack platform.
Hosting-specific notes
Netlify
Netlify has its own form handling feature (Netlify Forms) that automatically detects <form> tags during build. To prevent conflicts, add the data-netlify="false" attribute or simply ensure you do not have netlify or data-netlify="true" on your FormBlade form. If Netlify still intercepts your form, add a hidden attribute to opt out:
<form action="https://formblade.com/f/contact" method="POST" data-netlify="false"> ... </form>
Replace /f/contact with your own form link from the dashboard.
Vercel
Vercel does not intercept form submissions. FormBlade forms work as-is with no extra configuration. Just deploy your HTML and the form will submit directly to FormBlade.
GitHub Pages
GitHub Pages serves static files and does not process forms in any way. FormBlade forms work perfectly on GitHub Pages — no configuration needed. Just commit your HTML file with the form and push.