Forms, Gridsome, and Netlify

Published February 1st, 2019 1m read time

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.

Brandon Pittman

Hello, there! I'm Brandon. I'm originally from Ohio, but now I live in Nagoya, Japan. I love the Web, programming, coffee, cooking and A Song of Ice and Fire.

My usual toolset is Vue.js, Gridsome and Tailwind. I'm interested in building web sites and applications using the JAMstack.