Forms, Gridsome, and Netlify
Published about 2 years ago • 2 min read
How to set up a contact form on Netlify when you're using an Vue-based SSG like Gridsome.
If you didn't notice already, I've added a form to this here site.
Since this is a JAMstack site, I have no server, per se, to process a form.
That's where Netlify's forms come in. If you poke around the documentation,
it'll say you just have to add the
netlify attribute to any old HTML form.
<form name="contact" method="post" netlify> <div> <label for="name" >Name</label> <input required name="name" type="text" /> </div> <button type="submit">Send</button> </form>
Sounds great, but not so fast. If you're uploading a pre-built folder of files,
this actually will work. Most people, I'd venture to say, are running a build
script on a
src folder to build their site each time the
git push happens.
In that case, Netlify doesn't seem to understand your form very well. If you
poke around the Vue-specific instructions, you'll see a line like this...
<input type="hidden" name="form-name" value="contact" />
When I read this, I thought it was because SPAs wouldn't have the proper HTML
on build, but my static site builds full HTML, so I'm safe, right? Wrong. I
guess the build process messes with Netlify's form system, so you need to add
this extra hidden field if you're building your site with a static generator
like Gridsome. Just add this hidden field, and match the value in with the
name you put on the form itself. After that everything should work as