Send emails with Bolt.new and Mailtrap

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:

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

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=your-email@example.com

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

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 yourMailtrap 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.