From fa7be4c42601997db4aa51d91c72fa854d7420e3 Mon Sep 17 00:00:00 2001 From: Kismet Hasanaj Date: Sun, 3 May 2026 01:39:28 +0200 Subject: [PATCH] adding a webform --- .env.example | 1 + .gitignore | 3 + README.md | 14 +++++ app/page.tsx | 170 +++++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 164 insertions(+), 24 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 00000000..2a3bc248 --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY=YOUR_WEB3FORMS_ACCESS_KEY diff --git a/.gitignore b/.gitignore index 8e04fe7a..8a121d73 100644 --- a/.gitignore +++ b/.gitignore @@ -32,5 +32,8 @@ node_modules/ out/ tsconfig.tsbuildinfo +# ---> Local environment config +.env.local + # ---> Local backups *.bak diff --git a/README.md b/README.md index 9cda7c98..886e8455 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,20 @@ Clone the Gitea repo: git clone http://10.10.10.11:3000/kismet.hasanaj/novarix.uk.git /var/www/novarix.uk ``` +If you want the built-in contact form to send mail through Web3Forms, create a +local environment file before building: + +```bash +cd /var/www/novarix.uk +cp .env.example .env.local +``` + +Then edit `.env.local` and set: + +```bash +NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY=your_web3forms_access_key +``` + Install the website dependencies and build the static site: ```bash diff --git a/app/page.tsx b/app/page.tsx index 35ee5840..463253ca 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -30,6 +30,8 @@ import { openCookieBanner } from "@/components/CookieBanner"; // Type for the mouse-pointer position used to move the background glow. type PointerState = { x: number; y: number }; +const WEB3FORMS_ENDPOINT = "https://api.web3forms.com/submit"; + export default function HomePage() { // --------------------------------------------------------------------------- // STATE @@ -39,6 +41,11 @@ export default function HomePage() { // --------------------------------------------------------------------------- const [pointer, setPointer] = useState({ x: 50, y: 22 }); const [copiedEmail, setCopiedEmail] = useState(false); + const [formStatus, setFormStatus] = useState< + "idle" | "submitting" | "success" | "error" + >("idle"); + const [formMessage, setFormMessage] = useState(""); + const web3FormsKey = process.env.NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY; // --------------------------------------------------------------------------- // BACKGROUND POSITION @@ -65,6 +72,63 @@ export default function HomePage() { } } + async function handleContactSubmit(event: React.FormEvent) { + event.preventDefault(); + + if (!web3FormsKey) { + setFormStatus("error"); + setFormMessage( + "Contact form is not configured yet. Please use the copy email button for now." + ); + return; + } + + const form = event.currentTarget; + const formData = new FormData(form); + formData.append("access_key", web3FormsKey); + formData.append("subject", "Novarix website enquiry"); + formData.append("from_name", "Novarix website"); + formData.append("replyto", String(formData.get("email") ?? "")); + + const payload = Object.fromEntries(formData); + + setFormStatus("submitting"); + setFormMessage("Sending message..."); + + try { + const response = await fetch(WEB3FORMS_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify(payload), + }); + + const result = (await response.json()) as { + success?: boolean; + message?: string; + }; + + if (response.ok && result.success) { + form.reset(); + setFormStatus("success"); + setFormMessage("Message sent. We will get back to you within one working day."); + return; + } + + setFormStatus("error"); + setFormMessage( + result.message || "The message could not be sent. Please try again." + ); + } catch { + setFormStatus("error"); + setFormMessage( + "The message could not be sent right now. Please try again or copy the email address instead." + ); + } + } + return (
- {/* Email button + small response-time note */} -
- - {site.contact.email} -
+ + +
+ + +
+ + - - - {site.contact.note} - -
+