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)