site: https://blissful-shaw-3eb3e6.netlify.app/
I’ve followed the docs and tuts found here:
- Forms setup | Netlify Docs
- gatsby-netlify-form-example-v2/contact.js at master · sw-yx/gatsby-netlify-form-example-v2 · GitHub
- How To Use Netlify Forms With Gatsby - DEV Community 👩💻👨💻
I see this in my dashboard:
"Waiting on those submissions…
We have detected an active form setup but haven’t received submissions yet – hang in there!"
I get successful POST requests:
Request Method: POST
Status Code: 200
...
server: Netlify
status: 200
...
:authority: blissful-shaw-3eb3e6.netlify.app
:method: POST
:path: /
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
content-length: 100
content-type: application/x-www-form-urlencoded
origin: https://blissful-shaw-3eb3e6.netlify.app
pragma: no-cache
referer: https://blissful-shaw-3eb3e6.netlify.app/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36
form-name: contact
firstName: Mike
lastName: Test
email: test@test.com
subject: testing
message: testing
My form looks like this:
import { navigate } from 'gatsby-link';
import { HomepageIntro } from '../components/homepageIntro';
import { LayoutHomepage } from '../components/layoutHomepage';
import SEO from '../components/seo';
import { FormInput } from '../components/patterns/formInput';
const encode = data => {
return Object.keys(data)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
.join('&');
};
const IndexPage = () => {
const [introViewed, setIntroViewed] = useState(false);
const [formState, setFormState] = React.useState({});
const handleChange = e => {
setFormState({ ...formState, [e.target.name]: e.target.value });
};
const 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'),
...formState,
}),
})
.then(() => navigate(form.getAttribute('action')))
.catch(error => alert(error));
};
useEffect(() => {
const windowGlobal = typeof window !== 'undefined' && window;
if (windowGlobal) {
setIntroViewed(localStorage.getItem('introViewed'));
}
}, []);
return (
<Fragment>
{!introViewed && <HomepageIntro />}
<LayoutHomepage>
<SEO title="Home" />
<article
className={
introViewed ? 'contact-page' : 'contact-page contact-page--animated'
}
>
<div className="contact-page__content-wrapper container">
<h1 className="contact-page__heading">
<span className="contact-page__heading--pt1">Contact</span>
<span className="contact-page__heading--pt2">Neue</span>
</h1>
<p>For inquiries, please fill out the email form below.</p>
<form
name="contact"
className="form"
action="/"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
onSubmit={handleSubmit}
>
<input type="hidden" name="form-name" value="contact" />
<ul className="form__list">
<li hidden>
<label>
Don’t fill this out:{' '}
<input name="bot-field" onChange={handleChange} />
</label>
</li>
<li className="form__item form__item--half">
<FormInput
id="firstName"
label="First Name"
labelClass="visuallyhidden"
inputClass="form__input"
placeholder="first name"
onChange={handleChange}
/>
</li>
<li className="form__item form__item--half">
<FormInput
id="lastName"
label="Last Name"
labelClass="visuallyhidden"
inputClass="form__input"
placeholder="last name"
onChange={handleChange}
/>
</li>
<li className="form__item form__item--half">
<FormInput
id="email"
label="Email Address"
labelClass="visuallyhidden"
inputClass="form__input"
placeholder="email address"
onChange={handleChange}
/>
</li>
<li className="form__item form__item--half">
<FormInput
id="subject"
label="Subject"
labelClass="visuallyhidden"
inputClass="form__input"
placeholder="subject"
onChange={handleChange}
/>
</li>
<li className="form__item form__item--full">
<FormInput
id="message"
label="Message"
labelClass="visuallyhidden"
inputClass="form__input"
placeholder="message"
type="textarea"
onChange={handleChange}
/>
</li>
<li>
<input
type="submit"
value="Submit"
className="form__input form__input--submit"
/>
</li>
</ul>
</form>
</div>
</article>
</LayoutHomepage>
</Fragment>
);
};
export default IndexPage;
Yet I receive no submissions. Can’t figure out what I’m missing.
Thanks.