Send emails with Bolt.new and Mailtrap

Learn how to integrate Mailtrap with your Bolt.new application to send transactional emails and manage contacts without writing complex code.

This article is based on Mailtrap's official tutorial on how to send email using Bolt.new.

Before we start

Required accounts

• Bolt.new account - to create applications and generate logic
• Mailtrap account - to send emails with high deliverability
• 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. Find your Account ID - You'll need this for creating contacts in Mailtrap. Find it in your Account Management section.
4. Create Custom Fields (if needed) - Set up Custom fields in Mailtrap if your forms have additional inputs you want to save.
5. Locate your List ID (optional) - If you want to organize contacts into specific lists, you'll need the list ID for contact management.

Important note: the prompts provided are based on our experience with Bolt.new as of August 2025. Since both Bolt.new and LLM models constantly evolve, you may need to adjust these prompts for your specific needs.

Configure Mailtrap Email API with Bolt.new

Step 1: Set up basic email sending

Start with this prompt in Bolt.new 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.

Documentation references:
- Readme https://github.com/railsware/mailtrap-nodejs/blob/main/README.md
- Implementation examples https://github.com/railsware/mailtrap-nodejs/tree/main/examples
- Email sending example: https://github.com/railsware/mailtrap-nodejs/blob/main/examples/sending/everything.ts

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
- Use MAILTRAP_ACCOUNT_ID environment 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

Database setup:
- 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 Bolt.new

Step 1: Connect Bolt.new to Supabase

1. In your Bolt.new project, click the Integrations button at the top right
2. Select Supabase from the available integrations
3. Follow the setup wizard to connect your accounts
4. Select the appropriate Supabase project for this integration
5. Confirm the connection is established

Step 2: Create a landing page with a contact form

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.

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

Page 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

Form Functionality:
- 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 Integration:
- 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 Bolt.new 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=[e-mail]
MAILTRAP_FROM_EMAIL=[e-mail]

Make sure to replace the placeholder values with your actual Mailtrap credentials.

Test your Mailtrap integration with Bolt.new

Step 1: Test form submission

1. Navigate to your landing page in Bolt.new Preview
2. Fill out the contact form with test data
3. Submit the form and verify the confirmation message displays
4. Check for any error messages in the console

Step 2: Verify email delivery

1. Check your inbox for the notification email
2. Verify the contact appears in your Mailtrap Contacts
3. Confirm the email content includes all form data
4. Review the entry in your Mailtrap Email Logs

Step 3: Check database integration

1. Verify the contact was saved to your Supabase contacts table
2. Confirm the Mailtrap contact ID was stored in the mailtrap_contact_id column
3. Check that Row-Level Security is properly configured

Bolt.new 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
• Use environment variables for all configuration values
• Implement proper input validation to prevent injection attacks

Email deliverability

• Use a verified domain for all outgoing emails
• Monitor your sender reputation in Mailtrap analytics
• Keep your contact lists clean and up-to-date
• Implement proper SPF, DKIM, and DMARC records
• Follow email content best practices to avoid spam filters

User experience

• Provide clear feedback when forms are submitted
• Include proper validation messages with helpful guidance
• Consider adding loading states during submission
• Make forms accessible with proper ARIA labels
• Implement error handling with user-friendly messages

Performance

• Use Supabase Edge Functions for server-side logic
• Implement proper error handling and retry mechanisms
• Consider rate limiting for form submissions
• Optimize API calls to minimize response times
• Monitor performance metrics and set up alerts

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. Bolt.new works best when you build features step-by-step rather than trying to create everything at once.

Error handling strategy

Always include comprehensive error handling in your Bolt.new applications. Email operations can fail for various reasons, so ensure your users receive appropriate feedback and your application handles failures gracefully.

Performance monitoring

Regularly review your Mailtrap analytics and Supabase performance metrics to identify optimization opportunities and ensure reliable email delivery.

Wrapping up

With Bolt.new and Mailtrap working together, you have a powerful foundation for building email-driven applications that can scale with your business needs. The combination of Bolt.new's rapid development capabilities and Mailtrap's reliable email infrastructure enables you to create professional email experiences quickly and efficiently.