Hi,
I have tried everything I can think of and went through the Form Problems support guide and cannot figure out why my form isn’t working. I’m sure it has to be something silly simple I’m missing or something depreciated maybe. Can you take a look on your end for me when you can?
Thank you so much!
Tom
Hi, @tjhammer845. Additional details would help us to troubleshoot. Would you please send us as many of the details below as possible?
Hi Luke! Sorry about that. This is my first time posting in this forum. Here is the information you asked me for:
The URL for your live form as you want visitors to use it
https://test.vivaznewhaven.com/contact/
The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
https://codepen.io/tjhammer845/pen/eYvJerB
The form name that you’ve set and that shows in our UI
“contact v1”
Any errors or logs from the Netlify build logs, dashboard or browser developer console
Gatsby Build Log:
PS C:\Users\tjham\Websites\vivaz-cantina> gatsby build
success open and validate gatsby-configs - 0.192s
success load plugins - 3.620s
success onPreInit - 0.101s
success initialize cache - 0.008s
success copy gatsby files - 0.478s
success onPreBootstrap - 0.048s
success createSchemaCustomization - 0.257s
success Contentful: Sync changed items - 0.110s - 0/1000 9107.69/s
success Contentful: Fetch data (d4xz79yaimui-master) - 0.431s
info Updated entries 0
info Deleted entries 0
info Updated assets 0
info Deleted assets 0
success Contentful: Process data (d4xz79yaimui-master) - 0.061s
info Creating 8 Contentful Menu nodes
info Creating 11 Contentful asset nodes
success Contentful: Create nodes (d4xz79yaimui-master) - 0.029s
success Checking for changed pages - 0.003s
success source and transform nodes - 1.849s
success building schema - 1.400s
info Total nodes: 141, SitePage nodes: 9 (use --verbose for breakdown)
success createPages - 0.124s
success Checking for changed pages - 0.002s
success createPagesStatefully - 0.271s
success Cleaning up stale page-data - 0.009s
success update schema - 0.156s
success onPreExtractQueries - 0.004s
success extract queries from components - 11.237s
success write out redirect data - 0.004s
success Build manifest and related icons - 0.235s
success onPostBootstrap - 0.687s
info bootstrap finished - 31.292s
success run static queries - 0.060s - 2/2 33.27/s
success run page queries - 0.456s - 8/8 17.54/s
success write out requires - 0.019s
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
No errors in console log from what I see.
I’ve tried a few things among them, starting with the basic form setup provided by Netlify, using standard html form tags, changing netlify with data-netlify in the Form starting tag, I’ve set up a custom domain to see if that made any difference. I’ve tried Gatsby clean, updated my Gatsby version, clearing cache and redeploying in netlify. I redirect to the success page when the form is submitted locally and on the server, but there is a short amount of time the 404 page loads before it directs, which is a little weird.
Hi, @tjhammer845. Now that is detailed information!
Normally, when you define a form in HTML, our service will add a hidden input field named ‘form-name’ containing the name of the form.
To be clear, you will not see this input if you download the raw HTML from the deploy page:
However, you will see the hidden input if you visit the page in a browser.
Here is an example with a test site of mine. The raw file from the deploy has this:
<p><form name="contact-copy" data-netlify-recaptcha=true netlify-honeypot="bot-field" method="POST" data-netlify="true">
<p>
<label>Your Name: <input type="text" name="name" /></label><br />
</p>
<p hidden>
<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
</p>
By comparison, if I make an HTTP request for that page, I see the input added:
<p><form name='contact-copy' data-netlify-recaptcha='true' method='POST' enctype='multipart/form-data'><input type='hidden' name='form-name' value='contact-copy' />
<p>
<label>Your Name: <input type="text" name="name" /></label><br />
</p>
<p hidden>
<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
</p>
Note the <input type='hidden' name='form-name' value='contact-copy' /> in the second version. This was added by the Netlify forms processing.
However, for your file (/contact/index.html) I see this field defined in both the raw deploy version and when requested via HTTP - and the value is wrong:
<form name='contact v1' method='post' data-netlify-recaptcha='true' action='/thank-you' class><input type="hidden" name="bot-field" /><input type="hidden" name="form-name" value="contact" />
<div class="row">
The input with name “form-name” has the value of “contact” and not “contact v1”. This is what is causing the form submissions to fail: the form-name input value is wrong.
Again, if you delete that input tag, our service should create the correct input tagfor you. Would you please try deleting it to see if this resolves the issue?
Hey @luke. Thank you for the feedback. That makes a lot more sense to me and I now understand the auto insertion input process a lot better. I tried taking out the input and just shortening the name of the form to “contact”, however, I’m still not seeing any verified submissions. Does the gatsby-config require any plugin data? I don’t have anything included in there but didn’t see any documentation requiring it. Here is my contact form component with the revisions you advised:
import React from "react"
import { Button, Col, Form, Row } from "react-bootstrap"
export default function ContactForm() {
return (
<Form
name="contact"
method="post"
data-netlify="true"
action="/thank-you"
netlify-honeypot="bot-field"
>
<Row>
<Col md={6}>
<p hidden>
<input name="bot-field" />
</p>
<Form.Group>
<Form.Label htmlFor="first-name">First Name</Form.Label>
<Form.Control required size="lg" type="text" name="first-name" />
</Form.Group>
</Col>
<Col md={6}>
<Form.Group>
<Form.Label htmlFor="last-name">Last Name</Form.Label>
<Form.Control required size="lg" type="text" name="last-name" />
</Form.Group>
</Col>
</Row>
<Row>
<Col md={6}>
<Form.Group>
<Form.Label htmlFor="email">Email</Form.Label>
<Form.Control required size="lg" type="email" name="email" />
</Form.Group>
</Col>
<Col md={6}>
<Form.Group>
<Form.Label htmlFor="phone">Phone (Optional)</Form.Label>
<Form.Control size="lg" type="tel" name="phone" />
</Form.Group>
</Col>
</Row>
<Row>
<Col md={12}>
<Form.Group>
<Form.Label htmlFor="message">Message</Form.Label>
<Form.Control
required
as="textarea"
rows="3"
placeholder="Enter your message here."
name="message"
/>
</Form.Group>
</Col>
</Row>
<Row>
<Col md={12} className="d-flex justify-content-lg-end">
<Button className="mr-3" type="reset" value="Eraser">
Clear
</Button>
<Button type="submit">Send</Button>
</Col>
</Row>
</Form>
)
}
Could there also be configuration required for this within Netlify? I tried a simpler form setup from Stackbit.com but still have no verified or spam submissions.
Hey there, @tjhammer845 
Sorry for the slow response here! We have been a bit underwater the past two weeks. Are you still encountering issues with your form? If so, please let me know and I will loop in a Support Engineer.
If not, please share your solution! Thank you 
Hey Hillary,
I appreciate the response! I decided to give up on the time being with recaptcha on the form. I was able to get honeypot working with submissions so that satisfies the need for spam prevention enough I think. If there is someone who could look into it for me, I’m happy to share my code and see if there’s something silly i’m missing. Thanks again for the email and I hope you have a great Memorial Day!
All the best,
Tom Hammer
If I’m reading the above prognosis right, it’s a case of ensuring that the HTML and JS form names match. Given the form is defined as v1 in the UI then that’ll be the name you need.