Contact Form Using EmailJS

Modern contact form using React, TailwindCSS, and EmailJS for real-time email functionality. The code and setup instructions can be used to create a professional contact form

Test: https://dev-contact.netlify.app/

Github : https://github.com/mahmud-r-farhan/contact-form

1. Installation and Setup

Step 1: Clone the Repository

Clone the project from GitHub:

git clone https://github.com/mahmud-r-farhan/contact-form
cd contact-form

Step 2: Install Dependencies

Install all necessary dependencies:

npm install

---

2. Set Up EmailJS Account

Step 1: Create an Account

1. Go to EmailJS and create a free account.
2. Once logged in, navigate to the Dashboard.

Step 2: Create an Email Service

1. Click on Email Services > Add Email Service.
2. Select your email provider (e.g., Gmail, Outlook) and follow the steps to link your email account.

Step 3: Create an Email Template

1. Go to Email Templates and click on Create New Template.
2. Design your template with placeholders (e.g., {{name}}, {{email}}, {{message}}).
3. Save the template and note down the Template ID.

Step 4: Get Your API Keys

1. Go to Integration > API Keys.
2. Copy the Service ID, Template ID, and User ID.

---

3. Environment Variables

Create a .env file in the project root and add:

VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_USER_ID=your_user_id

Replace placeholders with the actual IDs from EmailJS.

Image Form: Code

Comments

[Thaísa Vieira]

Great and practical abstract, @mahmud-r-farhan!

[Mahmud R. Farhan]

Thank you so much, Thaísa! @thaisavieira