Site name: ashtonguidebeck-app
I have a fairly simple Nextjs site (using the Pages directory). I have a contact form built with Formik. The form is detected, as is the honeypot field. But for the life of me, I can’t get a single submission to come through. I am getting back a 200 response, but no submission is showing up in the dashboard. I’ve spent 3 days trying to troubleshoot this issue. I’ve read the docs, I’ve read MANY Support Forums here, and nothing helps/works.
Things I have and have done so far:
- Form has
data-netlify="true"anddata-netlify-honeypot="bot-field"attributes. - Form has a hidden field with the form name.
- Form has a visually hidden “bot-field”
- A static html file added to the public directory within the project, with a hidden copy of the form, for form detection (which is working).
- Included the form name and bot-field value in the AJAX response on submit.
- Submitted test responses with correct/non-spam copy to ensure they go to valid submissions.
- Checked spam submissions (nothing there).
The live version of the site was a single page, built with create react app, and the form submission was working. This new work with a next js/multipage set up isn’t live yet, but I’ve been testing through deploy previews.
Here’s what I have in my code.
ConnectForm.tsx
<Formik
initialValues={initialValues}
validate={(values: FormValues) => {
const errors = {} as FormErrors;
if (!values.fullName) {
errors.fullName = 'Required';
}
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
if (!values.message) {
errors.message = 'Required';
}
return errors;
}}
onSubmit={(values: FormValues, { setSubmitting, resetForm }) => {
setSubmitting(true);
const botField = document.getElementsByName(
'bot-field'
)[0] as HTMLInputElement;
if (botField && botField.value !== '') {
values['bot-field'] = botField.value;
}
netlifySubmit(values)
.then(() => {
setTimeout(() => {
resetForm();
setMessage(
'Thank you for your message. I will be in touch shortly.'
);
window.scrollTo({
top: 100,
left: 100,
behavior: 'smooth',
});
setSubmitting(false);
}, 500);
})
.catch((error) => {
// eslint-disable-next-line no-console
console.log(error);
setTimeout(() => {
setMessage(
`There was an error with your submission${
error ? `: ${error}` : '.'
}`
);
setSubmitting(false);
}, 500);
});
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
/* and other goodies */
}) => (
<form
name="connect"
onSubmit={handleSubmit}
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input
type="hidden"
name="form-name"
value={values['form-name']}
/>
<VisuallyHidden as="div">
<label htmlFor="bot-field">
Don't fill this out if you're human:
<input name="bot-field" />
</label>
</VisuallyHidden>
<InputWrap
id="fullName"
label="Full Name"
error={errors.fullName}
touched={touched.fullName}
>
<input
id="fullName"
type="text"
name="fullName"
placeholder="FULL NAME*"
required
onChange={handleChange}
onBlur={handleBlur}
value={values.fullName}
/>
</InputWrap>
<InputWrap
id="email"
label="Email"
error={errors.email}
touched={touched.email}
>
<input
id="email"
type="email"
name="email"
placeholder="EMAIL ADDRESS*"
required
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
</InputWrap>
<InputWrap
type="textarea"
id="message"
label="Message"
error={errors.message}
touched={touched.message}
>
<textarea
id="message"
name="message"
placeholder="TYPE YOUR MESSAGE HERE."
required
onChange={handleChange}
onBlur={handleBlur}
value={values.message}
/>
</InputWrap>
<Styled.Submit type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting' : 'Submit'}
</Styled.Submit>
</form>
)}
</Formik>
netlifySubmit.ts
/**
* send form values to netlify
* @param {object} values
*/
const netlifySubmit = async (values: any) => {
const encode = (data: any) => {
return Object.keys(data)
.map(
(key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
)
.join('&');
};
return fetch('/connect', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode(values),
});
};
export default netlifySubmit;
public/static-form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#6C674B" />
<meta name="robots" content="noindex" />
<meta
name="description"
content="'Systemically Trained Therapist | Transitioning out of Clinical Roles'"
/>
<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<title>Ashton Guidebeck</title>
</head>
<body>
<!-- Hidden Form for Netlify -->
<form name="connect" netlify netlify-honeypot="bot-field" hidden>
<label htmlFor="bot-field">
Don't fill this out if you're human:
<input name="bot-field" />
</label>
<input type="text" id="fullName" name="fullName" />
<input type="email" id="email" name="email" />
<textarea id="message" name="message"></textarea>
</form>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Again, just looking to see if I’m missing anything as I’ve been staring at this code for days and still can’t get it working.
