Adding a contact form to your vibe-coded website
July 25, 2026
Building web applications with AI coding tools like Cursor, Claude, v0, and Lovable has transformed how fast we ship. You can describe a layout, design a clean interface, and have a complete landing page running in minutes.
Until you click "Submit" on the contact form.
AI models excel at generating frontend markup, but an HTML form requires an actual server endpoint to receive submissions, filter automated bots, and dispatch verified notifications to your inbox. When you ask an AI assistant to "make the form work," it often over-engineers the solution: suggesting serverless functions, spinning up database tables, or worst of all, pasting private email API keys directly into public client-side JavaScript.
The 60-second fix for AI-built websites
You don't need a custom backend or exposed credentials. Connecting your AI-generated site to NormForms takes two quick steps:
Step 1: Create a free NormForms account (takes ~30 seconds). You will receive an endpoint URL formatted like normforms.com/f/YOUR_TOKEN.
Step 2: In your NormForms dashboard, click the AI prompt tab and copy the pre-formatted prompt. Paste it directly into your AI assistant:
Update the contact form to submit to: https://normforms.com/f/YOUR_TOKEN 1. Set the form method to POST and action to the endpoint URL. 2. Include an invisible honeypot field for spam prevention: <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off"> 3. Use semantic HTML inputs with matching label elements and autocomplete attributes. 4. Do not add client-side JavaScript or external libraries; standard HTML form submission works out of the box.
AI assistants follow this specification seamlessly because it provides the two exact details they cannot invent: your destination endpoint and your spam honeypot.
Why this approach is safer and faster
- Zero secret credentials in generated code: The endpoint URL is public by design and protected by your domain origin lock. There are no private API keys or SMTP passwords for an AI to accidentally expose in your repository.
- Schema-free flexibility: Ask your AI assistant to add a budget selector, a timeline dropdown, or custom intake questions. NormForms automatically captures any field names the AI creates without requiring database migrations.
- Fail-safe lead backup: Every submission is recorded in your secure dashboard before email dispatch. If your email provider experiences downtime, your leads are preserved.
-
Automatic test mode: When developing locally on
localhost, submissions are delivered with a [Test] subject prefix and consume 0 quota, allowing you and your AI assistant to verify the wiring without spending your monthly limit.
Machine-readable instructions for AI agents
If you use autonomous coding agents, point them directly at normforms.com/llms.txt. It contains a complete machine-readable specification of endpoints, honeypot requirements, test mode rules, and error codes so agents can integrate NormForms correctly on the first attempt.