SMTP
This page describes how to use the SMTP datasource to create and send emails from your Appsmith app.
Connect to SMTP

To add an SMTP datasource:
- Click the (+) sign in the Explorer tab next to Datasources.
- On the next screen, select the SMTP button. This creates the datasource and takes you to the datasource's configuration page.
- Enter the URL for your SMTP server into the Host Address field.
- Enter the port for your SMTP server into the Port field.
- Enter your account's username in the Username field. Depending on your SMTP provider, this might be your email address.
- Enter your password into the Password field.
Some SMTP providers use a multi-factor authentication flow and may require you to generate a special password specifically to authenticate your Appsmith app. For example, Gmail SMTP requires you to generate an app password to use instead of your usual password.
- Once you've entered your credentials, click the Test button to check that they are working.
- Click Save when you are finished, and your datasource is ready for queries.
Create queries

You can write queries to send emails through your SMTP server by selecting the + New Query button on the SMTP datasource page, or by clicking (+) next to Queries/JS in the Explorer tab and selecting your SMTP datasource. You'll be brought to a new query screen where you can write a query.
You can write queries to send emails through your SMTP server by selecting the + New Query button on the SMTP datasource page, or by clicking (+) next to Queries/JS in the Explorer tab and selecting your SMTP datasource. You'll be brought to a new query screen where you can write a query.
You can write queries to send emails through your SMTP server by selecting the + New Query button on the SMTP datasource page, or by clicking (+) next to Queries/JS in the Explorer tab and selecting your SMTP datasource. You'll be brought to a new query screen where you can write a query.
You can write queries to send emails through your SMTP server by selecting the + New Query button on the SMTP datasource page, or by clicking (+) next to Queries/JS in the Explorer tab and selecting your SMTP datasource. You'll be brought to a new query screen where you can write a query.
Send email
This action sends an email through your SMTP server.
When the query is successful, you'll recieve the following response:
{
"message": "Sent the email successfully"
}
Example
Use a Form widget to write and send an email.
Setup:
Create an SMTP datasource and a query SendMail
based on it.
Configure the email form:
- Create a Form widget
EmailForm
, and update the title toSend Mail
. - In the form's body area, create widgets to accept input for the email's configuration fields such as To email(s), From email(s), Subject, etc.
- Use Rich Text Editor widget for the Body field, and a Filepicker widget for the Attachment(s) field.
- Be sure to name each widget so that you can reference it later in your query.
- In the properties for the form's submit button, configure the onClick action to execute your
SendMail
query.
Configure the query:
- In each configuration field, reference the appropriate widget from the Form that contains its intended value. For example, you can use the Form's
data
property, followed by the input widget's name and the property that holds its content:// in the "From email" field
{{ EmailForm.data.FromInput.text }}// in the "Body" field
{{ EmailForm.data.BodyEditor.text }}// in the "Attachment(s)" field
{{ EmailForm.data.AttachmentPicker.files }}
Once you fill in your form fields, your query is ready to send the email.
Parameters
Property Name | Description | Type |
---|---|---|
From email | Sets the email address that appears as the message sender. | Mandatory |
Set Reply To Email | Toggles the Reply to email field. | Optional |
Reply to email | Sets an email address that recieves all replies to your email. | Optional |
To email(s) | Sets the email addresses that recieves your email. For multiple recipients, separate the addresses with commas. | Mandatory |
CC email(s) | Sets the email address that recieves a CC (carbon copy). For multiple CC recipients, separate the addresses with commas. | Optional |
BCC email(s) | Sets the email address that recieves a BCC (blind carbon copy). For multiple BCC recipients, separate the addresses with commas. | Optional |
Subject | Sets the email's subject line. | Optional |
Body | Sets the main body of the email. Supports rich text and HTML. | Optional |
Attachment(s) | Attaches one or more files to the email. Expects an array of file objects. | Optional |