RECEIVE FORM MESSAGE IN YOUR EMAIL

Introduction

This article focuses on receiving messages/mail from users after clicking the submit/send button on the contact form with no server code needed. As a frontend developer, with no backend skills, I designed my portfolio website which included a contact form, to receive messages and contact details.

Prerequisites

Setting up an EmailJs account

Create React App

Step 1 — Create Contact Page

The contact page is the .js file where I have my contact form.

 <form className="w-full" ref={form} onSubmit={sendEmail}>
            <div className="flex flex-wrap mx-3 mt-[42px]">
              <div className="w-full md:full px-3 mb-6 md:mb-0">
                <label
                  className="block text-[14px]  font-[500] tracking-wide text-white
                   mb-2"
                  htmlFor="grid-first-name"
                >
                  Your Name
                </label>
                <input
                  className="block w-full bg-[transparent]  border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                  name="user_name"
                  type="text"
                  placeholder="Name"
                  value={user_name}
                  required
                  onChange={handleUserName}
                />
              </div>
            </div>
            <div className="flex flex-wrap mx-3 mt-[42px]">
              <div className="w-full md:w-full px-3 mb-6 md:mb-0">
                <label
                  className="block text-[14px] font-[500] tracking-wide text-white
                   mb-2"
                  htmlFor="grid-first-name"
                >
                  Email Address
                </label>
                <input
                  className="block w-full bg-[transparent] border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                  name="email"
                  type="email"
                  placeholder="Enter a valid email"
                  onChange={handleEmail}
                  value={email}
                />
              </div>

              <div className="w-full px-3 my-6 md:mb-0 ">
                <textarea
                  placeholder="Your Message"
                  rows={6}
                  name="message"
                  className="block w-full bg-[transparent]  border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                  value={message}
                  onChange={handleMessage}
                />
                <div className="items-center justify-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex lg:justify-start">
                  <button
                    className="block w-fit px-6 py-2 mt-4 text-center text-white  bg-[#ac2874] rounded"
                    type="submit"
                    value="Send"
                  >
                    Send Message
                  </button>
                </div>
              </div>
            </div>
          </form>

Step 2 — Setup EmailJs

Sign In and Setup EmailJs for integration

After successful login, I proceeded to add Email Services.

After the successful creation of Email Services, I then proceeded to create an Email Template. This is the format in which the contact form will be delivered in the mail.

Email Template

Step 3 — Installing Email Js in React app

npm i @emailjs/browser

Step 4 — Integrate EmailJs in your Contact Form Page

Check out EmailJs examples using different frameworks.

Step 4 — Contact Form and Email Template

The name attribute of the inputs in the contact form must be the same as value in the Email Template

Step 5 — Testing

After starting my react app, I filled out the contact form and then clicked the send message button. The message was successfully sent and I received the message in my email.

Email Inbox