Contact Forms in Lovable – Best Practices for Professional Forms

Why Contact Forms Matter

A contact form is often the first direct touchpoint between your business and a potential customer. Poorly implemented forms – without validation, without feedback, without a privacy notice – cost trust and conversions.

In this tutorial, we'll show you how to create professional contact forms with Lovable that:

• Validate inputs (client-side and server-side)
• Provide visual feedback (success, error, loading state)
• Are GDPR-compliant (consent, privacy notice)
• Reduce spam (honeypot fields, rate limiting)
• Work responsively on all devices

Step 1: Create the Basic Form

Start with a clear prompt in Lovable:

Create a contact form with the following fields:
- Name (required)
- Email (required, with validation)
- Subject (dropdown: General Inquiry, Project Request, Support)
- Message (required, textarea)
- GDPR checkbox with link to privacy policy
- Submit button

Use shadcn/ui components and zod for validation.

Lovable generates a complete form with React Hook Form, a zod schema, and shadcn/ui components.

Step 2: Implement Validation Properly

Client-Side Validation with zod

Good forms validate during input, not just on submit. Here's what a robust schema looks like:

const contactSchema = z.object({
  name: z.string()
    .trim()
    .min(2, "Name must be at least 2 characters")
    .max(100, "Name must not exceed 100 characters"),
  email: z.string()
    .trim()
    .email("Please enter a valid email address"),
  subject: z.string()
    .min(1, "Please select a subject"),
  message: z.string()
    .trim()
    .min(10, "Message must be at least 10 characters")
    .max(2000, "Message must not exceed 2000 characters"),
  privacy: z.literal(true, {
    errorMap: () => ({ message: "Please agree to the privacy policy" })
  })
});

Validation Best Practices

Rule	Why?
Error messages next to the field	Users see immediately what's wrong
Validate on onBlur, not just onSubmit	Faster feedback
Define maximum lengths	Protection against abuse
Check email format	Fewer invalid entries

Step 3: Visual Feedback

Users need to know what's happening at all times. Prompt Lovable:

Add the following states to the form:
- Loading state: Button shows spinner and "Sending..."
- Success: Green toast with "Message sent successfully"
- Error: Red toast with "Something went wrong. Please try again."
- Disable the button while sending

Dos and Don'ts

• ✅ Do: Toast notifications for success/error
• ✅ Do: Disable button while sending
• ✅ Do: Reset form after successful submission
• ❌ Don't: Only use alert()
• ❌ Don't: Redirect users to another page
• ❌ Don't: Show errors without context

Step 4: Send Emails with Edge Functions

To actually receive form data as an email, you need an Edge Function – either via Lovable Cloud or a dedicated Supabase project. For production projects, we recommend a dedicated Supabase backend for full control over logs, monitoring, and scaling. Tell Lovable:

Create an Edge Function "send-contact-email" that:
- Accepts the form data
- Sends an email to info@mycompany.com (via Resend API)
- Validates inputs server-side
- Returns status 200 on success, status 400 on error

💡 Tip: Store the Resend API key as a secret in Lovable Cloud or your own Supabase project – never in code!

Step 5: Spam Protection

Classic CAPTCHAs annoy users. Better alternatives:

Honeypot Field

Add a hidden honeypot field to the form.
The field is called "website" and is invisible via CSS.
If it's filled in, the request is silently discarded.

Rate Limiting

Limit form submissions to a maximum of 3 per IP address
per hour in the Edge Function.

Time-Based Protection

Forms filled out in under 3 seconds are almost always bots. A simple timestamp check helps:

Store the timestamp when the form was loaded.
On submit: If less than 3 seconds have passed,
silently discard the request.

Step 6: GDPR Compliance

Privacy compliance is essential for any professional application:

• Consent checkbox – must be actively clicked
• Link to privacy policy – must be accessible
• Don't collect unnecessary data – only what's truly needed
• Don't store data in third-country services – or document accordingly

⚠️ This is not legal advice. Consult a data protection expert if you're unsure.

Step 7: Test Responsive Design

Test your form on different screen sizes:

Optimize the contact form for mobile:
- Input fields take full width
- Sufficiently large touch targets (min. 44px)
- Keyboard type adapts (email field opens email keyboard)
- Form doesn't scroll horizontally

Checklist: Professional Contact Form

Criterion	Status
Required fields marked	☐
Client-side validation	☐
Server-side validation	☐
Loading state on button	☐
Success/error feedback	☐
GDPR checkbox	☐
Honeypot field	☐
Rate limiting	☐
Responsive design	☐
Accessibility (labels, ARIA)	☐

Conclusion

A contact form is more than a few input fields. With Lovable, you can build a form in just a few prompts that meets professional standards – validated, secure, GDPR-compliant, and user-friendly.

The key is iterative refinement: Start with the basic form, then add validation, feedback, spam protection, and styling step by step. Lovable understands the context of your previous prompts and builds on them.

Want to learn more about Lovable? Read our beginner's guide, our Lovable Cloud vs. Supabase comparison, our article on form tools for Lovable projects, or visit the Lovable tool page.