Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away