Skip to content

Added Contact us Email Functionality #1359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sanjay-kv merged 6 commits into from
Apr 29, 2026
Merged

Added Contact us Email Functionality #1359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c5f2420
feat: implement EmailJS integration for contact us page
Copilot Apr 29, 2026
8f7f9f1
fix: address code review feedback - logging, aria-busy, CSS class for…
Copilot Apr 29, 2026
b16e789
Email Integration
Adez017 Apr 29, 2026
cb609d0
fix: surface actual EmailJS error in UI instead of swallowing it
Copilot Apr 29, 2026
e704e99
error handling
Adez017 Apr 29, 2026
f6da8bf
Merge branch 'recodehive:main' into testimonial
Adez017 Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@ SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_storefront_access_token_here
# FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
# FIREBASE_PROJECT_ID=your_firebase_project_id

# EmailJS Configuration (for Contact Us page)
# Sign up at https://www.emailjs.com and create a service + template
# Only the public key, service ID, and template ID are exposed to the browser
EMAILJS_PUBLIC_KEY=your_emailjs_public_key
EMAILJS_SERVICE_ID=your_emailjs_service_id
EMAILJS_TEMPLATE_ID=your_emailjs_template_id
# The private API key is for server-side REST API use only — do NOT expose it in the browser
# EMAILJS_PRIVATE_KEY=your_emailjs_private_key

# Analytics Configuration
# GOOGLE_ANALYTICS_ID=your_google_analytics_id
# VERCEL_ANALYTICS_ID=your_vercel_analytics_id
4 changes: 4 additions & 0 deletions docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,10 @@ const config: Config = {
SHOPIFY_STOREFRONT_ACCESS_TOKEN:
process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN ||
"2503dfbf93132b42e627e7d53b3ba3e9",
// EmailJS credentials for Contact Us page (public values only)
EMAILJS_PUBLIC_KEY: process.env.EMAILJS_PUBLIC_KEY || "",
EMAILJS_SERVICE_ID: process.env.EMAILJS_SERVICE_ID || "",
EMAILJS_TEMPLATE_ID: process.env.EMAILJS_TEMPLATE_ID || "",
hooks: {
onBrokenMarkdownLinks: "warn",
},
Expand Down
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"@docusaurus/theme-classic": "^3.9.2",
"@docusaurus/theme-mermaid": "3.9.1",
"@docusaurus/theme-search-algolia": "3.9.2",
"@emailjs/browser": "^4.4.1",
"@floating-ui/react": "^0.27.8",
"@giscus/react": "^3.1.0",
"@mdx-js/react": "^3.0.0",
Expand Down
46 changes: 46 additions & 0 deletions src/pages/contact-us/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,6 +482,52 @@ html[data-theme="light"] {
transform: translateY(0) scale(0.98);
}

.submit-button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}

/* Form feedback messages */
.form-success-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.75rem;
padding: 2rem 1rem;
}

.form-success-icon {
font-size: 3rem;
}

.form-success-message h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--contact-text-primary);
margin: 0;
}

.form-success-message p {
color: var(--contact-text-muted);
margin: 0;
}

.form-success-button {
margin-top: 1rem;
}

.form-error-message {
padding: 0.875rem 1rem;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 0.75rem;
color: #ef4444;
font-size: 0.9375rem;
}

/* Additional Resources */
.contact-resources {
text-align: center;
Expand Down
218 changes: 149 additions & 69 deletions src/pages/contact-us/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,56 @@
import React from "react";
import React, { useRef, useState } from "react";
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import emailjs from "@emailjs/browser";
import { Mail, MapPin, Clock } from "lucide-react";
import "./index.css";

type FormStatus = "idle" | "sending" | "success" | "error";

const ContactUs: React.FC = () => {
const { siteConfig } = useDocusaurusContext();
const formRef = useRef<HTMLFormElement>(null);
const [status, setStatus] = useState<FormStatus>("idle");
const [errorMessage, setErrorMessage] = useState("");

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!formRef.current) return;

const publicKey = siteConfig.customFields?.EMAILJS_PUBLIC_KEY as string;
const serviceId = siteConfig.customFields?.EMAILJS_SERVICE_ID as string;
const templateId = siteConfig.customFields?.EMAILJS_TEMPLATE_ID as string;

if (!publicKey || !serviceId || !templateId) {
setErrorMessage(
"Email service is not configured. Please contact us directly at [email protected].",
);
setStatus("error");
return;
}

setStatus("sending");
setErrorMessage("");

try {
await emailjs.sendForm(serviceId, templateId, formRef.current, {
publicKey,
});
setStatus("success");
formRef.current.reset();
} catch (err) {
console.error("EmailJS send error:", err);
const detail =
err && typeof err === "object" && "text" in err
? ` (${(err as { status?: number; text?: string }).status ?? ""}: ${(err as { text?: string }).text ?? ""})`
: "";
setErrorMessage(
`Something went wrong${detail}. Please try again or email us directly at [email protected].`,
);
setStatus("error");
}
};

return (
<Layout
title="Contact Us"
Expand Down Expand Up @@ -123,88 +170,121 @@ const ContactUs: React.FC = () => {
<div className="contact-form-section">
<h2 className="contact-form-title">Send us a message</h2>

<form className="contact-form">
<div className="form-row">
{status === "success" ? (
<div className="form-success-message">
<div className="form-success-icon">✅</div>
<h3>Message Sent!</h3>
<p>
Thank you for reaching out. We'll get back to you within
24-48 hours.
</p>
<button
className="submit-button form-success-button"
onClick={() => setStatus("idle")}
>
Send Another Message
</button>
</div>
) : (
<form
ref={formRef}
className="contact-form"
onSubmit={handleSubmit}
>
<div className="form-row">
<div className="form-group">
<label htmlFor="firstName" className="form-label">
First Name
</label>
<input
type="text"
id="firstName"
name="firstName"
className="form-input"
placeholder="Your first name"
required
/>
</div>
<div className="form-group">
<label htmlFor="lastName" className="form-label">
Last Name
</label>
<input
type="text"
id="lastName"
name="lastName"
className="form-input"
placeholder="Your last name"
required
/>
</div>
</div>

<div className="form-group">
<label htmlFor="firstName" className="form-label">
First Name
<label htmlFor="email" className="form-label">
Email Address
</label>
<input
type="text"
id="firstName"
name="firstName"
type="email"
id="email"
name="email"
className="form-input"
placeholder="Your first name"
placeholder="[email protected]"
required
/>
</div>

<div className="form-group">
<label htmlFor="lastName" className="form-label">
Last Name
<label htmlFor="subject" className="form-label">
Subject
</label>
<input
type="text"
id="lastName"
name="lastName"
className="form-input"
placeholder="Your last name"
<select
id="subject"
name="subject"
className="form-select"
required
/>
>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="collaboration">Collaboration</option>
<option value="partnership">Partnership</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
</div>

<div className="form-group">
<label htmlFor="email" className="form-label">
Email Address
</label>
<input
type="email"
id="email"
name="email"
className="form-input"
placeholder="[email protected]"
required
/>
</div>

<div className="form-group">
<label htmlFor="subject" className="form-label">
Subject
</label>
<select
id="subject"
name="subject"
className="form-select"
required
>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="collaboration">Collaboration</option>
<option value="partnership">Partnership</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div className="form-group">
<label htmlFor="message" className="form-label">
Message
</label>
<textarea
id="message"
name="message"
rows={6}
className="form-textarea"
placeholder="Tell us more about your inquiry..."
required
></textarea>
</div>

<div className="form-group">
<label htmlFor="message" className="form-label">
Message
</label>
<textarea
id="message"
name="message"
rows={6}
className="form-textarea"
placeholder="Tell us more about your inquiry..."
required
></textarea>
</div>
{status === "error" && (
<div className="form-error-message">{errorMessage}</div>
)}

<button type="submit" className="submit-button">
Send Message
</button>
</form>
<button
type="submit"
className="submit-button"
disabled={status === "sending"}
aria-busy={status === "sending"}
aria-label={
status === "sending" ? "Sending message…" : "Send message"
}
>
{status === "sending" ? "Sending…" : "Send Message"}
</button>
</form>
)}
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion tsconfig.tsbuildinfo
View file
Open in desktop

Large diffs are not rendered by default.

Loading