Workshop - Workshop: Add a Contact Form & Transactional Email
In this session, you’ll add a real contact form to your app and connect it to Supabase + Resend to send confirmation and notification emails.
Book WorkshopWhat will I walk away with?
- ✅ Contact Us page live
- ✅ User inquiry email confirmation
- ✅ User inquiry notifications to your inbox
Setup Steps
Supabase Setup
Required for email distribution.
Step 1 - Sign up for Supabase
Step 2 - Create a new porject
Step 3 - On Lovable click Supabase Connect
Supabase allows 2 free projects. Follow Lovable walkthrough steps to connect to the created project.
Resend Setup
Required for email distribution.
Step 1 - Go to Resend
Step 2 - Sign up, create and save API key, verify domain, and add sender (e.g. inquiries@yourdomain.com)
Create Contact Us page
Step 1 - Create new feature prompt
Step 2 - Apply new feature prompt
Improve the Email template
Use ChatGPT to generate an email template.
Recommendations:
- Preferable to prompt with brand context - screenshots of your landing page, logo, brand colours, etc.
- Limit the scope of ChatGPT prompts.
Build this (and more) with us
The £1 workshop walks through this and 4 other key sessions.