Emailjs contact form in React

One of the most popular features on websites these days is a contact form, allowing a user to ask questions, or submit requests to a person, or customer service team. Today we will learn how to implement this feature using Emailjs.

*As a prerequisite, you should already have your React app build and working before starting this process.

I found this process surprisingly simple and satisfying, and whats better is the service is totally free (up to 200 emails a month).

Once you initially sign up on Emailjs and receive the confirmation email, you’ll be taken to the email services tab.

Click on the icon associated with your email account (ex: if you have a gmail account, select gmail).

Next we want to create and customize a new email template to format how the email will look when you receive it, be sure to save the template when you’re finished with it. You’ll then want to build a basic form for the user to fill out in its own React component. Reference an example form here, but feel free to add anything to get more information from the user.

Next install and import emailjs into your app with:

npm install @emailjs/browser --save

Once emailjs is installed, import emailjs into your React component with the contact form the same way we import other components:

In your form, add an onSubmit function, and in that function you’ll need to reference the template id, user id, service id that emailjs provides you and can be found easily in your emailjs profile.

Here are the following steps to set up the submit function (found in the code snippet below):

• First, we stop the page from refreshing when the form is submitted, using e.preventDefault();
• I then set the three id’s to variables before calling emailjs.sendForm() on them, you can also paste them directly into the sendform function
• Then we call the sendform function provided for us by emailjs. and alerting either the success message or failure message, and clearing the form

Great job! Your form should now be able to submit with the users information and you should get an email with their request! You just build a functional contact form!