Complete Fields
Name, email, phone, message - everything you need
ContactForm - Ready-to-Use Contact Page
A complete contact form ready to drop into your contact page. Name, email, phone, message—zero configuration required. Netlify Forms integration included.
Everything You Need, Nothing You Don't
The ContactForm component includes all the fields a business needs: name, email, phone, and message. It integrates with Netlify Forms for submission handling, includes spam protection, and tracks submissions with Google Analytics.
Live Demo
Note: This form is live and functional on deployed sites with Netlify Forms enabled.
Usage
Zero Configuration
Just import and use. No props required - everything is pre-configured:
import ContactForm from '@theme/components/forms/ContactForm.astro';
<ContactForm />Netlify Forms Setup
1. Deploy to Netlify
Forms are automatically detected during deployment. No manual setup needed.
2. View Submissions
Netlify Dashboard → Forms → contact. All submissions appear here.
3. Email Notifications
Configure email alerts: Netlify Dashboard → Forms → Form notifications.
4. Spam Filtering
Built-in Netlify spam filtering + honeypot field. No extra setup required.
Create Success Page
The form redirects to /contact/success after submission. Create this page:
File: src/pages/contact/success.astro
---
import Layout from '@theme/layouts/Layout.astro';
---
<Layout title="Thank You!">
<section class="py-20 text-center">
<h1>Thank You!</h1>
<p>We've received your message and will get back to you soon.</p>
<a href="/" class="btn-primary">Back to Home</a>
</section>
</Layout>ContactForm Features
Privacy Consent
GDPR-compliant checkbox for legal protection
GA4 Tracking
Automatic form submission tracking
Spam Protection
Honeypot field and Netlify spam filtering
Add to Your Contact Page
Drop this form into any page. Submissions go straight to your Netlify dashboard.