Nuxt.jsでNetlifyのForms使ってみた

Nuxt.jsとaxiosを使ってNetlifyのFormsでajax送信をしてみました。

全体像

コードの全体像は下記な感じです

templateタグ

<div>
  <form v-if="isSubmit === false" @submit.prevent="onSubmit">
    <input type="text" v-model="name" name="name" >
    <input type="email" v-model="email" name="email">
    <textarea v-model="content" name="content"></textarea>

    <button type="submit">送信</button>
  </form>

  <div v-if="isSubmit === true">
    <p>サンクス</p>
  </div>

  <form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="content"></textarea>
  </form>
</div>

scriptタグ

import axios from 'axios'

export default {
  data() {
    return {
      name: '',
      email: '',
      content: '',
      isSubmit: false
    }
  },
  methods: {
    onSubmit() {
      const params = new URLSearchParams()

      params.append('form-name', 'contact') // Forms使うのに必要

      params.append('name', this.name)
      params.append('email', this.email)
      params.append('content', this.content)

      axios
        .post('/', params)
        .then(() => {
          this.isSubmit = true
        })
    }
  }
}

要点だけ見ていきます。

templateタグ

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="content"></textarea>
</form>

Netlifyに認識してもらうためにnetlify hidden属性をもたせたフォームを作成します。
※SPAの場合は静的に記述する必要があります。

netlify-honeypotはreCAPTCHAを使用しないオプションです
postする時にg-recaptcha-responseを含める方法もあるようなのですが、うまく行かなかったので教えていただけると嬉しいです。

scriptタグ

const params = new URLSearchParams()

params.append('form-name', 'contact') // Forms使うのに必要

params.append('name', this.name)
params.append('email', this.email)
params.append('content', this.content)

axios
  .post('/', params)
  .then((response) => {
    this.isSubmit = true
  })

実際にデータを詰めてpostする箇所はform-nameを含めてあげる必要があるくらいで特に変わったところはありません。

こんな感じでajaxでFormsを使うことが出来ました。

参考

https://www.netlify.com/docs/form-handling/#ajax-form-submissions
https://qiita.com/tatane616/items/f646e84fe4cdd9eac0de