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>
)
}
}