Netlifyでのお問合せフォーム

2019年6月からホームページをWordPressからNUXTに変更し、サーバをNetlifyに変更しました。ホームページに欠かせないお問合せフォームですが、Netlifyは

要素を記述するだけで自動でお問い合わせフォームを作成してくれます。メールサーバやアカウントの設定も不要です。

  • SPAMの自動検出
  • 問合せを通知
  • 全ての問い合わせを保存
    と至れり尽くせりです。

今回のホームページでの問い合わせ部分を以下に引用します。注意点は以下のとおりです。

  • ネットの記事を参考に <input type="hidden" name="form-name" value="contact" /> という要素を追加しました。
  • input要素にname属性をつけ忘れたので試行錯誤を余儀なくされました。
    Bootstrap-Vueを使用しているで少々見慣れないタグがふくまれているかもしれませんが、form要素とinput要素に注目してください。たったこれだけで、お問合せフォームが実装できました。

あとは問い合わせが増えることを祈るばかりです。

<template>
  <b-container id="contact">
    <b-row class="text-center mt-5">
      <b-col cols="12" class="h2">
        <span class="category">お問合せ</span>
      </b-col>
      <b-col cols="12" class="text-center text-warning">無料体験授業を受け付けています。お気軽にお問い合わせください。</b-col>
    </b-row>    
    <div>
      <form netlify action="thank-you" name="contact" method="POST" data-netlify="true">
        <input type="hidden" name="form-name" value="contact" />
        <b-card bg-variant="light">
          <b-row>
            <b-col cols="12" sm="6">
              <b-form-group label-cols-sm="3" label="氏名(*):" label-align-sm="right" label-for="name">
                <b-form-input name="name" type="text" id="name"/>
              </b-form-group>
            </b-col>
            <b-col cols="12" sm="6">
              <b-form-group label-cols-sm="3" label="メール(*):" label-align-sm="right" label-for="mail">
                <b-form-input name="mail" type="email" id="mail"/>
              </b-form-group>
            </b-col>
          </b-row>
          <b-row>
            <b-col cols="12" sm="6">
              <b-form-group label-cols-sm="3" label="年齢:" label-align-sm="right" label-for="age">
                <b-form-input name="age" type="number" id="age"/>
              </b-form-group>
            </b-col>
            <b-col cols="12" sm="6">
              <b-form-group
                label-cols-sm="3"
                label="お問合せ:"
                label-align-sm="right"
                label-for="content"                
              >
                <b-form-select name="content" id="content">
                  <option name="体験授業">体験授業</option>
                  <option name="入会希望">入会希望</option>
                  <option name="その他">その他</option>
                </b-form-select>
              </b-form-group>
            </b-col>
            <b-col cols="12" sm="12">
              <b-form-group
                label-cols-sm="3"
                label="コメント:"
                label-align-sm="right"
                label-for="comment"
              >
                <b-form-textarea name="comment" id="comment"/>
              </b-form-group>
            </b-col>
          </b-row>
          <b-row class="justify-content-center">
            <b-col cols="5">
              <button type="submit" class="btn btn-block bg-warning btn-secondary">送信</button>
            </b-col>
          </b-row>

        </b-card>
      </form>
    </div>
  </b-container>
</template>