- Site name: https://essie-doula.netlify.app/
- Did you try Ask Netlify, our generative AI chatbot, before posting? Yes.
I don’t know why, but the contact form on my website won’t be detected. I’ve enabled form detection, deployed, and it’s permanently stuck on loading this section: https://app.netlify.com/projects/essie-doula/forms#usage
Please help! Below is the form markup I’m using:
<form
name="contact"
method="POST"
data-netlify="true"
action="/success.html"
>
<input type="hidden" name="form-name" value="contact" />
<div>
<Label htmlFor="name" className="block text-sm font-medium text-ebony-700 mb-2">
Name *
</Label>
<Input
id="name"
name="name"
type="text"
required
className="w-full px-4 py-3 border border-ash-gray-300 rounded-lg focus:ring-2 focus:ring-copper-400 focus:border-transparent transition-all duration-200"
placeholder="Your name"
/>
</div>
<div>
<Label htmlFor="email" className="block text-sm font-medium text-ebony-700 mb-2">
Email Address *
</Label>
<Input
id="email"
name="email"
type="email"
required
className="w-full px-4 py-3 border border-ash-gray-300 rounded-lg focus:ring-2 focus:ring-copper-400 focus:border-transparent transition-all duration-200"
placeholder="your.email@example.com"
/>
</div>
<div>
<Label htmlFor="phone" className="block text-sm font-medium text-ebony-700 mb-2">
Phone Number
</Label>
<Input
id="phone"
name="phone"
type="tel"
className="w-full px-4 py-3 border border-ash-gray-300 rounded-lg focus:ring-2 focus:ring-copper-400 focus:border-transparent transition-all duration-200"
placeholder="(555) 123-4567"
/>
</div>
<div>
<Label htmlFor="dueDate" className="block text-sm font-medium text-ebony-700 mb-2">
Due Date (if applicable)
</Label>
<Input
id="dueDate"
name="dueDate"
type="date"
className="w-full px-4 py-3 border border-ash-gray-300 rounded-lg focus:ring-2 focus:ring-copper-400 focus:border-transparent transition-all duration-200"
/>
</div>
<div>
<Label htmlFor="message" className="block text-sm font-medium text-ebony-700 mb-2">
Message *
</Label>
<Textarea
id="message"
name="message"
required
rows={5}
className="w-full px-4 py-3 border border-ash-gray-300 rounded-lg focus:ring-2 focus:ring-copper-400 focus:border-transparent transition-all duration-200"
placeholder="Have any questions? Feel free to ask."
/>
</div>
<Button
type="submit"
className="w-full bg-copper-400 hover:bg-copper-600 text-white py-3 px-6 rounded-lg text-lg font-medium transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
>
Send Message
</Button>
</form>
Thank you in advance.
