【Nuxt.js GoogleForm】GoogleFormを使った簡単なフォーム作成

KaitoTakase

2020年6月28日 12:12

GoogleFormで作成したフォームをサイトに埋め込み、かつNuxt.jsでCORSエラーにならない方法での実装です。

前提条件

・データベースを使用しない
・GoogleFormを利用して埋め込み、フォームのデザインは自由に設定する
・送信ボタンを押した時にGoogleFormの画面に遷移させない
・回答はスプレッドシートに収集する
・CORSエラーを回避する

DEMO

実装手順

1. GoogleFormを作成

今回は簡単なテストフォームと題し、作成しました

作成時にスプレッドシートの作成し、
「回答権限を信頼できる組織のユーザーに限定する」からチェックを外してください

スクリーンショット 2020-06-28 9.40.08

2.Nuxt.jsでフォームを作成

htmlとCSSでデザインを調整します

スクリーンショット 2020-06-28 9.42.24

index.vue

Googleform管理画面で必須を選択したものには、
inputタグに required を書くと反映されます

<form>
     <div class="your_name">
       <label for="your_name">お名前<span>必須</span></label>
       <input type="text" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：佐藤　太郎" required>
     </div>
     <div>
       <label for="mail">メールアドレス</label>
       <input type="email" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：hogehoge@example.co.jp">
     </div>
     <div>
       <label for="sex">性別<span>必須</span></label>
       <input id="male" class="male" type="radio" value="male"><label for="male" class="male">男性</label>
       <input id="female" class="female" type="radio" value="female"><label for="female" class="female">女性</label>
     </div>
     <div>
       <label for="comment" class="comment">お問い合わせ内容</label>
       <textarea cols="30" rows="10"></textarea>
     </div>
     <button class="confirm" roll="button" type="submit">
         入力内容確認画面へ
     </button>
</form>

3.GoogleFormからname属性を取得する

Googleform管理画面から実際のフォームへは右上の目のマーク（プレビューボタン）を押すといけます

スクリーンショット 2020-06-28 9.55.40

フォームで開発画面を表示し「entry.」で検索する
name属性を取得し、inputタグに追記する

スクリーンショット 2020-06-28 10.00.53

index.vue

    <form>
     <div class="your_name">
       <label for="your_name">お名前<span>必須</span></label>
       <input type="text" name="entry.15xxxxxxx" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：佐藤　太郎" required>
     </div>
     <div>
       <label for="mail">メールアドレス</label>
       <input type="email" name="entry.19yyyyyyy" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：hogehoge@example.co.jp">
     </div>
     <div>
       <label for="sex">性別<span>必須</span></label>
       <input id="male" class="male" name="entry.17zzzzzzz" type="radio" value="male"><label for="male" class="male">男性</label>
       <input id="female" class="female" name="entry.17zzzzzzz" type="radio" value="female"><label for="female" class="female">女性</label>
     </div>
     <div>
       <label for="comment" class="comment">お問い合わせ内容</label>
       <textarea name="entry.20wwwwwww" cols="30" rows="10"></textarea>
     </div>
     <button class="confirm" roll="button" type="submit">
         入力内容確認画面へ
     </button>
   </form>

ラジオボタン、チェックボックスにはそれぞれ同じname属性の値が入ります

4.Nuxt.jsにてaxiosインストールする

$ npm install --save @nuxtjs/axios

nuxt.config.js

modules: [
  '@nuxtjs/axios',
],
axios: {}

index.vue

<template>
 <div class="container"> 
    <form>
     <div class="your_name">
       <label for="your_name">お名前<span>必須</span></label>
       <input type="text" name="entry.15xxxxxxx" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：佐藤　太郎" required>
     </div>
     <div>
       <label for="mail">メールアドレス</label>
       <input type="email" name="entry.19yyyyyyy" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：hogehoge@example.co.jp">
     </div>
     <div>
       <label for="sex">性別<span>必須</span></label>
       <input id="male" class="male" name="entry.17zzzzzzz" type="radio" value="male"><label for="male" class="male">男性</label>
       <input id="female" class="female" name="entry.17zzzzzzz" type="radio" value="female"><label for="female" class="female">女性</label>
     </div>
     <div>
       <label for="comment" class="comment">お問い合わせ内容</label>
       <textarea name="entry.20wwwwwww" cols="30" rows="10"></textarea>
     </div>
     <button class="confirm" roll="button" type="submit">
         入力内容確認画面へ
     </button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
</script>

5.formタグにmethodsを追加する

index.vue

<template>
 <div class="container"> 
    <form @submit.prevent="submit">
     <div class="your_name">
       <label for="your_name">お名前<span>必須</span></label>
       <input type="text" name="entry.15xxxxxxx" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：佐藤　太郎" required>
     </div>
     <div>
       <label for="mail">メールアドレス</label>
       <input type="email" name="entry.19yyyyyyy" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：hogehoge@example.co.jp">
     </div>
     <div>
       <label for="sex">性別<span>必須</span></label>
       <input id="male" class="male" name="entry.17zzzzzzz" type="radio" value="male"><label for="male" class="male">男性</label>
       <input id="female" class="female" name="entry.17zzzzzzz" type="radio" value="female"><label for="female" class="female">女性</label>
     </div>
     <div>
       <label for="comment" class="comment">お問い合わせ内容</label>
       <textarea name="entry.20wwwwwww" cols="30" rows="10"></textarea>
     </div>
     <button class="confirm" roll="button" type="submit">
         入力内容確認画面へ
     </button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
methods: {
  submit () {

  }
}
}
</script>

6.各inputにv-modelを追加、data格納

index.vue

<template>
 <div class="container">
    <form @submit.prevent="submit">
     <div class="your_name">
       <label for="your_name">お名前<span>必須</span></label>
       <input type="text" v-model="form.your_name" name="entry.15xxxxxxx" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：佐藤　太郎" required>
     </div>
     <div>
       <label for="mail">メールアドレス</label>
       <input type="email" v-model="form.email" name="entry.19yyyyyyy" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：hogehoge@example.co.jp">
     </div>
     <div>
       <label for="sex">性別<span>必須</span></label>
       <input id="male" class="male" name="entry.17zzzzzzz" v-model="form.male" type="radio" value="male"><label for="male" class="male">男性</label>
       <input id="female" class="female" name="entry.17zzzzzzz" v-model="form.female" type="radio" value="female"><label for="female" class="female">女性</label>
     </div>
     <div>
       <label for="comment" class="comment">お問い合わせ内容</label>
       <textarea v-model="form.comment" name="entry.20wwwwwww" cols="30" rows="10"></textarea>
     </div>
     <button class="confirm" roll="button" type="submit">
         入力内容確認画面へ
     </button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
   data () {
  return {
    form: {
      your_name: "",
      email: "",
      male: "",
      female: "",
      comment: ""
    }
  }
},
methods: {
  submit () {

  }
}
</script>

7.methodsにaxiosを記載

GOOGLE_FORM_ACTIONにはGoogleformを送信したときのURLを入れます

index.vue

<template>
 <div class="container">
   <form @submit.prevent="submit">
     <div class="your_name">
       <label for="your_name">お名前<span>必須</span></label>
       <input type="text" v-model="form.your_name" name="entry.15xxxxxxx" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：佐藤　太郎" required>
     </div>
     <div>
       <label for="mail">メールアドレス</label>
       <input type="email" v-model="form.email" name="entry.19yyyyyyy" maxlength="50" aria-required="false" aria-multiline="false" placeholder="例：hogehoge@example.co.jp">
     </div>
     <div>
       <label for="sex">性別<span>必須</span></label>
       <input id="male" class="male" name="entry.17zzzzzzz" v-model="form.male" type="radio" value="male"><label for="male" class="male">男性</label>
       <input id="female" class="female" name="entry.17zzzzzzz" v-model="form.female" type="radio" value="female"><label for="female" class="female">女性</label>
     </div>
     <div>
       <label for="comment" class="comment">お問い合わせ内容</label>
       <textarea v-model="form.comment" name="entry.20wwwwwww" cols="30" rows="10"></textarea>
     </div>
     <button class="confirm" roll="button" type="submit">
         入力内容確認画面へ
     </button>
   </form>
</div>
</template>

<script>
import axios from 'axios'
export default {
   data () {
  return {
    form: {
      your_name: "",
      email: "",
      male: "",
      female: "",
      comment: ""
    }
  }
},
methods: {
  submit () {
    const submitParams = new FormData()
    submitParams.append('entry.15xxxxxxx', this.form.your_name);
    submitParams.append('entry.19yyyyyyy', this.form.email);
    submitParams.append('entry.17zzzzzzz', this.form.male);
    submitParams.append('entry.17zzzzzzz', this.form.female);
    submitParams.append('entry.20wwwwwww', this.form.comment);

    const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'
    const GOOGLE_FORM_ACTION = 'https://docs.google.com/forms/u/0/d/e/xxxxxxxxxxxyyyyyyyyzzzzzzzz/formResponse'
    axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams)
      .then(() => {
　　　　//ここに送信完了の処理を書く
       this.isSubmitComplete = true
      })
  }
}
}
</script>

これで実装完了です。

テストしてみました

スクリーンショット 2020-06-28 11.01.48

スプレッドシートにはこのように追加されていきます。

DEMO

参考サイト

この記事が気に入ったらサポートをしてみませんか？