Getting Forms to Work With Netlify Create (Visual Editor)

Support
, ,
1

Hi There,
I’m currently using netlify create to build a next.js website from a template.

I noticed on the template there is a contact form but it doesn’t do anything when submitted other than creating a javascript alert window.

How would I go about configuring the form to work with something like Netlify forms? I’m unfamiliar with next.js and can’t see any options in the visual editor to change what the form does when submitted.

Any help is appreciated, Thanks!

2

@Dylan_R The Netlify Forms documentation is here:

Some Next.js specific Netlify Forms documentation is here:

3

Thank you! That second article was very helpful!

It did take a bit of extra work to get it to work with typescript
I had to add “as any” when formatting the post request to the form html document.

await fetch("/__forms.html", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams(formData as any).toString(),
});

I also had to change the formData constructor from “event.target” to “formRef.current”

const formRef = React.createRef<HTMLFormElement>();
const formData = new FormData(formRef.current);

Thanks for your help though!

1 Like