https://github.com/zeeshandev15/send-form-data-to-gmail-via-emailjs
To send form data to Gmail via EmailJS in React, use react-hook-form for form handling and validation. On form submission, trigger emailjs.sendForm() with your form reference to send the data to an EmailJS service template, which forwards it to Gmail. Reset the form after submission.
https://github.com/zeeshandev15/send-form-data-to-gmail-via-emailjs
nextjs reacthookform typescript zod-validation
Last synced: 4 months ago
JSON representation
To send form data to Gmail via EmailJS in React, use react-hook-form for form handling and validation. On form submission, trigger emailjs.sendForm() with your form reference to send the data to an EmailJS service template, which forwards it to Gmail. Reset the form after submission.
- Host: GitHub
- URL: https://github.com/zeeshandev15/send-form-data-to-gmail-via-emailjs
- Owner: zeeshandev15
- Created: 2024-11-28T18:52:32.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-28T19:20:38.000Z (over 1 year ago)
- Last Synced: 2025-10-19T12:54:59.505Z (8 months ago)
- Topics: nextjs, reacthookform, typescript, zod-validation
- Language: TypeScript
- Homepage:
- Size: 264 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Send-form-data-to-Gmail-via-EmailJS
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Snippets (Code to Copy)](#snippets)
6. 🚀 [More](#more)
To send form data to Gmail via EmailJS in React, use react-hook-form for form handling and validation. On form submission, trigger emailjs.sendForm() with your form reference to send the data to an EmailJS service template, which forwards it to Gmail. Reset the form after submission!
If you're getting started and need assistance or face any bugs, join our active Discord community with over **34k+** members. It's a place where people help each other out.
- Next.js
- TailwindCSS
- Zod
- ReactHookForm
## 🔋 Features
👉 **Form Handling**: Uses react-hook-form for managing form state and validation.
👉 **Data Validation**: Validates user inputs with Zod schema..
👉 **Email Sending**: Integrates EmailJS to send form data directly to Gmail.
👉 **Real-time Feedback**: Displays success or error messages using toast notifications.
👉 **Form Reset**: Automatically clears form fields after successful submission.
👉 **Responsive Design**: Utilizes Tailwind CSS for a responsive and clean UI.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [yarn](https://yarnpkg.com/) (Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/Hi-Dear-486/Send-form-data-to-Gmail-via-EmailJS.git
cd ./
```
**Installation**
Install the project dependencies using yarn:
```bash
yarn install
```
**Set Up Environment Variables**
Create a new file named `.env.local` in the root of your project and add the following content:
Replace the placeholder values with your actual Firebase credentials. You can obtain these credentials by signing up on the [Firebase website (https://firebase.google.com/).
**Running the Project**
```bash
yarn run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
## 🕸️ Snippets
tailwind.config.js
```typescript
import type { Config } from "tailwindcss";
export default {
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
chart: {
"1": "hsl(var(--chart-1))",
"2": "hsl(var(--chart-2))",
"3": "hsl(var(--chart-3))",
"4": "hsl(var(--chart-4))",
"5": "hsl(var(--chart-5))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
```
## 🚀 More
**Advance your skills with Next Js**
Enjoyed creating this project? Dive deeper for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
#