Send Emails with Lovable and Mailtrap

Learn how to integrate Mailtrap with your Lovable application to send transactional emails, manage contacts, and create powerful email workflows without writing complex code.

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 Lovable and 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:

- Email should be sent via Mailtrap.io, as I have an account there.

- My Mailtrap verified domain is [your-domain.com]

- I want to send emails from hello@[your-domain.com]

- Save my Mailtrap API key in MAILTRAP_API_KEY secret.

- Include and use Mailtrap NodeJS SDK https://www.npmjs.com/package/mailtrap to send emails. Use the latest available version of the npm package.

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:

- Pass all my new users/form submissions to Mailtrap contacts.

- Use the latest version of Mailtrap NodeJS SDK to add contacts.

- My MAILTRAP_ACCOUNT_ID env variable.

- Use the same Token I use for production mode of Mailtrap, as it can also create Contacts.

- Pass the name from my form to name field in Mailtrap. Add users to MAILTRAP_LIST_ID.

- Create contacts table in Supabase with columns: id (UUID, primary key), name (text), email (text), message (text), created_at (timestamp), mailtrap_contact_id (text)

- Apply Supabase Row-Level Security (RLS) to restrict access to only authenticated users.

- Save form contacts info from submissions in DB and use Mailtrap NodeJS SDK to create a contact in Mailtrap.

- Save Mailtrap contact_id to mailtrap_contact_id column in contacts table.

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. Use URL 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:

Create a SaaS landing page with a contact form that collects the full name, email address, and message.

My SaaS is called [YourCompanyName], which helps customers [your value proposition]. Our form will capture leads who want to learn more about our services.

My landing page should have this structure:

- Hero section describing benefits with a button that scrolls to the form

- Testimonials/social proof/case studies section  

- Contact form

- About section

- Contact Info section

- Links to social networks

Make sure this form works like this:

- Add browser validation for the email input in the form, so only a valid email will pass

- Add minimum length of 50 characters for message field, and maximum length of 100 characters for Name input

- As a customer submits a form:

  - Send an email with form content to my email MAILTRAP_MY_EMAIL secret variable

  - Emails should be sent from form-submissions@[your-verified-domain.com] (MAILTRAP_FROM_EMAIL)

  - Create a contact in Mailtrap (name, email)

  - Pass value from form's "Full name" input to Mailtrap's custom field name

  - Add form submission info to Supabase contacts table

  - Display submission confirmation to visitor

  - Apply Supabase Row-Level Security (RLS) to restrict access to authenticated users

- Email should be sent via Mailtrap using:

  - My Mailtrap account MAILTRAP_ACCOUNT_ID (store in Supabase Secrets)  

  - Mailtrap NodeJS SDK for creating contacts and sending emails

  - Save Mailtrap API key in MAILTRAP_API_KEY secret

Plan step-by-step, verify results after each step. Write code in Typescript, generate atomic files in the Supabase Edge function for easier debugging.

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.