Create an email template

Now we have the Contact Service email service, we need to create our email template, which will define the subject of our email, what content will it contain, where should it be sent to, etc.

Let's navigate to the Email Templates (opens new window), where we'll create a new template. We will go straight to the Settings and set the name as Contact Form, and the template ID as contact_form. This is not necessary, but it will be easier for our example. Now let's go back to Content, where we'll see the subject field, the content editor, and other email fields. Any field can contain dynamic variables, so we can set the value programmatically from our Javascript code! To make it easier to identify the different submissions we'll create a unique subject for each email, that will look something like Contact #4563.

We'll do this by adding a dynamic variable – Contact #{{contact_number}}. We are going to provide the value of the contact_number variable through the EmailJS SDK from our contact form page in the next step.

The content of the template will be pretty simple:

{{message}}

{{user_name}} ({{user_email}})

Where the message variable will contain the content of the message. The user_name and user_email are the user's name and user's email address, respectively.

Now we need to fill in the email fields:

• To Email will contain the destination of this email. In the tutorial, it's our personal email address. (Example: contact@emailjs.com)
• From Name is optional, but we can write our name here.
• From Email is the sender's email address as it will appear for the recipient. If the default email address checkbox is enabled then EmailJS system will use the email address associated with the email service in use.
• Reply To will set the email address to which the replies should be sent. We will fill it as {{user_email}}.
• Bcc and Cc: Both fields are used to send a copy of the message to everyone you've listed. The main difference between CC (Carbon Copy) and BCC (Blind Carbon Copy) is that the address listed in BCC are not visible to other recipients. In this tutorial, we will leave these fields blank.

Now let's save the email template by pressing the Save button. When we are going to the Email Templates page we can see our new Contact Form is present.