Contact Form Setup Guide
The contact form uses Resend as the email service provider. Resend offers:
Free tier with 100 emails/day
Simple API integration
Reliable email delivery
Getting your Resend API key
Step 1: Create a Resend account
Go to resend.com
Create your account using email or GitHub
Step 2: Navigate to API keys
Once logged in, click on API Keys in the left sidebar
Or go directly to: resend.com/api-keys
Step 3: Create a new API key
Click Create API Key
Give it a name (e.g., "Contact Form")
Select Full access permission
Click Create
Step 4: Copy your API key
⚠️ Important: The API key is only shown once! Copy it immediately and store it somewhere safe
Configuring secrets in Lovable
You need to add two secrets to your Lovable project:
Step 1: Open backend settings
In your Lovable project, click on the Cloud tab
Navigate to Secrets
Step 2: Add RESEND_API_KEY
Click Add Secret
Enter the name:
RESEND_API_KEYPaste your Resend API key as the value
Click Save
Step 3: Add CONTACT_EMAIL
Click Add Secret
Enter the name:
CONTACT_EMAILEnter the email address where you want to receive contact form submissions (e.g.,
contact@yourcompany.com)Click Save
Domain verification
Why verify a domain?
For testing, Resend provides a shared sender address (onboarding@resend.dev). However, for production use, you should verify your own domain.
How to verify your domain
Go to resend.com/domains
Click Add Domain
Enter your domain (e.g.,
yourcompany.com)Resend will provide DNS records to add to your domain
DNS records to ddd
You'll need to add the following records at your domain registrar (e.g., GoDaddy, Cloudflare, Namecheap):
Type | Name | Value |
|---|---|---|
MX | (varies) | (provided by Resend) |
TXT | (varies) | (provided by Resend) |
💡 Tip: DNS changes can take up to 48 hours to propagate, but usually complete within a few hours.
Once verified, you'll see a green checkmark next to your domain
Updating the sender address
After verifying your domain, update the edge function to use your domain:
Step 1: Locate the edge function
Open the file: supabase/functions/send-contact-email/index.ts
Step 2: Find the FROM address
Look for this line (around line 132):
Step 3: Update to your domain
Change it to use your verified domain:
Step 4: Save and deploy
Save the file. The edge function will automatically redeploy.
