Send emails with Lovable and Mailtrap

Step-by-step guide on how to integrate Mailtrap with your Lovable application.

Mailtrap is an email-sending solution for developer and product teams. Focused on fast delivery and high inboxing rates for transactional and promo emails. Provides highly customizable API and 24/7 tech support.

This integration is built to:

  • Send emails such as transactional messages (e.g., order confirmations, notifications, etc).
  • Manage contacts and push user information to Contacts so you can later send campaigns to them or use Automations.

Your prompts must be adjusted to your needs.

Those prompts are created based on our experience in Aug'25 with Lovable and GPT-5.

It might be different for you, as Lovable and LLM models constantly evolve.

Before we start:

  • Create Lovable, Mailtrap, and Supabase accounts.
    • Lovable to create contact forms and generate our logic.
    • Supabase to securely store API keys.
    • Mailtrap to send emails and manage contacts.
  • Add and verify your email sending domain since Mailtrap allows you to send emails only from a verified domain.
  • Make sure your API Token has admin access level to that domain and contacts.
  • Create Custom fields in Mailtrap in advance if your form has more inputs and you want to save their content in Mailtrap. You might also need a List ID.
  • Provide your Account ID as it's required for creating a contact in Mailtrap. You can find it here.

Send emails using Mailtrap Email API/SMTP

To send emails from your project, you can use a prompt like this:

Add your leads, users to Mailtrap Contacts

As you add contacts to Mailtrap, you can send Campaigns to them, manage them, create segments, and use them in Automations (e.g., welcome sequences, thank you messages, etc.).

Then, feel free to use the following prompt:

  • Pass all my new users/ form submissions to Mailtrap contacts.
  • Use the latest version of Mailtrap NodeJS SDK (https://www.npmjs.com/package/mailtrap, https://github.com/railsware/mailtrap-nodejs/blob/main/README.md ) to add contacts. Here is an example: https://github.com/railsware/mailtrap-nodejs/blob/main/examples/contacts/everything.ts
  • My MAILTRAP_ACCOUNT_ID env variable.
  • Use the same Token I use for the 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 such columns as:
    • 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 (Mailtrap provides it with a response) to mailtrap_contact_id column in contacts table.

Integration example: form submissions, email notifications, adding contacts

In this example, we'll use Lovable to create a demo landing page with a form to capture leads, get notifications about form submissions to your email, and add leads' info to Mailtrap Contacts so you can send them updates later.

Before we start:

  • This guide is only a reference and was created to showcase Mailtrap.
  • The guide is done based on our own experience with Lovable. It might be different for you.
  • Do not store sensitive information in code; use Secrets instead.

Pro tip: To avoid Supabase's hourly limits on email sending, adjust your Supabase project's SMTP settings with Mailtrap. Follow this guide.

Step 1. Connect to Supabase

Lovable uses Supabase (built-in integration) to manage authentication, database, and backend.

To connect your Lovable project to your Supabase account, click on the Supabase icon in the upper-right corner of a new project. This will open the following window, where you need to enter a project name, password, and choose the region closest to your recipient.

After clicking on Create new project, Lovable will confirm that you have successfully connected your app to Supabase.

Note: For more information on integrating Supabase, follow the official Lovable guide.

Step 2. Create a landing page

The landing form we'll create will have the following functionality: each form submission will create a contact in Mailtrap, and you'll get an email notification about each submission to your email.

We'll use a prompt like this:

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


// Note: provide more info about your company, if you have any screenshots, design files, copy - mention all of that and attach


<company_info>

My SaaS is called Acmecomp-deliverability.com, which is about helping our customers to ensure their emails are delivered without problems. Our form will capture leads who want to talk about our deliverability consultation services. We have already helped 120 companies and have a few case studies we want to showcase.

</company_info>


My landing page should have such a structure:


<website_structure>

  • The hero section describes my benefits with a button that scrolls to the form
  • Testimonials / social proof/case studies
  • Form
  • About section
  • Contact Info section
  • Links to social networks (LinkedIn, Instagram)

</website_structure>


// Note: provide your info about domains, emails, account ID, keys to use, etc. If you add keys manually to Supabase Secrets, mention that (or Lovable might ask you to add it there directly or via its integration). You might also keep email_from and email_to in the Secrets for an easy change across the project


Make sure this form works like this:

<form_functionality>

  • Add browser validation for the email input in the form, so only a valid email will pass
  • Add a minimum length of a message field of 50 characters, and a maximum length for the Name input of 100 characters.
  • As a customer submits a form (each form submission):
    • Send an email with its content to my email MAILTRAP-MY-EMAIL secret variable
      • Emails should be sent from form-submissions@demoatmailtrap.com (MAILTRAP-FROM-EMAIL ), as demoatmailtrap.com is my verified domain in Mailtrap
    • Create a contact in Mailtrap (name, email).
    • Pass value from the form's "Full name" input to Mailtrap's custom field name .
    • Create contacts table in Supabase with such columns as:
      • id : UUID, primary key
      • name : text
      • email : text
      • message : text
      • created_at : timestamp
      • mailtrap_contact_id : text
    • Add info about a form submission to the Supabase contacts table as well, and write info if the contact was submitted, its Mailtrap Contact ID (Returned with a response). Apply Supabase Row-Level Security (RLS) to restrict access to only authenticated users.
    • As the form is submitted, display that state and notify the visitor that it's submitted.
  • Email should be sent via Mailtrap, as I have an account there:
    • My Mailtrap account is MAILTRAP_ACCOUNT_ID (from it in Supabase Secrets)
    • Here is a link to Mailtrap NodeJS SDK and its documentation: https://github.com/railsware/mailtrap-nodejs. Use it to create contacts and send emails to myself. Save Mailtrap API key in MAILTRAP_API_KEY secret.
    • Include and use Mailtrap NodeJS SDK (https://www.npmjs.com/package/mailtrap) to send emails and create a contact in Mailtrap. Use the latest available version of the npm package. Its documentation:

</form_functionality>

Plan step-by-step, verify results after each step. Verify all steps work before continuing with the next one. Write code in Typescript, generate atomic files in the Supabase Edge function so it's easier to verify and debug.

Simply copy/paste the command in Lovable and hit enter.

Lovable will prepare an implementation plan and show it to you. As you verify it, you can proceed with its implementation.

Next, you need to add your credentials:

Lastly, apply proposed changes so DB table can be created:

Step 3. Send emails via form

We got a landing page with a form, so let's test it.

Upon submitting the form, you should see the following message, but keep in mind that it's OK not to work from the start sometimes.

In case you do encounter any issues, check the Edge Functions log errors, pass it to Lovable, and ask to fix.

After a few iterations of fixes, by passing logs from the Edge Function and again examples of Mailtrap NodeJS SDK, we see the contact in our Mailtrap Contacts.

And here it is in the Gmail inbox, which was set in MAILTRAP_MY_EMAIL .

And here it is in the Mailtrap Email Logs.

Note: Your Secrets in Supabase will look like:

MAILTRAP_ACCOUNT_ID=1318706

MAILTRAP_API_KEY={{your-mailtrap-api-key}}

MAILTRAP_MY_EMAIL=myemails@example.com

MAILTRAP_FROM_EMAIL=form-submissions@demoatmailtrap.com
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us