Add a Working Contact Form to Any Alpine.js Project
Connect your Alpine.js forms to Lucid Forms. Process form submissions and handle states asynchronously without building a backend, configuring servers, or writing API routes.
<form action="https://api.lucidforms.co/f/{form_id}" method="POST"><input type="email" name="email" placeholder="Email" required /><textarea name="message" placeholder="Message" required></textarea><button type="submit">Send</button></form>
How it works
Whether you wrote your Alpine.js HTML code by hand or used an AI builder, connecting a working contact form takes under 2 minutes.
Get your form link
Sign up for free and copy your unique form link from the Lucid Forms dashboard.
Add it to your website
Paste the form link into your HTML code, or give it to an AI tool like Cursor, Claude, or Lovable and let it build the form for you.
Receive submissions
Every time someone fills out your form, you'll get a notification in your inbox, Slack, or Notion, with built-in spam filtering.
Let AI Build Your Alpine.js Contact Form
Give your form link to any AI website builder. It generates the Alpine.js code. Lucid Forms handles the submissions.
Create a modern, styled Alpine.js contact form component.
Use this submission endpoint:
https://api.lucidforms.co/f/{form_id}
Requirements:
- Include name, email, and message fields
- Use standard form POST action or x-on:submit.prevent fetch handler
- Make it responsive with Tailwind CSS
Everything your Alpine.js contact form needs to actually work
Most Alpine.js contact forms look great and are highly interactive, but still need a backend API or mail server to process submissions. Lucid Forms handles the backend, routing entries to your inbox, Slack, Notion, and more.
Get submissions in your inbox
Every form entry goes straight to your email. No setup, no configuration: it just works from the moment you connect.
No servers or databases to maintain
Keep your site 100% static and lightweight. No serverless functions or node servers needed. Host on GitHub Pages, Netlify, Vercel, or custom static hosting.
Spam protection built in
Bots get blocked automatically. Your visitors never see annoying CAPTCHAs, and your inbox stays clean.
Send form data anywhere
Route submissions to Notion, Google Sheets, Slack, or any webhook. Set it up once and every entry flows to the right place.
Lucid Forms vs. Doing It Yourself
See why thousands of developers skip the headache and use Lucid Forms instead.
| Feature / Requirement | The Alpine.js DIY Approach | Lucid Forms Backend |
|---|---|---|
| Server Setup | Rent databases, configure Node.js/PHP backend scripts, manage infrastructure | Zero Server Setup (✓) |
| Email Delivery | Configure SMTP/mail servers, manage deliverability and bounce rates | Instant Email Delivery (✓) |
| Static Hosting Support | Requires custom backend APIs or serverless functions to receive requests | 100% Static & Edge Compatible (✓) |
| AI-Generated Code Support | AI cannot write secure database integrations or configure mail servers | Works Out-of-the-box (✓) |
| Spam Protection & Filtering | Integrate CAPTCHA packages, manage secret keys, verify tokens | Automatic Honeypots & ML (✓) |
Add Contact Forms to Astro, Next.js, and Plain HTML Sites
Connect your forms effortlessly. Lucid Forms provides platform-agnostic endpoints that work across all modern hosting environments, frontend frameworks, and AI builders.
Plain HTML
Paste the form endpoint directly into your index.html. No dependencies or frameworks needed.
Astro
Add contact forms to Astro components. Works perfectly with serverless adapters or static exports.
Next.js & React
Submit React form states or use standard post actions in your Next.js app router forms.
Webflow & CMS
Connect Webflow forms, Wix custom inputs, or WordPress layouts to capture leads directly.
AI-Generated Sites
Claude, Cursor, ChatGPT, and Lovable can write static frontend code but need a backend to process data.
Static Site Gen
Add contact pages to Hugo, Jekyll, Gatsby, or Vitepress sites. Keep your site completely static.
Wix & Shopify
Add custom contact forms to e-commerce templates and site builders without extra plugins.
Deploy Anywhere
Host on Vercel, Netlify, Cloudflare Pages, GitHub Pages, or shared hosting. The forms will work.
Frequently Asked Questions
Everything you need to know about setting up Alpine.js contact forms, spam protection, and framework support.
How do I make my Alpine.js contact form actually send messages?
Alpine.js runs in the client browser and cannot send emails on its own. With Lucid Forms, you can connect your form using a simple HTML <form action='endpoint' method='POST'> tag, or use Alpine's x-data and x-on:submit to fetch/AJAX the submissions. Lucid Forms handles the notifications, integrations, and spam protection.
Do I need a server or custom API routes to handle Alpine.js forms?
No. You do not need to write server-side APIs or server routes. Simply submit your Alpine.js form data directly to Lucid Forms, and we will forward it to your email, Slack, Notion, or Google Sheets.
Can I use Alpine's x-model with Lucid Forms?
Yes! You can bind your form inputs to Alpine's reactive state using x-model, intercept the submission using @submit.prevent, and send a JSON payload or FormData to our API endpoint.
What hosting platforms are compatible with Alpine.js forms?
Since Alpine.js sites are fully client-side and static, they can be hosted anywhere, including GitHub Pages, Netlify, Vercel, Cloudflare Pages, S3, or shared hosting. Your forms will work perfectly in all of them.
Does Lucid Forms protect Alpine.js forms from spam?
Absolutely. All Lucid Forms endpoints come equipped with automated spam protection. We utilize silent honeypot fields, IP rate limits, and machine learning models to block bots without requiring annoying user CAPTCHAs.
Does this work with code generated by AI tools like Claude or Lovable?
Yes! Simply prompt your AI development tool to build a styled Alpine.js form component that posts to your unique Lucid Forms URL. It will write the template and interactive script, and Lucid Forms will handle the submissions.
Your website is ready.
Connect your Alpine.js contact form in 2 minutes.
No servers, no coding, no headaches. Join thousands of developers who use Lucid Forms.
✓ 10,000 submissions included