How to create a Client-side -based Contact Form With Emailjs service

How to create a Client-side -based Contact Form With Emailjs service

Hassana Abdullahi's photo
Hassana Abdullahi
·

5 min read

👇Table Of Content

  • Introduction

  • Getting started

  • Prerequisite

  • Installations

  • Contact form

  • Signing up with emailjs

  • Connecting templates to Contact Form

Introduction.

Hello 👋 TechStars !

In today's article, we will learn how to send emails through a Contact form using React with EmailJS.

This article is for front-End engineers/developers with zero backend skills or too lazy to delve into it. But needs a way to get contacted from their website at no cost at all.

Getting started.

let's start with understanding what EmailJs is.

EmailJs is a JavaScript library that helps send emails using only client-side technologies. The cool thing about EmailJS is that no servers are required; all you have to do is connect it to one of the supported email services, create an email template, and use EmailJS to trigger an email. for more info visit 👉🏾 EmailJS

prerequisite.

below 👇is the list of technology you will be using for this project

  1. PC

  2. Node(you should have node installed into your PC)

  3. Vscode (or any code editor)

  4. Git(optional)

Before diving fully into this, you should be familiar with the following👇.

  • HTML

  • CSS

  • Javascript

  • React

  • npm/yarn or any package installer

Installations.

Node.

f you do not have Node installed, here is a step-by-step process on how to install it.

getting-started-with-nodejs

React.

To install and initialize a new react app, type this command in your terminal.

do not forget to cd into your project folder after installation

npm create-react-app emailJs-contact-form

cd emailjs-contact-form

EmailJs.

there are various ways to go about installing EmailJs, in this article we will be using the module bundling method. which is basically installing it as a package/module.

npm install @emailjs/browser --save

Now that the installation is complete, let's start coding.

Contact Form.

First, open your previously installed react project in your IDE (vscode).

Create a contact form in your app.jsx file.

mport React from "react";
import "./app.css";
function App() {
  return (
    <div className="app">
      <form>
        <label>Enter Name </label>
        <input required type="text" name="your_name" />
        <label>Enter email </label>
        <input required type="text" name="your_email" />
        <label>Enter Name </label>
        <textarea required name="message" cols="30" rows="10"></textarea>
        <button type="submit">Send Message</button>
      </form>
    </div>
  );
}

export default App;

let's give the form a little styling.

.app {
  background-color: darkslategray;
  height: 100vh;
  padding: 10px;
  color: #ff7f50;
  font-size: 1.5rem;
  text-transform: capitalize;
}
form label {
  display: block;
  margin: 20px;
}
form input {
  background-color: #fff;
  width: 90%;
  border: none;
  padding: 15px;
  border-radius: 10px;
}
form textarea {
  background-color: #fff;
  display: block;
  margin: 10px 0;
}
form button {
  padding: 15px;
  background-color: #ff7f50;
  border: none;
  border-radius: 10px;
  font-size: 1.3rem;
}

Result. 👇

Sign up with EmailJs.

visit [EmailJs](https://www.emailjs.com/) to sign up.

After signing up you will be redirected to your dashboard where you can start creating new services.

first, click on the add new service button.

the various services available to you will be displayed, be sure to select the gmail service

Give it a name of your choice, connect it to your gmail account and then click on the create service button.

Next, we create an email template. do that by clicking on Create New Template

Next, customize your template to match your contact form to match your form input and textarea names. after all that is done go ahead and click on save.

Connecting Templates to Contact Form.

Now let's go back to our contact form react app. Remember that we installed the EmailJs package into our react app earlier, now its time to initialize Emailjs by Importing into our App.jsx file like this:

import React from "react";
import "./app.css";
import emailjs from "@emailjs/browser";

function App() {
  return (
    <div className="app">
      <form>
        <label>Enter Name </label>
        <input required type="text" name="your_name" />
        <label>Enter email </label>
        <input required type="text" name="your_email" />
        <label>Enter Name </label>
        <textarea required name="message" cols="30" rows="10"></textarea>
        <button type="submit">Send Message</button>
      </form>
    </div>
  );
}

export default App;

Next, we connect our contact form to the EmailJs service. that can be done by creating a function that will handle the form when the submit button is clicked.

To submit the form, we need to import the useRef hook : import { useRef } from 'react';

Learn more about useRef hook here.

Next, we initialize the form:

const form = useRef();

Now, we replace the opening form tag with this

<form ref={form}>

Now let's create a function that will call on the emailjs service we created onSubmit.

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

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });

      e.target.reset();
  };

The above function calls the emailjs package/module, then calls a method or function that takes four parameters(serviceID, templateID, the contactForm we will be submiting and public key).

I know you are wondering how exactly do we get all this parameters(serviceID, templateID and public key). No need to worry we will be touching that soon.

To get your serviceID, templateID and publicKey, we will need to go back to our emailjs dashboard.

To get "YOUR_SERVICE_ID", click on the Email Services link in your dashboard's side menu.

To get "YOUR_TEMPLATE_ID", click on the Email Templates link in your dashboard's side menu, click on the template you are currently working on and then click on the settings tab.

To get "YOUR_PUBLIC_KEY", go to your dashboard and click on the Account link on the side menu. You should be on a page like this:

Now that we have gotten all our parameters our react contact form code should look like this.

import "./app.css";
import emailjs from "@emailjs/browser";
import React, { useRef } from "react";

function App() {
  const form = useRef();

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

    emailjs
      .sendForm(
        "service_uf7fsgf",
        "template_5qvrfrq",
        form.current,
        "dpZxMv6bPvp0vzdZP"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    e.target.reset();
  };
  return (
    <div className="app">
      <form ref={form} onSubmit={sendEmail}>
        <label>Enter Name </label>
        <input required type="text" name="your_name" />
        <label>Enter email </label>
        <input required type="text" name="your_email" />
        <label>Enter Name </label>
        <textarea required name="message" cols="30" rows="10"></textarea>
        <button type="submit">Send Message</button>
      </form>
    </div>
  );
}

export default App;

Test and flex

Now that all the hardwork😪 is done, it's time to test the application.

  • Run the application.

  • Fill out the contact form.

  • Submit

  • check your mail for new message ☺

Cheers on getting to this piont💃🏾💃🏾, you are doing amazing✨🎇.

JavaScriptReactEmailsFrontend Developmentarticlewriting