Quickstarts
HTML / JS Form Integration
Overview
Voieform works with any plain HTML website through direct POST actions or client-side JavaScript requests. Simply add a form tag or JS handler and start collecting submissions with zero server configuration.
Build with AI (Vibe Coding Prompt)
Use this LLM prompt in Cursor, v0, Bolt, or ChatGPT to generate a ready-to-run HTML form connected to Voieform.
promptprompt
Build me a contact form with name, email, and message fields. Connect it with Voieform for form submissions.
apiKey: <PASTE-YOUR-FORM-API-KEY-HERE>
Target Endpoint: https://voieform.com/f/{api_key}What you'll get out of the box:
Zero Server Configuration
Collect submissions without building or hosting a backend.
ProShield AI Spam Protection
Groq deep-learning analysis screens out bot submissions automatically.
Instant Alerts & Webhooks
Receive email notifications, Telegram push alerts, and HMAC webhooks.
Multipart File Uploads
Support file attachments up to 50MB per submission.
Quick Start
Create a form target from your account dashboard to obtain your unique submission key (e.g. pr_live_x92a).
Direct HTML Form Action
Point your HTML form action directly to https://voieform.com/f/{api_key}:
htmlhtml
<form action="https://voieform.com/f/pr_live_x92a" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="John Doe" required />
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="john@example.com" required />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Your message..." rows="4" required></textarea>
</div>
<div class="form-group">
<label for="file">Attachment (Optional)</label>
<input type="file" id="file" name="attachment" />
</div>
<button type="submit">Send Message</button>
</form>Async JS Fetch
If you want to send form entries asynchronously without reloading the page, intercept the submit event with JavaScript:
htmlhtml
<form id="contact-form">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Submit</button>
</form>
<p id="status-message"></p>
<script>
const form = document.getElementById('contact-form');
const status = document.getElementById('status-message');
form.addEventListener('submit', async function(e) {
e.preventDefault();
status.textContent = 'Sending...';
try {
const response = await fetch('https://voieform.com/f/pr_live_x92a', {
method: 'POST',
body: new FormData(form),
headers: { 'Accept': 'application/json' }
});
const result = await response.json();
if (result.success) {
status.textContent = 'Message sent successfully!';
form.reset();
} else {
status.textContent = result.error || 'Submission failed.';
}
} catch (err) {
status.textContent = 'Network error. Please try again.';
}
});
</script>Complete HTML Page Example
Here is a complete, copy-paste ready HTML file with styled form controls and submission states:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us — Voieform Demo</title>
<style>
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #0a0a0c; color: #fff; max-width: 480px; margin: 3rem auto; padding: 0 1rem; }
.card { background: #121215; border: 1px solid #27272a; padding: 1.75rem; border-radius: 12px; }
h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1rem; }
label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.4rem; color: #a1a1aa; }
input, textarea { width: 100%; padding: 0.6rem 0.8rem; background: #18181c; border: 1px solid #27272a; border-radius: 6px; color: #fff; font-size: 0.875rem; }
input:focus, textarea:focus { outline: none; border-color: #0052cc; }
button { width: 100%; background: #0052cc; color: #fff; font-weight: 700; padding: 0.7rem; border: none; border-radius: 6px; cursor: pointer; margin-top: 0.5rem; }
button:hover { background: #003da6; }
.status { font-size: 0.8rem; margin-top: 0.8rem; font-weight: 600; }
</style>
</head>
<body>
<div class="card">
<h1>Get in Touch</h1>
<form id="contact-form">
<div class="form-group">
<label>YOUR NAME</label>
<input type="text" name="name" placeholder="John Doe" required />
</div>
<div class="form-group">
<label>EMAIL ADDRESS</label>
<input type="email" name="email" placeholder="john@example.com" required />
</div>
<div class="form-group">
<label>MESSAGE</label>
<textarea name="message" rows="4" placeholder="How can we help?" required></textarea>
</div>
<button type="submit" id="submit-btn">Send Message</button>
</form>
<p id="status-msg" class="status"></p>
</div>
<script>
const form = document.getElementById('contact-form');
const statusMsg = document.getElementById('status-msg');
const submitBtn = document.getElementById('submit-btn');
form.addEventListener('submit', async (e) => {
e.preventDefault();
submitBtn.disabled = true;
submitBtn.textContent = 'Sending...';
try {
const res = await fetch('https://voieform.com/f/pr_live_x92a', {
method: 'POST',
body: new FormData(form),
headers: { 'Accept': 'application/json' }
});
const data = await res.json();
if (data.success) {
statusMsg.style.color = '#34d399';
statusMsg.textContent = 'Thank you! Your message has been sent.';
form.reset();
} else {
statusMsg.style.color = '#f87171';
statusMsg.textContent = data.error || 'Submission failed.';
}
} catch (err) {
statusMsg.style.color = '#f87171';
statusMsg.textContent = 'Network error. Please try again.';
} finally {
submitBtn.disabled = false;
submitBtn.textContent = 'Send Message';
}
});
</script>
</body>
</html>Ready for React or Next.js?
Explore our official framework SDK for hook integrations.
Need help?
Contact Support