Send Emails with Lovable and Mailtrap

Lovable is a platform that allows you to create everything from contact forms to whole websites and apps, all by using simple prompts. Combined with Mailtrap's robust email infrastructure, you can build sophisticated email functionality into your applications with ease.

This article is based on Mailtrap's official tutorial on how to send email using Lovableand Lovable’s tutorial.

Before we start

Required accounts

• Lovable account - to create contact forms and generate logic
• Mailtrap account - to send emails and manage contacts
• Supabase account - to securely store API keys and manage your database

Prerequisites setup

1. Verify your email sending domain - Mailtrap allows you to send emails only from a verified domain. Follow this guide to set up domain verification.
2. Get your API Token - Ensure your API Token has admin access level to your domain and contacts.
3. Create Custom Fields (if needed) - Set up Custom fields in Mailtrap if your forms have additional inputs you want to save.
4. Find your Account ID - You'll need this for creating contacts in Mailtrap. Find it in your Account Management section.

Important Note: The prompts provided are based on our experience with Lovable and GPT-5 as of August 2025. Since both Lovable and LLM models constantly evolve, you may need to adjust these prompts for your specific needs.

Configure Mailtrap SMTP/Email API with Lovable

Step 1: Set up basic email sending

Start with this prompt in Lovable to create a simple email sending functionality:

This basic setup will configure Mailtrap integration and prepare your environment for email sending.

Step 2: Manage Mailtrap Contacts automatically

Enhance your setup to automatically add form submissions to Mailtrap Contacts:

Step 3: Locate Your Mailtrap List ID (Optional)

If you want to add contacts to a specific list in Mailtrap:

1. Go to your List by clicking on it in Mailtrap
2. Check the URL - it will look like: https://mailtrap.io/contacts?filters=%5B%7B%22name%22:%22list_id%22,%22operator%22:%22equal%22,%22value%22:%5B23%5D%7D%5D
3. UseURL Decoder to decode the URL
4. Find your list ID in the decoded URL (in this example, it's 23)

Build a landing page in Lovable

Step 1. Connect to Supabase

1. In your Lovable project, click the Supabase icon in the upper-right corner
2. Enter your project name, password, and choose your preferred region
3. Click "Create new project" to establish the connection

Step 2. Create a landing page

Use this comprehensive prompt to build a complete SaaS landing page with email functionality:

Step 3. Configure your Mailtrap secrets

After Lovable creates your application, add these secrets in your Supabase project:

MAILTRAP_ACCOUNT_ID=your_account_id

MAILTRAP_API_KEY=your_api_key

MAILTRAP_MY_EMAIL=your-email@example.com

MAILTRAP_FROM_EMAIL=form-submissions@your-verified-domain.com

Test your Mailtrap SMTP/Email API integration

1. Submit a test form on your landing page
2. Check for confirmation message display
3. Verify the contact appears in your Mailtrap Contacts
4. Confirm you receive the notification email
5. Review the entry in your Mailtrap Email Logs

Lovable email sending best practices

Security

• Always store sensitive information in Supabase Secrets, never in code
• Enable Row-Level Security (RLS) on all database tables
• Regularly rotate your API keys

Email deliverability

• Use a verified domain for all outgoing emails
• Monitor your sender reputation in Mailtrap
• Keep your contact lists clean and up-to-date

User experience

• Provide clear feedback when forms are submitted
• Include proper validation messages
• Consider adding loading states during submission

Performance

• Use Supabase Edge Functions for server-side logic
• Implement proper error handling
• Consider rate limiting for form submissions

Pro Tips

• Avoid Supabase email limits: to bypass Supabase's hourly email sending limits, configure your Supabase project's SMTP settings to use Mailtrap. Follow this integration guide for detailed instructions.
• Prompt optimization: Start with basic functionality and iteratively improve your prompts. Lovable works best when you build features step-by-step rather than trying to create everything at once.

What's Next?

Now that you have basic email functionality set up, consider expanding your application with:

• User Authentication: Add login/signup flows with email verification
• Email templates: Create branded email templates for different types of messages. You can use Mailtrap's free email builder for that.
• Advanced analytics: Track email open rates, click-through rates, and conversions
• Multi-step forms: Break complex forms into smaller steps for better user experience
• A/B Testing: Test different email subject lines and content to optimize engagement

With Lovable and Mailtrap working together, you have a powerful foundation for building email-driven applications that can scale with your business needs.