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 Go to EmailJS and create a free account. Once logged in, navigate to the Dashboard. Step 2: Create an Email Service Click on Email Services > Add Email Service. Select your email provider (e.g., Gmail, Outlook) and follow the steps to link your email account. Step 3: Create an Email Template Go to Email Templates and click on Create New Template. Design your template with placeholders (e.g., {{name}}, {{email}}, {{message}}). Save the template and note down the Template ID. Step 4: Get Your API Keys Go to Integration > API Keys. 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

Jan 22, 2025 - 19:35

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

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

Step 2: Create an Email Service

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

Step 3: Create an Email Template

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

Step 4: Get Your API Keys

Go to Integration > API Keys.
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