Skip to main content

SMTP

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

Connect to SMTP​

Configuring an SMTP datasource
Configuring an SMTP datasource

To add an SMTP datasource:

  1. Click the (+) sign in the Explorer tab next to Datasources.
  2. On the next screen, select the SMTP button. This creates the datasource and takes you to the datasource's configuration page.
  3. Enter the URL for your SMTP server into the Host Address field.
  4. Enter the port for your SMTP server into the Port field.
  5. Enter your account's username in the Username field. Depending on your SMTP provider, this might be your email address.
  6. Enter your password into the Password field.
note

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.

  1. Once you've entered your credentials, click the Test button to check that they are working.
  2. Click Save when you are finished, and your datasource is ready for queries.

Create queries​

Configuring an SMTP query
Configuring an SMTP 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.

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:

  1. Create a Form widget EmailForm, and update the title to Send Mail.
  2. 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.
    1. Use Rich Text Editor widget for the Body field, and a Filepicker widget for the Attachment(s) field.
    2. Be sure to name each widget so that you can reference it later in your query.
  3. In the properties for the form's submit button, configure the onClick action to execute your SendMail query.

Configure the query:

  1. 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 NameDescriptionType
From emailSets the email address that appears as the message sender.Mandatory
Set Reply To EmailToggles the Reply to email field.Optional
Reply to emailSets 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
SubjectSets the email's subject line.Optional
BodySets 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

Further reading​