Shulou(Shulou.com)06/03 Report--

How to use JavaScript to send e-mail directly from the front end, for this problem, this article introduces the corresponding analysis and answers in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

You don't need to use any back-end language, such as PHP or Python. Besides, you don't even need Node.js!

There are many ways to read this data. You can connect your form to a database (such as MySQL) and read the incoming information from the database. Well, it's an option, but I think it might be troublesome for your non-technical customers.

You don't need to use any back-end language.

All you need is a simple EmailJS library.

I use Webpack in my project, I store the source code in the src folder, the dist stores the final release version of the code, and I use npm run dev to get the project running.

Provide the complete code of the project, which can be run really. If you need it, you can click on my profile picture, private message keyword: emailjs.

Project complete code

Project interface

Step 1, create the form with HTML

The first thing to do, of course, is to create an HTML form. Note that you don't have to set validation properties such as required or max, because the preventDefault () function will run on your submit event later, and it will cancel the work of these properties.

The most important thing in the form is to set the name property for each input, which will be used later.

My simple table is as follows:

Src/html/index.html

Step 2, register for emailjs

To configure email, you must register for the emailjs service. Don't worry, using this site is very friendly and you won't spend much time on it.

Register for the emailjs service: https://dashboard.emailjs.com/account/create

After logging in, you will be asked for information about the e-mail service. It is placed in the personal email service area, and as far as I am concerned, I chose Gmail.

Click Connect account to connect to Gmail.

Connect Gmail

The Gmail authorization window will pop up and click allow in the request permission dialog box.

After connecting to the Gmail account, click the "Add Service" button. After you successfully add it, you can see the following interface.

For example, if you connect to your xyz@gmail.com account, future emails you receive will be sent from that account. So don't worry about letting Gmail send emails for you-that's exactly what you need!

Step 3, create your email template

Create your email template

After the above steps, you have successfully connected your Gmail account, which should be seen in your dashboard. Click the navigation on the left to enter the email template settings page.

Then click the "Create a new template" button to create a new template, and the interface is very friendly, so there will be no problem with creating it. You can choose the name and ID of the template, which I set to "my-amazing-template".

Create a new template

You must now specify what the incoming email should look like. Insert the name attribute from the form as a variable into the {} symbol.

Don't forget to put an e-mail address in the To email section, where we read the recipient variable we entered.

Insert variable

This is my simple template, which uses four variables from my HTML form, and I specify a subject to send and receive email.

Step 4, save your API key

Well, there's nothing special about this part. Emailjs shares authorized API keys that will be used during email. Of course, the best place to place these keys is the .env configuration file. But since my work object is simple static files, I don't want to do server configuration work, so I will save them in the apikeys file and import them later.

Your USER_ID is located in Account > API Keys.

And your TEMPLATE_ID is below the template title.

This is a sample configuration of my src/js/apikeys.js.

Export default {USER_ID: 'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

Step 5, send an email!

Now that it's the last and most important part of the project, we have to send e-mail using javascript.

First of all, you must download the emailjs package.

Npm i emails-com

After that, go to your src/js/main.js file and import your library and apikey.

Import emailjs from 'emailjs-com' import apiKeys from'. / apikeys'

It's time to write the send e-mail function in src/js/main.js.

Const sendEmail = e = > {e.preventDefault () emailjs .sendForm ('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID). Then (result = > {console.log (result.text)}, error = > {console.log (error.text)})}

It's simple. As you can see, the sendForm function takes four parameters.

The first parameter: the ID of your email, located in the following location.

The second parameter: TEMPLATE_ID comes from your apikey file.

The third parameter: the event object e in the form submission.

The fourth parameter: USER_ID comes from your apikey file.

Finally, find the form and add a submit event listener.

/ / src/js/main.js const form = document.querySelector ('.form') form.addEventListener ('submit',sendEmail)

As mentioned earlier, property validation cannot be done because the preventDefault () function is used, and you must use JS to validate and clear the input yourself.

That's all. Finally, let's test it with npm run dev. I fill out the form on the page and send it.

My 163 email received an email that was rendered based on our template and form data.

As you can see from the figure above, the values of all variables are populated to the correct position.

With emailjs, you can send email in a simple way.

This is the answer to the question about how to use JavaScript to send email directly from the front end. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.