How to Setup Emailjs
Have you ever wanted to make your contact forms send you the email to your personal email? Would you need a backend? How can I do this with just a static application? Your answers are within this blog.
Emailjs will help you send emails directly from Javascript with no server code needed. We are going to go step by step to set up our contact form to send an email with using Javascript.
Step 1- Make an account on Emailjs website
Create a new account at the emailjs website by clicking here. You will need to provide your name, email, and create a new password. Be sure to verify your email.
Step 2- Add a New Service
According to documentation, An email service provides integration between EmailJS and your email server. First open the Email Services (opens new window) tab where you will see two sections: Transactional email services and Personal email services.
Personal email services allow connecting personal email providers that offer basic email functionality — an email address and an inbox. These include providers like Gmail, Fastmail, Outlook 365, etc’. Personal email services are useful in EmailJS when you need to send a small number of emails to yourself, or need to send emails to other people from your personal email account.
After linking your email, you should be prompted to a window like underneath:
** IMPORTANT: You will use the Service ID in a following step. For more documentation, click here.
Step 3 — Create New Template (Make sure to copy your template id, you will use this in the next couple of steps) link
What is the purpose of the template? Well the data that is being sent from the form when being submitted will be sent to emailjs and use that data to send you an email with a specific format. According to documentation, this will define the subject of our email, what content will it contain, and where should it be sent to, etc.
Example: 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.
Let’s Create a new Template:
We will use the {{subject}}, {{message}}, {{user_name}}, and {{reply_to}} within our contact form. These will be our names for our name attributes in our html contact form. Make sure you save your template!
IMPORTANT: You will use the Template ID in a following step. This will be found on the settings tab. For more documentation, click here.
Step 4- Create a Contact Form link
With the names provided within our template we will create our contact form. Take a look below to see how we give name attributes and assign it to the names within our template:
It is important to make sure the names provided in the template, are names within the name attributes of the html. You can also see that our button has onclick='sendMail()' Make sure you have this included. We will explain this within Step *****. For more information about this step, click here.
Step 5- Integration of Javascript scripts on heads
Within your emailjs account, click on the Integration Tab and click on Browser. It states, To start using EmailJS on your website just paste the following code snippet before </head> closing tag. No changes are needed, just copy paste the snippet as is.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script><script type="text/javascript">(function() {emailjs.init("USER_ID");})();</script>
** Replace USER_ID with your user id provided underneath, where it says API Keys. This should look something like this:
Step 6- Adding Javascript Function for Email forwarding
Before the closing body tag in your html, we are also going to create a sendMail function and call the emailjs.sendForm method provided by emailjs. This will need 3 parameters. The Service ID, The Template ID and the id of the contact form. We will chain a .then to complete tasks if the method was successful. Take a look at the code underneath which explains each line:
Time to test it out! This will work if you have followed each step precisely. For more information about the emailjs.sendForm method, click here.
Resources
For more information about emailjs, visit their documentation by clicking here, or visit their website at emailjs.com. You can also view this video which will also guide you step by step on setting up emailjs, click here or view below:
