It’s 2021 and at this point there is a JavaScript library or framework for everything. So you have a few different options if you want to send emails directly from your browser side code.
EmailJS is a new javascript library in the EmailAPI category. It sets up all the backend stuff for you. With this you can send email from a JavaScript form into your chosen email account.
As a developer I love this JavaScript library and had it submitting to my email in under an hour of tooling around. You will need to install it on your local system with
in your terminal.npm i emailjs-com --save
Once this has finished installing you will need to sign up for a free account. On the landing page after you signup we should look at the docs; like anything else in development the documentation is the best place to start. EmailJS is no different and you should dive in starting there.
I opt for the React option as it is my favorite JavaScript library. We will go into this section of the docs to give us information on what to do.
I will tell you this takes you into a React component that you will have to add to your react files. You will need
at the top of the file along with the requisite import React from 'react'. This React component is a functional react component however I prefer class components and it will work just fine to convert it to such. I did this to utilize setState and other methods part of the react class syntax. import emailjs from 'emailjs-com'
You will need to include your_service_id, your_template_id, and your_user_id in your React file. You will find these on your EmailJS account profile.
Now that we have an understanding of our React files lets hookup the light switches and other electrical work.
On your signup/sign-in landing page click on Email Services. From here you will choose your email that will have the mail sent into.
They offer many services. I will be selecting Gmail as google is by far the best in the industry for quality and speed, in my opinion.
Here you select a carrier the prompts are self explanatory. The next step is the email templates.
For the email to submit properly these variables need to be the same as in your react file.
You will need to change from_name to the same as in your file: user_name.
For react you will have to add an additional {} so your end product will look like something like this:
I hope this email helped you understand one way to send emails from your JavaScript form. If you have any questions, please feel free to reach out!