Hi there,
I’m recently deployed a Netlify site with Netlify forms. Though, my form is not being detected. I’ve tried to debug this issue and I’ve done the following:
- completely deleting the form and added it again according to the docs
- ensuring that the
name and data-netlify=true attributes exist
- making these changes and then deploying so that Netlify can pick the changes (it didn’t)
- adding a working form from another website this did not work which suggests a larger problem that just markup*
- ensuring a strong internet connection as well as correct form validation
My site name is https://develop.ladderdesigns.co
Additionally, here’s my opening form tag:
<form
className="p-8 text-base bg-white rounded-xl"
name="contact"
method="POST"
netlify-honeypot="bot-field"
action="?formSubmit=success"
data-netlify="true"
>
I think my issue may have something to do with my action value. Other than that, my form is identical to the example given on the documentation. For reference here is a link to the repo and file where the issue is occurring. Please look at link 217 for reference.
Hey @jseanpatel
As you are using Next.js which renders everything in JavaScript (including forms), have you checked out the Work with JavaScript-rendered forms section of the documentation? It states:
Create a hidden HTML form with the data-netlify="true" attribute or a netlify attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form.
This means you need to create a form in a HTML file inside the public directory for Netlify to detect. This form needs the same inputs, with the same names as the form that is rendered by Next.
Hi @coelmay, thanks for getting back to me.
Yes I am using Next.js. I went ahead and followed the steps on that guide including creating a hidden HTML form and adding the data-netlify=“true” attribute as well as input fields with name atributes to match the inputs of my original form.
For reference here is the snippet of both my original form and the hidden form:
<form
name="contact"
data-netlify="true"
netlify-honeypot="bot-field"
hidden
>
<input type="text" name="firstname" />
<input type="text" name="lastname" />
<input type="email" name="email" />
<textarea name="message" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
<form
className="p-8 text-base bg-white rounded-xl"
name="contact"
method="POST"
netlify-honeypot="bot-field"
action="#"
data-netlify="true"
>
<div className="flex flex-wrap mb-6 -mx-3">
<div>
<input type="hidden" name="form-name" value="contact" />
</div>
<div className="hidden">
<label>
Don’t fill this out if you’re human:{" "}
<input name="bot-field" />
</label>
</div>
<div className="w-full px-3 mb-6 md:w-1/2 md:mb-0">
<label
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase"
htmlFor="firstname"
>
First Name
</label>
<input
className="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border rounded appearance-none md:mb-3 focus:outline-none focus:bg-white focus:border-gray-300"
id="firstname"
type="text"
placeholder="Jane"
name="firstname"
/>
</div>
<div className="w-full px-3 md:w-1/2">
<label
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase"
htmlFor="lastname"
>
Last Name
</label>
<input
className="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-300"
id="lastname"
name="lastname"
type="text"
placeholder="Doe"
/>
</div>
</div>
<div className="flex flex-wrap mb-6 -mx-3">
<div className="w-full px-3">
<label
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase"
htmlFor="email"
>
E-mail
</label>
<input
className="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-300"
id="youremail"
name="email"
placeholder="janedoe@mail.com"
type="email"
/>
</div>
</div>
<div className="flex flex-wrap mb-6 -mx-3">
<div className="w-full px-3">
<label
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase"
htmlFor="message"
>
Message
</label>
<textarea
className="block w-full h-48 px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none resize-none no-resize focus:outline-none focus:bg-white focus:border-gray-300"
id="message"
name="message"
></textarea>
</div>
</div>
<div className="flex flex-row justify-center">
{/* TODO: Make the button look better and rounded like the landing */}
<button
type="submit"
className="px-4 py-2 text-sm font-bold leading-5 text-center text-white transition duration-150 ease-in-out bg-orange-500 rounded-full shadow-lg focus:outline-none hover:opacity-75 focus:opacity-75"
>
Send Message
</button>
</div>
</form>
My form is still not being detected. Here are some other things that I have tried:
- ensuring that the “Run form detection” option is selected in the Netlify settings
- double checking that each input has a name field
- ensuring the form has a name m(ine does name=“contact”)
None of these options work, I would appreciate any further advice that you have. For reference here (starting on line 217) is the original repo.
Thank you!
It appears the “hidden form” is contained in the same page as the form.
As I mentioned previously, this placeholder/hidden form, needs to reside in a HTML file inside the public directory of the project, not within the TSX files.
Thanks for this clarification. I went ahead and added it in the appropriate place. Now the form is being detected but I’m unable to view submissions. Any advice on this issue?
In what manner can you not see them? There are none showing e.g.
After I make a successful submission on the deployed version of the website, there are no submissions under the “verified submissions” or the “spam submissions”
Likely the action="?formSubmit=success" is the issue as this is not an actual page. You may either set the action to a “real” file (not something rendered in JS by Next) or use JavaScript to handle the form submission.
1 Like
