Skip to Navigation
Want to handle contact form or transactional submissions in your Bubble app with a robust workflow without writing a single line of code? Say no more!
In this comprehensive tutorial, I’ll walk you through creating a simple contact form in Bubble.io that sends emails using Mailtrap’s Email API via Bubble’s API Connector plugin.
Of course, I’ll make sure to cover every step, from designing the form (no coding required) to configuring the API call for sending plain text emails, HTML emails, emails with attachments, and multiple recipients. I’ll also show you how to test the setup with Mailtrap’s Testing Inbox.
Before building this project, make sure you have the following in place:
- Mailtrap Account: If you haven’t already, sign up for a free account since Mailtrap provides the Email API and the Email Testing inbox we’ll be using for this project.
- Basic Bubble Knowledge: Although you don’t need any coding skills to send emails in Bubble.io, and although we’ve covered the process step by step, if you get stuck, I advise you to check out Bubble’s documentation on building forms and using plugins.
Disclaimer: Every bit of the workflow and code in this article has been prepared by a developer and thoroughly tested before publication.
Create a bubble.io form
First, let’s create a Bubble.io application to work with. To do this, log in to your Bubble.io account, click on Create an app, enter your desired name, and hit Get started.
If you don’t have a paid account, you’ll be asked to activate the Free Trial or start with basic features, whatever is more convenient for you. However, since this is a demo, we’ll only use basic features throughout this article.
Then, let’s create a form to collect user input for the email. It will have three fields (Name, Email, Message) and a submit button. To build the form, you will need to drag and drop elements such as Input, Multiline Input, Button, and optionally Text.
So, start by selecting the Group container element in the Elements Tree sidebar of your editor’s page and drag it to the blank page. The Group container element allows you to group your inputs easily—for example, automatically position them vertically or handle spacing, margins and paddings in your form.
Then, to create the form elements, follow the next few steps:
- Add an input element for “Name” – Drag an Input onto the page. In its property editor, set the placeholder to “Name” (you can also add a text label “Name:” next to it). This will accept the sender’s name.
- Add an input element for “Email” – Drag another Input for the email address. Set its placeholder to “Email“.
- For better validation, set its content format to email so Bubble knows it should be a valid email format.
- Add a multi-line input for “Message” – Drag a Multi-Line Input (for a longer text) and set the placeholder to “Your message“. This will allow the user to type a message body.
- Add a Submit Button – Finally, add a Button element labeled “Send” (or “Submit“). This button will trigger the workflow to send the email.
And here’s an example of a simple contact form I created in Bubble.io, with text inputs for Name and Email, a multi-line input for Message, and a Send button. No custom code is needed for this form since I built everything with Bubble’s drag-and-drop editor.
Pro tips:
- Ensure each input has a unique name or placeholder so you can identify them in workflows.
- In dynamic data, Bubble will refer to these as Input Name’s value, Input Email’s value, etc.
- To add the “Contact Us” or any other title you want, simply use the “Text” visual element.
Send emails with email API
Next, we’ll set up the Mailtrap API integration to send an email when the user clicks Send.
To do this, I personally use Bubble’s API Connector plugin. This plugin (built by Bubble) lets you connect to external APIs by configuring requests with the required URL, headers, and body.
So now, let’s configure it to call Mailtrap’s send email endpoint:
1. Install the API Connector plugin
In your Bubble editor, go to the Plugins tab and click + Add plugins.
Search for “API Connector” (it’s an official Bubble plugin) and install it. Once installed, open the API Connector plugin interface from the Plugins tab.
2. Configure the Mailtrap “Send Email” API call
In the API Connector, click “Add another API” to create a new API integration. Name it something like “Mailtrap Email API“. Inside this API, open the call form to set up the specific call for sending an email (we’ll call it “SendEmail“). Fill out the fields as follows:
- API Name: SendEmail (this is the name of the call).
- Use as: select Action (so we can trigger it in workflows).
- Data Type: choose JSON (since we’ll send JSON in the request body).
- HTTP Method: select POST (Mailtrap’s API uses POST to send emails).
- URL: copy/paste
https://send.api.mailtrap.io/api/send– this is Mailtrap’s Email API endpoint for sending messages.
3. Specify the headers and JSON body that Mailtrap requires for this API call:
The three headers:
- Content-Type: application/json (tells the API we are sending JSON data).
- Accept: application/json (we expect JSON response).
- Api-Token: <your_mailtrap_api_token> (this is your Mailtrap API authentication token for authenticating requests, which you can find by navigating to Sending Domains > Integration > API).
And here’s the JSON body:
- Body Type: Choose JSON (this enables Bubble’s JSON editor where we can input the request body as JSON).
- Body (JSON object): Here we will enter the JSON payload that Mailtrap needs for sending an email. Mailtrap’s API uses a JSON structure to define the email sender, recipients, subject, and content. For a basic plain text email (I’ll cover HTML in the following chapter), an example JSON body would look like this:
{
"from": {
"email": "you@yourdomain.com",
"name": "Your Name"
},
"to": [
{
"email": "<recipient_email>",
"name": "<recipient_name>"
}
],
"subject": "Hello from Bubble/Mailtrap",
"text": "We have received your message (<message>). Thank you for contacting us!"
}JSON breakdown:
from: The sender’s email and name. (In our example, we use you@yourdomain.com with name. Replace with your own domain accordingly).to: An array of recipients. Here we have one recipient with an email and name. We’ve used Bubble’s dynamic placeholders<recipient_email>and<recipient_name>which we will populate with the form inputs.subject: The email subject line (plaintext).text: The body of the email in plain text. We use a placeholder<message>which will be replaced by the Message input’s value from the form.
Bubble’s API Connector allows dynamic values in the JSON by enclosing them in < >. As the Bubble team explains, any text in angle brackets in the body JSON will turn into a parameter that you can fill dynamically when the call runs. In our body, <recipient_email>, <recipient_name>, and <message> will become dynamic fields.
3. Handling the parameters
After inserting the placeholders in JSON, the API Connector will list these as Body parameters below the editor. You should see parameters for recipient_email, recipient_name, and message.
Then, un-check the “Private” box for each of these, so they can be provided in the workflow (unchecking “Private” exposes the field in the action form).
Configuring the Mailtrap SendEmail call in Bubble’s API Connector. We set the POST URL and headers (including the Api-Token for authentication) and define the JSON body with dynamic placeholders. The API Connector automatically creates body parameters (message, recipient_email, recipient_name) for the placeholders, which will be filled in at runtime.
4. Initialize call and connect the API
Double-check that you’ve entered your actual Mailtrap API token in the Api-Token header (the token is a long string). With this configuration, we’ve essentially taught Bubble how to call Mailtrap’s send email API with dynamic data.
Before we connect our API to a button click action, please make sure that you have successfully initialized the call otherwise the system won’t see your API. To do that, click Initialize call at the bottom of your form.
Pro tip: You can temporarily fill your body parameters to avoid errors when initializing a call.
As soon as you’ve received Returned values, click Save. This will allow your workflows to track and connect this API.
After the call has been initialized, please clear the body parameter values. They will be passed using the form values.
5. Create a workflow to trigger the API call
Now that your Mailtrap SendEmail API call is configured in the API Connector, you need to create a workflow that triggers this call when the user clicks the Send button on your form.
In the Bubble.io editor, switch to the Workflow tab (at the top of the editor). Here, add a new event for your button by selecting “An element is clicked” (under the Elements events category) and choosing your Send button. This will create a workflow event titled “When Button Send is clicked“, indicating that the workflow will run whenever that button is pressed.
6. Add the email-sending action
Next, within this new workflow event, add an action to actually send the email via Mailtrap. Click “Click here to add an action”, go to the Plugins section of the action menu, and select “Mailtrap – SendEmail”. This is the API call you set up earlier.
Bubble will then open an action dialog where you can enter values for the fields you defined (e.g., recipient email, name, and message body).
In the Mailtrap – SendEmail action popup, fill in each field with the dynamic data from your form’s input elements. For example:
- Set the (body) recipient_email field to the Email input’s value (e.g. Input Email’s value)
- Set the (body) recipient_name field to the Name input’s value (e.g. Input name’s value)
- Set the (body) message field to the Message input’s value (e.g. Input message’s value)
This mapping ensures that the actual text the user entered in the form (their name, email address, and message) gets passed to Mailtrap when the API call runs.
How it works ⚙️
With this workflow in place, your form is now connected to the Mailtrap API call. So when a user fills out the form and clicks the Send button, Bubble will trigger the “Mailtrap – SendEmail” action and send the email through Mailtrap.
Now, let’s try to send a simple email by submitting the form. In the UI Editor, click the Play button in the header.
Then, simply fill out and submit the form.
If you’ve followed everything correctly, you should receive an email in Mailtrap Email Logs.
Send HTML email
By default, the JSON we used in the previous chapter sends a plain text email via the "text" field. If we want to send an HTML-formatted email (for richer formatting, images, links, etc.), Mailtrap’s API allows an "html" field in the JSON.
So, all you have to do to send an HTML email is replace the "text" field with "html", which should contain a string with HTML content.
Notes:
- You can also add an
"html"field in addition to"text"as is according to the best industry practices since some recipients’ clients might not be able to render HTML. - Before you update, make sure to switch Body type from JSON to Raw. Otherwise, your body parameters will be messed up since HTML tags actively use < > symbols. Also, again, make sure your parameters are public.
Then, make sure to replace your dynamic values in your body from this format <value> to this format _*_value_*_. This way, we can safely use both dynamic values and HTML code in our setup. For your convenience, here’s a code snippet you can use:
{
"from": {
"email": "you@freelance.mailtrap.link",
"name": "Your Name"
},
"to": [
{
"email": "_*_recipient_email_*_",
"name": "_*_recipient_name_*_"
}
],
"subject": "Hello from Bubble/Mailtrap",
"text": "We have received your message (_*_message_*_). Thank you for contacting us!",
"html": "<h1>Welcome!</h1><p>This is a <strong>HTML</strong> email.</p><br />_*_message_*_"
}This approach allows Bubble to safely track body parameters while using HTML code.
Finally, let’s try to send an HTML email when submitting the form. In the UI Editor, click the Play button in the header.
Fill and submit the form.
You should receive a new HTML email in Mailtrap Email Logs.
Send emails with attachments
Mailtrap’s API supports sending attachments by including an "attachments" array in the JSON payload. Each attachment in the array is an object that includes the file’s content (as a Base64-encoded string), a filename, and the MIME type.
To send an email with an attachment, simply add an "attachments" field to your JSON.
Let’s update body to include the new attachments property. If we want to pass user’s attachment to it, let’s use _*_file_*_ and _*_filename_*_ dynamic values. Make sure to unmark them as private. In the attachment configuration, you will have filename, content and disposition properties. disposition has to be attachment.
To save you the hassle, here’s a code snippet you can copy directly:
{
"from": {
"email": "you@freelance.mailtrap.link",
"name": "Your Name"
},
"to": [
{
"email": "_*_recipient_email_*_",
"name": "_*_recipient_name_*_"
}
],
"subject": "Hello from Bubble/Mailtrap",
"text": "We have received your message (_*_message_*_). Thank you for contacting us!",
"html": "<h1>Welcome!</h1><p>This is a <strong>HTML</strong> email.</p><br /><message>",
"attachments": [
{
"filename": "_*_filename_*_",
"content": "_*_file_*_",
"disposition": "attachment"
}
]
}Now, let’s implement the actual file attachment in the form. Use File Uploader input similarly to how you used your other inputs. Your form should look like this.
In the Workflow tab, link your (body) file and (body) filename dynamic values. Make sure to set:
- value:encoded in base64 for file
- value’s filename for filename dynamic values
And just like that, you can send emails with attachments in Bubble.io. Try to run, fill out, and send your form similarly.
Let’s check the Mailtrap Email Logs—and voila, our email is there!
Send email to multiple recipients
To send an email to multiple recipients, you can simply include as many objects (recipients) as you want in the "to" array.
Let’s modify body accordingly:
{
"from": {
"email": "you@freelance.mailtrap.link",
"name": "Your Name"
},
"to": [
{
"email": "_*_recipient_email_*_",
"name": "_*_recipient_name_*_"
},
{
"email": "recipient2@example.com",
"name": "Another recipient"
}
],
"subject": "Hello from Bubble/Mailtrap",
"text": "We have received your message (_*_message_*_). Thank you for contacting us!",
"html": "<h1>Welcome!</h1><p>This is a <strong>HTML</strong> email.</p><br /><message>",
"attachments": [
{
"filename": "_*_filename_*_",
"content": "_*_file_*_",
"disposition": "attachment"
}
]
}This way, emails can be delivered to multiple recipients at once.
Test emails and email sending
With the form in place and the API call configured, the final step is to tie everything together in a workflow and test our email-sending functionality. This is an industry-standard practice that ensures your:
- Domain won’t get blacklisted for spam.
- Test emails won’t land in customers’ inboxes.
- Emails will look the way you intend them to.
To do all of the above, I personally use Mailtrap Email Testing, which is another essential part of Mailtrap Email Delivery Platform.
With Email Testing, I can inspect the HTML/CSS of my emails and easily remove/fix any faulty lines of code, preview how my messages look on different devices or email clients, and more.
Now, let me show you how it works real quick! To start testing emails in the Bubble.io setup we’ve configured in this article, all you need to do is:
- Create a free Mailtrap account.
- Navigate to Email Testing and choose your inbox.
- Find the Api Token and API URL + Inbox ID.
- Copy both the Api Token and API URL + Inbox ID as in the example below:
Pro tip: To make it more flexible, you can even create a separate API call in the API Connector plugin to handle email testing apart from the main email-sending logic. You can even create separate forms to test your emails before sending them, or you can re-use the same form, and simply replace the API in your Workflow with your testing API call. 💡
From now on, every email sent will only appear in the Email Testing inbox, which allows you to:
- Preview how your emails look in plain-text or HTML on different devices.
- Inspect if your emails are rendered properly by different email clients (e.g., Gmail, Outlook, Yahoo, etc.)
- Get some useful tech details like SMTP transactions and email header info.
- Use the detailed list of spam points to fix my emails, avoid spam filters, and prevent email deliverability issues once your app moves to production.
To try out these and other features make sure to check out the free plan Mailtrap offers, with which you can test 100 emails per month!
Wrapping up
And that’s it!
Your Bubble app can now send emails via the Mailtarp API while providing you the scalability and control you need to reach your recipient’s inboxes just in time!
Want to sharpen your email skills even further? If so, be sure to dive into our blog, where we have related articles such as:
