emailJS:
It's all very well having a website, but what purpose would it serve without a way of contacting the developer, or the business? This is where
SDKs like emailJS come in useful.
Let's set up an account. First we need some HTML code:
And a little CSS:
Now we sign up to the emailJS account. We then configure a host service and template within the site itself. This is a good example of an edited template:
When the mail service is configured, we send a test mail. In the test mail popup, in the top right hand side is some
JavaScript code:
And, as we fill in the details, we can see that the JavaScript code is being added to with key and value pairs:
Now we need to go to the Documentation page to learn how to install the service.
From here, we click on the install EmailJS SDK link and find the
scripts that are needed:
We insert these snippets into the <head> element of the page, and add the user_id given in the service.
Back in the emailJS dashboard, we can retrieve the user_id
from the intergration then browser option.
We then paste and copy the user_id into the above script.
With this script in the <head> element, it is a self-invoking function. Now we need to write a script in a .js file.
But first, we need to change the HTML (above) a little:
We have changed the <form> element to make it return this data, the data that will be
entered in the contact form.
Now, we need to add the .js script at the bottom of the page, beneath the <footer> element. We call it
sendMail.js
It is within this .js script file that we create sendEmail(), and we then copy and delete the self-declaring function
from the HTML and paste it into sendEmail() of the .js script. We are sending in the <form>
as a parameter, thus we can add the argument contactForm to the function.
Then we add the "send" script that we find on here, which has the same first two values as in the second image above.
For the templateParams we add {key: value} pairs, the keys being "from_name", "from_email" and
"project_request" - just as in the template above. We then add the values that we find from the HTML form ids.
Thus, the .js script now reads as follows:
We also add the .when() and .then() promises from the /send emailJS link:
Lastly, we add a return false statement which blocks the function from loading a new page.
The result: