Forms, Gridsome, and Netlify
Published almost 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
expected.