Still not seeing forms in Netlify Dashboard

Hi, I’ve been following the docs and checking the forums but I still cannot see the forms in the dashboard.
could someone take a look at my code and let me know what I’ve missed or am doing wrong? Thanks

import { navigate } from 'gatsby-link'
import Layout from '../components/layout'

function encode(data) {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
    .join('&')
}

export default class Page extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isValidated: false }
  }

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    const form = e.target
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'),
        ...this.state,
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch((error) => alert(error))
  }

  render() {

    let page = this.props.pageContext.page
    return (
      <Layout>
        <div className="page__container">
        <div
          dangerouslySetInnerHTML={{
            __html: page.body,
          }}
          className="page__content"
        ></div>
        {page.handle === "contact" && (
          <div className="container">
            <form
                name="contact"
                method="post"
                action="/thanks/"
                data-netlify="true"
                data-netlify-honeypot="bot-field"
                onSubmit={this.handleSubmit}
              >
                {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
                <input type="hidden" name="form-name" value="contact" />
                <div hidden>
                  <label>
                    Don’t fill this out:{' '}
                    <input name="bot-field" onChange={this.handleChange} />
                  </label>
                </div>
                <div className="form-group">
                  <label className="label" htmlFor={'name'}>
                    Your name
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type={'text'}
                      name={'name'}
                      onChange={this.handleChange}
                      id={'name'}
                      required={true}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <label className="label" htmlFor={'email'}>
                    Email
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type={'email'}
                      name={'email'}
                      onChange={this.handleChange}
                      id={'email'}
                      required={true}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <label className="label" htmlFor={'message'}>
                    Message
                  </label>
                  <div className="control">
                    <textarea
                      className="textarea"
                      name={'message'}
                      onChange={this.handleChange}
                      id={'message'}
                      required={true}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <button className="button is-link" type="submit">
                    Send
                  </button>
                </div>
              </form>
          </div>
        )}
      </div>
      </Layout>
    )
  }
}

hey there, i hear that you have been following the docs, but did you see this guide already? always good to check before we dig in.

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile:

Not that I’m biased (okay a little) but I might also recommend this package for automatically handling Netlify Forms when running Gatsby :slight_smile:


Jon

Thanks for the link Perry. Here’s what I’ve updated:

  • changed the form name to a unique name

  • updated thank you route to thank-you.

  • checked out the gatsby-netlify-form-example-v2 and literally copied the form from the repo and updated the functions (this.handleChange instead of handleChange)

I still do not see the forms display. I’m attaching my link for further assistance.
https://agitated-lamport-0184aa.netlify.app/contact

Thanks Jon. Do you know if this would work on a preview? I’m currently have the plugin on a separate branch in a pull request so I can view it in preview but I still do not see the contact form in my dashboard.

Here’s the preview link.
https://5fade98bde2c120008f389ea–agitated-lamport-0184aa.netlify.app/contact

Well, long story short. I could not get my form to work on my repo. Instead, I found a repo with a Netlify form that worked and then added my site to this repo. Not ideal but at least it works.