Dokploy/website
1
0
Fork 0
mirror of https://github.com/Dokploy/website.git synced 2026-07-12 17:35:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance contact form with first and last name fields, integrate HubSpot submission, and update localization files

Browse Source
This commit is contained in:
Mauricio Siu
2025-10-11 00:52:26 -06:00
parent cf9b788bd5
commit 7e810fa809
8 changed files with 266 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
apps/website/app/[locale]/contact/page.tsx
View File

@@ -18,7 +18,8 @@ import { cn } from "@/lib/utils";
interface ContactFormData {
inquiryType: "" | "support" | "sales" | "other";
name: string;
firstName: string;
lastName: string;
email: string;
company: string;
message: string;
@@ -30,7 +31,8 @@ export default function ContactPage() {
const [isSubmitted, setIsSubmitted] = useState(false);
const [formData, setFormData] = useState<ContactFormData>({
inquiryType: "",
name: "",
firstName: "",
lastName: "",
email: "",
company: "",
message: "",
@@ -43,8 +45,11 @@ export default function ContactPage() {
if (!formData.inquiryType) {
newErrors.inquiryType = t("errors.inquiryTypeRequired");
}
if (!formData.name.trim()) {
newErrors.name = t("errors.nameRequired");
if (!formData.firstName.trim()) {
newErrors.firstName = t("errors.firstNameRequired");
}
if (!formData.lastName.trim()) {
newErrors.lastName = t("errors.lastNameRequired");
}
if (!formData.email.trim()) {
newErrors.email = t("errors.emailRequired");
@@ -91,7 +96,8 @@ export default function ContactPage() {
// Reset form and show success
setFormData({
inquiryType: "",
name: "",
firstName: "",
lastName: "",
email: "",
company: "",
message: "",
@@ -211,45 +217,69 @@ export default function ContactPage() {
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div className="space-y-2">
<label
htmlFor="name"
htmlFor="firstName"
className="block text-sm font-medium text-foreground"
>
{t("fields.name.label")}{" "}
{t("fields.firstName.label")}{" "}
<span className="text-red-500">*</span>
</label>
<Input
id="name"
id="firstName"
type="text"
value={formData.name}
onChange={(e) => handleInputChange("name", e.target.value)}
placeholder={t("fields.name.placeholder")}
value={formData.firstName}
onChange={(e) =>
handleInputChange("firstName", e.target.value)
}
placeholder={t("fields.firstName.placeholder")}
/>
{errors.name && (
<p className="text-sm text-red-600">{errors.name}</p>
{errors.firstName && (
<p className="text-sm text-red-600">{errors.firstName}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="email"
htmlFor="lastName"
className="block text-sm font-medium text-foreground"
>
{t("fields.email.label")}{" "}
{t("fields.lastName.label")}{" "}
<span className="text-red-500">*</span>
</label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder={t("fields.email.placeholder")}
id="lastName"
type="text"
value={formData.lastName}
onChange={(e) =>
handleInputChange("lastName", e.target.value)
}
placeholder={t("fields.lastName.placeholder")}
/>
{errors.email && (
<p className="text-sm text-red-600">{errors.email}</p>
{errors.lastName && (
<p className="text-sm text-red-600">{errors.lastName}</p>
)}
</div>
</div>
<div className="space-y-2">
<label
htmlFor="email"
className="block text-sm font-medium text-foreground"
>
{t("fields.email.label")}{" "}
<span className="text-red-500">*</span>
</label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder={t("fields.email.placeholder")}
/>
{errors.email && (
<p className="text-sm text-red-600">{errors.email}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="company"

33
apps/website/app/api/contact/route.ts
View File

@@ -1,10 +1,12 @@
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { Resend } from "resend";
import { submitToHubSpot, getHubSpotUTK } from "@/lib/hubspot";
interface ContactFormData {
inquiryType: "support" | "sales" | "other";
name: string;
firstName: string;
lastName: string;
email: string;
company: string;
message: string;
@@ -28,7 +30,8 @@ export async function POST(request: NextRequest) {
// Validate required fields
if (
!body.inquiryType ||
!body.name ||
!body.firstName ||
!body.lastName ||
!body.email ||
!body.company ||
!body.message
@@ -48,15 +51,33 @@ export async function POST(request: NextRequest) {
);
}
// Determine recipient email based on inquiry type
// Submit to HubSpot if it's a sales inquiry
if (body.inquiryType === "sales") {
try {
const hutk = getHubSpotUTK(request.headers.get("cookie") || undefined);
const hubspotSuccess = await submitToHubSpot(body, hutk);
if (hubspotSuccess) {
console.log("Successfully submitted sales inquiry to HubSpot");
} else {
console.warn(
"Failed to submit sales inquiry to HubSpot, but continuing with email",
);
}
} catch (error) {
console.error("Error submitting to HubSpot:", error);
// Continue with email even if HubSpot fails
}
}
// Format email content
const emailSubject = `[${body.inquiryType.toUpperCase()}] New contact form submission from ${body.name}`;
const emailSubject = `[${body.inquiryType.toUpperCase()}] New contact form submission from ${body.firstName} ${body.lastName}`;
const emailBody = `
New contact form submission:
Type: ${body.inquiryType}
Name: ${body.name}
First Name: ${body.firstName}
Last Name: ${body.lastName}
Email: ${body.email}
Company: ${body.company}
@@ -83,7 +104,7 @@ Sent from Dokploy website contact form
const confirmationSubject =
"Thank you for contacting Dokploy - We received your message";
const confirmationBody = `
Hello ${body.name},
Hello ${body.firstName} ${body.lastName},
Thank you for reaching out to us! We have successfully received your message and our team will get back to you as soon as possible.