CODEWITHSUNDEEP
javascriptreactjsgatsbynetlify
user11834465
user11834465

Reputation:

Netlify is not detecting GatsbyJS form

I have made a simple contact form that takes in a name, email, and text box.

The form has all the necessary elements for Netlify to detect such as data-netlify="true" and data-netlify-honeypot="bot-field". Everything else seems to be following the conventions explained by the Netlify/React form blogs.

TestContactForm.component.jsx

import React, { useState } from "react"

const TestContactForm = () => {
  const [formInput, setFormInput] = useState({
    name: "",
    email: "",
    message: "",
  })

  const onChange = e => {
    setFormInput({
      ...formInput,
      [e.target.name]: e.target.value,
    })
  }

  return (
    <form
      name="contact"
      method="post"
      action="/thanks"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
    >
      <input type="hidden" name="form-name" value="contact" />
      <div hidden>
        <label>
          Don’t fill this out: <input name="bot-field" />
        </label>
      </div>

      <div>
        <label htmlFor="name">Hello, my name is</label>
        <input
          name="name"
          id="name"
          type="text"
          placeholder="Jane Doe"
          required
          value={formInput.name}
          onChange={onChange}
        />
      </div>

      <div>
        <label htmlFor="email">Hello, my name is</label>
        <input
          name="email"
          id="email"
          type="text"
          placeholder="[email protected]"
          required
          value={formInput.email}
          onChange={onChange}
        />
      </div>

      <div>
        <label htmlFor="message">I want to</label>
        <textarea
          name="message"
          id="message"
          rows="5"
          maxLength="250"
          placeholder="briefly share an idea about..."
          required
          value={formInput.message}
          onChange={onChange}
        ></textarea>
      </div>

      <button type="submit">SEND</button>
    </form>
  )
}

export default TestContactForm

I have used practically the same code for forms on other websites hosted on Netlify, and they work fine.

/, /thanks, and /404 are all inside the same pages folder within src.

I am not sure what went wrong with this one.

Can someone point out where the error here is spawning from?

Thanks!

Upvotes: 1

Views: 111

Answers (1)

user11834465
user11834465

Reputation:

Solution

Turns out the cause of the error has nothing to do with Netlify or Gatsby.

It has to do with the animation library I was using, which was react-spring.

I was animating the fade in/out animation for the contact card using the useTransition hook, which defaults to false at the start. This effectively takes the contact card out of the DOM element, so Netlify was not able to detect it. As a solution, I switched to using the useSpring hook, which hides the contact card with opacity: 0 and pointer-events: none instead.

This solved the issue.

Upvotes: 2

Related Questions