Creating an Active Contact-Me Feature Using Email.JS: A Beginner's Guide

Hello everyone😊, Welcome back to my blog. Today, I'm going to be walking you through how you can create a website with an active contact-me page/feature.

If you're a developer, having a working "contact me" feature on your website is crucial for engaging visitors. Adding an email service to your website is one of the best ways to implement such a feature.

Email.js, a JavaScript package that enables developers to send emails directly from a client-side script, is one such service. In this tutorial, we'll look at how to use Email.js to build an interactive "contact me" feature.

Step 1 - Create Your Contact-Me Form.

The contact-me form is created with HTML and styled with CSS.

<div className="contact-form">
            <form onSubmit={sendEmail}>
              <ul>
                <li>
                  <input
                    type="text"
                    name="name"
                    placeholder="Enter your name"
                    required
                  ></input>
                </li>
                <li>
                  <input
                    type="email"
                    name="email"
                    placeholder="Input email address"
                    required
                  ></input>
                </li>
                <li>
                  <input
                    type="text"
                    name="subject"
                    placeholder="Subject of your email"
                    required
                  ></input>
                </li>
                <li>
                  <textarea
                    type="text"
                    name="message"
                    placeholder="Type your message to Gbemi here"
                    required
                  ></textarea>
                </li>
                <li>
                  <input
                    type="submit"
                    name="submit"
                    value="Send"
                    required
                  ></input>
                </li>
              </ul>
            </form>
          </div>

Step 2 - Create an Email.js Account

Next up, head over to Email.js at https://www.emailjs.com/, and create an account. Once you have signed up, you will be taken to your dashboard, where you can create a new email service.

Step 3 - Set up an Email Service.

Right on your dashboard, navigate to the "Email Services" tab, and then click the "Add New Service" button. You will be asked to name your email service and provide information about your email provider. Gmail, Yahoo, and Hotmail are among the email providers supported by Email.js.

Step 4 - Set Up Your Email Template

The next step after creating your email service is to create an email template. An email template is a pre-defined message that is automatically sent to you when a user fills out your website's "contact me" form.

To make an email template, go to your dashboard's "Email Templates" tab, and then click the "Create Template" button, or you can simply use the default template created by Email.js. Y

You can make your email template more personalized by including variables like the user's name and email address.

Step 5: Link Email.js to Your Form.

To use Email.js with your form, add the Email.js script to your HTML file. You can accomplish this by inserting the following code into your HTML file:

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
<script type="text/javascript">
   (function(){
      emailjs.init("YOUR_PUBLIC_KEY");
   })();
</script>

Replace <YOUR_USER_ID> with your Email.js user ID. Your user ID can be found on your Email.js dashboard.

Also, you'll need to create this form's submit function to send the email:

 const sendEmail = (e) => {
    e.preventDefault()

    emailjs
    .sendForm(
      'YOUR_SERVICE_ID',
      'YOUR_TEMPLATE_ID',
      refForm.current,
      'YOUR_PUBLIC_KEY'
    )
    .then (
      () => {
        alert('Your Message has been sent to Gbemisola')
        window.location.reload(false)
      },
      () => {
        alert('Failed to send message, please try again')
      }
    )
  }

When you're done with all steps, fill out your form, and click the "submit" button. If everything is set up correctly, you should receive an email with the information you inputted.

Let me know if you have any questions or additions in the comment section. See you in my next blog post. Byeeee😊

First published here