Domain: mppaatur.netlify.app/kontakt
Hi!
I’m trying to create a form, but it’s not working.
I’m using React/Next.js, and as far as I understand, I need to create a __forms.html file in my public folder and set up a similar form in my ContactForm component.
I believe I’ve done this by following the guidelines, but I can’t get it to work.
Form detection is enabled
If anyone can tell me what I might be doing wrong, I’d really appreciate it. I’ve been through the documentation a million times.
Contactform Component:
"use client";
import { teambuildingTours, toursPrivate } from "@/app/data/data";
import { motion } from "framer-motion";
export default function ContactForm() {
return (
<form
name="contact"
method="POST"
netlify-honeypot="bot-field"
data-netlify="true"
className="p-6 bg-gray-800/50 w-full mx-auto rounded-lg text-baseText"
>
<motion.h2
className="text-3xl sm:text-4xl tracking-tight font-bold uppercase text-mainText"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 1.5 }}
>
Jeg er klar,{" "}
<motion.span
className="text-accent"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.75, duration: 1.5 }}
>
er I?
</motion.span>
</motion.h2>
<div className="space-y-4 mt-4">
<p>Udfyld formularen og vi kontakter dig hurtigst muligt! <br /> <span className="italic text-sm">
Vi bestræber os på at svare indenfor 3 hverdage</span></p>
<p>
<label className="flex flex-col gap-1">
Dit Navn:
<input
className="text-black rounded-sm px-2 py-1 outline-accent w-full"
required
type="text"
name="name"
/>
</label>
</p>
<p>
<label className="flex flex-col gap-1">
Din E-mail:
<input
type="email"
name="email"
required
className="text-black rounded-sm px-2 py-1 w-full"
/>
</label>
</p>
<p>
<label className="flex flex-col gap-1">
Vælg aktivitet fra listen:
<select
className="text-black rounded-sm px-2 py-1 w-full"
name="activity"
>
{/* Group for Guidede Ture */}
<optgroup label="Ture Privat">
{toursPrivate.map((item) => (
<option key={item.index} value={item.title}>
{item.title}
</option>
))}
</optgroup>
<optgroup label="Teambuilding:">
{teambuildingTours.map((item) => (
<option key={item.index} value={item.title}>
{item.title}
</option>
))}
</optgroup>
<option value="foredrag">Foredrag</option>
<option value="spoergsmaal">Spørgsmål</option>
</select>
</label>
</p>
<p>
<label className="flex flex-col gap-1">
Antal personer:
<input
type="number"
name="numberOfPeople"
className="text-black rounded-sm px-2 py-1 w-full"
/>
</label>
</p>
<p className="hidden">
<label>
Do not fill this out if you are human: <input name="bot-field" />
</label>
</p>
<p>
<label className="flex flex-col gap-1">
Besked:
<textarea rows={4} placeholder="Hej, vi er klar på at komme Paa Tur!"
className="text-black rounded-sm px-2 py-1 w-full"
name="message"
></textarea>
</label>
</p>
<div className="flex justify-center">
<button className="cta-btn" type="submit">
Send besked
</button>
</div>
</div>
</form>
);
}
public/__forms.html page
<!DOCTYPE html>
<html lang="da">
<head>
</head>
<body>
<form name="contact" method="POST" netlify-honeypot="bot-field" data-netlify="true">
<p>
<label>
Your Name:
<input required type="text" name="name" />
</label>
</p>
<p>
<label>
Your Email:
<input type="email" name="email" />
</label>
</p>
<p>
<label>
Select Activity:
<select name="activity">
<!-- Options will go here -->
</select>
</label>
</p>
<p>
<label>
Number of People:
<input type="number" name="numberOfPeople" />
</label>
</p>
<p class="hidden">
<label>
Do not fill this out if you are human: <input name="bot-field" />
</label>
</p>
<p>
<label>
Message:
<textarea rows="4" placeholder="Hello, we are ready to go!" name="message"></textarea>
</label>
</p>
<p>
<button type="submit">Send Message</button>
</p>
</form>
</body>
</html>
Best regards
Andreas
,
