Netlify FormsをVuePressで利用する

NetlifyにはHTMLのform要素を書くだけで問い合わせフォームが実装できる、素敵な機能があります。

その書き方のサンプルは公式サイトやネット上にたくさんありましたが、そのサンプルをそのままコピペしてもVuePress + Netlifyではうまく動かなかったので、どのようにすれば動くのかを書いていきます。

まず公式サイトのサンプルはこんな感じ。

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

これを固定ページのmarkdownファイルに貼り付けるだけで動けばいいのですが、うまく動きません。

Netlify公式ブログ (opens new window)によれば、普通のサイトではNetlifyのビルド時に<input type="hidden" name="form-name" value="contact" />というような要素を埋め込むのですが、Static Site Generatorで作ったサイトはそれを消してしまうので、手動で埋め込む必要があるそうです。

VuePressで僕がやった解決策としては以下の感じ。

.vuepress/components/にNetlifyForm.vueというコンポーネントファイルを作る
NetlifyForm.vueにhidden要素を埋め込んだフォームを書き込む
コンタクトページのmarkdownから<NetlifyForm/>と書いてフォームを読み込む

NetlifyForm.vueの内容は以下の感じ。

<template>
<form name="contact" method="post" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  ...
</form>
</template>