Form appears to be working but no Verified Submissions

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?

  1. The URL for your live form as you want visitors to use it
  2. 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 ”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse

Hi Luke! Sorry about that. This is my first time posting in this forum. Here is the information you asked me for:

  1. The URL for your live form as you want visitors to use it
    https://test.vivaznewhaven.com/contact/

  2. 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 ”)

  1. The form name that you’ve set and that shows in our UI
    “contact v1”

  2. 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:

    • css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[1]!./node_modules/gatsby/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!./node_modules/react-multi-carousel/lib/styles.css
      despite it was not able to fulfill desired ordering with these modules:
    • css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[1]!./node_modules/gatsby/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!./src/components/css/layout.css
      • couldn’t fulfill desired order of chunk group(s) component—src-pages-index-js
      • while fulfilling desired order of chunk group(s) component—src-pages-404-js, component—src-pages-about-js,
        component—src-pages-thank-you-js
        warn chunk styles [mini-css-extract-plugin]
        Conflicting order. Following module has been added:
    • css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[1]!./node_modules/gatsby/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!./src/components/css/mltp-carousel.css
      despite it was not able to fulfill desired ordering with these modules:
    • css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[1]!./node_modules/gatsby/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!./src/components/css/layout.css
      • couldn’t fulfill desired order of chunk group(s) component—src-pages-index-js
      • while fulfilling desired order of chunk group(s) component—src-pages-404-js, component—src-pages-about-js,
        component—src-pages-thank-you-js
        success Building production JavaScript and CSS bundles - 60.738s
        success Rewriting compilation hashes - 0.004s
        success Building HTML renderer - 23.872s
        success Building static HTML for pages - 1.059s - 15/15 14.17/s
        success Delete previous page data - 0.005s
        success onPostBuild - 0.017s
        info Done building in 118.505979201 sec

No errors in console log from what I see.

  1. Description of anything you have tried that did or didn’t help or make things better/worse

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:

download-deploy-button-small

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&rsquo;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&rsquo;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?

1 Like

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 :wave:

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 :slight_smile:

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

1 Like

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.

1 Like