{"id":25918252,"url":"https://github.com/zeeshandev15/send-form-data-to-gmail-via-emailjs","last_synced_at":"2026-02-13T17:32:39.959Z","repository":{"id":265296336,"uuid":"895720717","full_name":"zeeshandev15/Send-form-data-to-Gmail-via-EmailJS","owner":"zeeshandev15","description":"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.","archived":false,"fork":false,"pushed_at":"2024-11-28T19:20:38.000Z","size":270,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-19T12:54:59.505Z","etag":null,"topics":["nextjs","reacthookform","typescript","zod-validation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeeshandev15.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-28T18:52:32.000Z","updated_at":"2024-12-20T08:32:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"c165d4b4-bf1b-4279-a4cd-2358d4070fe0","html_url":"https://github.com/zeeshandev15/Send-form-data-to-Gmail-via-EmailJS","commit_stats":null,"previous_names":["hi-dear-486/send-form-data-to-gmail-via-emailjs","zeeshan-develop/send-form-data-to-gmail-via-emailjs","zeeshandev15/send-form-data-to-gmail-via-emailjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zeeshandev15/Send-form-data-to-Gmail-via-EmailJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FSend-form-data-to-Gmail-via-EmailJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FSend-form-data-to-Gmail-via-EmailJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FSend-form-data-to-Gmail-via-EmailJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FSend-form-data-to-Gmail-via-EmailJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeeshandev15","download_url":"https://codeload.github.com/zeeshandev15/Send-form-data-to-Gmail-via-EmailJS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FSend-form-data-to-Gmail-via-EmailJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29413398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","reacthookform","typescript","zod-validation"],"created_at":"2025-03-03T14:18:21.110Z","updated_at":"2026-02-13T17:32:39.942Z","avatar_url":"https://github.com/zeeshandev15.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ca href=\"https://youtu.be/lEflo_sc82g?feature=shared\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://github.com/Hi-Dear-486/Send-form-data-to-Gmail-via-EmailJS/blob/master/demo-form.JPG\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n   \u003cimg\n  src=\"https://img.shields.io/badge/Next.js-0070F3?style=for-the-badge\u0026logo=next.js\u0026logoColor=white\"\n  alt=\"Next.js\"\n/\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-EmailJS-4D9CFE?style=for-the-badge\u0026logo=emailjs\u0026logoColor=white\u0026color=4D9CFE\" alt=\"EmailJS\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-React_Hook_Form-black?style=for-the-badge\u0026logoColor=white\u0026logo=react\u0026color=EC5990\" alt=\"reacthookform\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n   \u003cimg src=\"https://img.shields.io/badge/-Zod-blue?style=for-the-badge\u0026logo=zod\u0026logoColor=white\u0026color=2B90D9\" alt=\"Zod\" /\u003e\n\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003eSend-form-data-to-Gmail-via-EmailJS\u003c/h3\u003e\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets (Code to Copy)](#snippets)\n6. 🚀 [More](#more)\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nTo 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!\n\nIf 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.\n\n\u003ca href=\"https://discord.com/invite/n6EdbFJ\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e\" /\u003e\u003c/a\u003e\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- Next.js\n- TailwindCSS\n- Zod\n- ReactHookForm\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Form Handling**: Uses react-hook-form for managing form state and validation.\n\n👉 **Data Validation**: Validates user inputs with Zod schema..\n\n👉 **Email Sending**: Integrates EmailJS to send form data directly to Gmail.\n\n👉 **Real-time Feedback**: Displays success or error messages using toast notifications.\n\n👉 **Form Reset**: Automatically clears form fields after successful submission.\n\n👉 **Responsive Design**: Utilizes Tailwind CSS for a responsive and clean UI.\n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [yarn](https://yarnpkg.com/) (Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/Hi-Dear-486/Send-form-data-to-Gmail-via-EmailJS.git\ncd ./\n```\n\n**Installation**\n\nInstall the project dependencies using yarn:\n\n```bash\nyarn install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env.local` in the root of your project and add the following content:\n\nReplace the placeholder values with your actual Firebase credentials. You can obtain these credentials by signing up on the [Firebase website (https://firebase.google.com/).\n\n**Running the Project**\n\n```bash\nyarn  run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003etailwind.config.js\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\nimport type { Config } from \"tailwindcss\";\n\nexport default {\n  darkMode: [\"class\"],\n  content: [\n    \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n  ],\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        chart: {\n          \"1\": \"hsl(var(--chart-1))\",\n          \"2\": \"hsl(var(--chart-2))\",\n          \"3\": \"hsl(var(--chart-3))\",\n          \"4\": \"hsl(var(--chart-4))\",\n          \"5\": \"hsl(var(--chart-5))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n} satisfies Config;\n```\n\n\u003c/details\u003e\n\n## \u003ca name=\"more\"\u003e🚀 More\u003c/a\u003e\n**Advance your skills with Next Js**\n\nEnjoyed 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!\n\n\u003ca href=\"https://github.com/Hi-Dear-486/Movie-flix-App\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/Hi-Dear-486/Movie-flix-App/blob/master/movie.JPG\" alt=\"Project Banner\"\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n#\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshandev15%2Fsend-form-data-to-gmail-via-emailjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeeshandev15%2Fsend-form-data-to-gmail-via-emailjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshandev15%2Fsend-form-data-to-gmail-via-emailjs/lists"}