DEV Community

Cover image for Contact Form Using EmailJS
Mahmudur Rahman
Mahmudur Rahman

Posted on

1 1

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

Enter fullscreen mode Exit fullscreen mode

Step 2: Install Dependencies

Install all necessary dependencies:

npm install

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Replace placeholders with the actual IDs from EmailJS.

Image Form: Code

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (2)

Collapse
 
thaisavieira profile image
Thaísa Vieira •

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

Collapse
 
mahmud-r-farhan profile image
Mahmudur Rahman •

Thank you so much, Thaísa! @thaisavieira

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more