Create an email template

With the Contact Service email service in place, the next step is to create an email template. This template defines the subject, content, recipient, and other important details of the emails we send.

To begin, we navigate to the Email Templates (opens new window) page, where we can create a new template. For this example, selecting the "Contact Us" template provides a structured starting point. While not required, setting the Template ID to contact_form in the settings can make it easier to reference in our tutorial.

The template's content consists of a subject line, a content editor, and various email fields. One of the key features of EmailJS templates is the ability to use dynamic variables, which allow us to insert values programmatically.

For instance, our template will include the following placeholders:

{{name}}
{{time}}
{{message}}

Here, name represents the sender's name, time captures the current timestamp, and message contains the actual message content. These variables ensure that each email is personalized based on the data provided at the time of sending.

The next step is defining the email fields.

• To Email field specifies the recipient's email address—in this case. In the tutorial, our personal email (e.g., [email protected]).
• From Name field is optional but can be set to the sender's name for clarity.
• From Email field determines the sender's email address as it appears to the recipient. If the default email address checkbox is enabled, EmailJS will automatically use the email associated with the selected email service.
• Reply-To field ensures that any responses go to the correct sender, typically set to {{email}}, representing the user's email address.
• Additionally, the Bcc and Cc fields allow sending copies of the email to different recipients. While CC (Carbon Copy) makes recipients visible to each other, BCC (Blind Carbon Copy) keeps addresses hidden. For this example, these fields can remain empty.

Once the template is configured, saving it finalizes the setup. Returning to the Email Templates page, we can now see the newly created Contact Us template, ready for integration into our application. With this in place, sending automated and personalized emails through EmailJS becomes seamless and efficient.