VuetifyとNetlify Formsを使ったときに躓いたところ

Nuxt, Vuetifyで簡単なページを作り、Netlifyでページを公開しようとした際に、躓いたときのメモです。

問合せフォームをつけていたので、Netlify Formsを使いました。

Code an HTML form into any page on your site, add a netlify attribute or data-netlify="true" to the <form> tag

Netlifyでフォームを使うには、formタグにnetlify属性をつけ、<form netlify>とするだけです。

ただ、Vuetifyでは、単に<v-form netlify>としてもうまく動作しませんでした。

Netlify automatically adds a hidden field to your published form called form-name with a value to match the name attribute of the form when you submit an HTML form

Netlifyは、自動的にname="form-name"を持ったテキストフィールドをつけているようです。

そこで、以下のようにフォームを書きました。

contact.vue

<template>
  <v-container tag="section">
    <v-row>
      <v-col
        v-text="title.toUpperCase()"
        cols="12"
        tag="h1"
      />
    </v-row>
    <v-form method="post" netlify>
      <v-text-field
        v-show="false"
        v-model="title"
        name="form-name"
      />
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="name"
            label="name"
            name="name"
            autofocus
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="email"
            label="E-mail"
            name="email"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12">
          <v-textarea
            v-model="message"
            label="message"
            name="message"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-btn
            :disabled="isEmpty"
            type="submit"
          >
            submit
          </v-btn>
        </v-col>
      </v-row>
    </v-form>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      title: 'contact',
      name: '',
      email: '',
      message: '' 
    }
  },
  computed: {
    isEmpty () {
      if (
        this.name !== '' &&
        this.email !== '' &&
        this.message !=='' 
      ) {
        return false
      }
      return true
    }
  }
}
</script>

↓ フォームの見た目

このように、

<v-form method="post" netlify>
  <v-text-field
    v-show="false"
    v-model="title"
    name="form-name"
  />

v-formにnetlify属性をつけて、

v-show="false" v-model="title"をつけたv-text-fieldをv-form下に置くと、正常に動作します。

参考

• netlify docs (Forms setup)