【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.3 画面遷移無しで送信編「Vue.js/axiosでAjax」

Googleフォームをサイトに埋め込む連載、第三回目です。

前回までの回はこちらから↓

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.1 - ABC ウェブエンジニアblog

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.2 カスタマイズ編 - ABC ウェブエンジニアblog

前回までで埋め込み～見た目のカスタマイズが出来て、いい感じにサイトにお問合せフォームを実装することが出来ました。

ただそのままだとフォーム送信ボタンを押したらGoogleフォームの画面に移動してしまうという欠点があります。

そこで今回は画面を移動させずにフォーム送信の処理を行う方法を解説します。

ほぼ以下の参考サイトのまんまでうまくいきました。

medium.com

画面遷移なしにデータの送受信を行う技術Ajax

今回やろうとしている画面をGoogleフォームへ移動せずにフォーム送信するという動作の実装にはAjaxという技術を用います。

こういった処理を調べているとよく同期通信、非同期通信という言葉が出てくるので少し解説します。

説明が不要な方はすっ飛ばしてください。

同期通信とは

ブラウザからサーバーへリクエストを通信し、レスポンスが返ってきます。その間全てのデータを通信して読み込み直すので画面遷移が起こり、サーバーからのレスポンスが返ってくるまでは他の処理はできません。

非同期通信とは

ブラウザから部分的に情報をリクエストしてサーバーへ送受信するので、画面全体を読み込み直すことなく様々な通信処理が出来る。

よく非同期通信で例に出されるのがGoogleMapなんかです。

最初表示されるエリアだけしか情報を持っていませんが、別の場所を表示させようとマップを動かすと少し遅れて表示されていなかったマップが読み込まれて表示されますよね。

この際に画面全体を読み込み直しているのではなく部分的にマップを取得してデータ反映しています。

Vue.js/axiosでAjax非同期通信処理

このAjaxという技術を使いやすくしたりして一世風靡したのがjQueryというjavascriptの弟？子供？のような存在。

そこからさらに発展してVue.jsやReact.js/AngularJSなど、画面遷移無しのページ/Webアプリ作成に特化したjavascriptの孫のようなフレームワークというものが生まれました。

この中で私が特に使っているVue.jsではAjaxでの非同期通信処理をさらに「axios」というライブラリを使うことで使いやすくしています。

ライブラリとかフレームワークとかややこしくてすいません。色々発展してきて今回はこれで実装するよということです。

Vue.js/axiosで書いたGoogleフォームの実際のコード

まずは<head></head>部分でvue.jsとaxiosのファイルを読み込みます。

はてなブログだと参考サイトのコードそのままでは読み込みエラーになっていたのでバージョン指定などすることでうまくいった記述を記しています。

そして前回までに作ったフォームを一部改変して、javascriptの記述を追加したのが以下。

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js" integrity="sha512-quHCp3WbBNkwLfYUMd+KwBAgpVukJu5MncuQaWXgCrfgcxCJAq/fo+oqrRKOj+UKEmyMCG3tb8RB63W+EmrOBg==" crossorigin="anonymous"></script>

そして前回までに作ったフォームを一部改変して、javascriptの記述を追加したのが以下。

<div id="webabcForm">
<form v-on:submit.prevent="submit" v-if="showForm">
  <label for="email">メールアドレス</label><br>
  <input id="email" v-model="email" type="text" name="entry.1215603079" placeholder="example@mail.co.jp" style="width: 100%; margin-bottom: 0.5em;" required><br>
  <label for="msg">お問い合わせ内容</label><br>
  <textarea id="msg"  v-model="msg"  name="entry.1925871011" placeholder="お気軽にお問い合わせください。" style="width: 100%; margin-bottom: 0.5em;" rows="8" required></textarea><br>
  <button type="submit" name="button" value="送信" style="width: 100%;">送信</button>
</form>
<div class="p-formSucess" v-else>
    <p>メッセージ送信完了</p>
    <p>入力頂いた内容が送信されました。頂いた内容は後程確認次第お返事させて頂きます。</p>
  </div>
</div>

<script>
new Vue({
  el: "#webabcForm",
  data: {
    // フォームの表示
    showForm: true,
    // メールアドレス
    email: "",
    // お問合せ内容
    msg: ""
  },
  methods: {
    submit: function () {
      const submitParams = new FormData();
      
      // メールアドレスのname属性値
      submitParams.append("entry.1215603079", this.email);
      // お問合せ内容のname属性値
      submitParams.append("entry.1925871011", this.msg);

      // CORSエラー対策
      const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";
      // Googleフォームのaction属性値
      const GOOGLE_FORM_ACTION = "https://docs.google.com/forms/u/0/d/e/1FAIpQLSdZ2hGaDxtqpsl9GCmW8Fux3k-fFOozQH3-II1klwEr9rz7MQ/formResponse";

      // Ajax POST通信
      axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams).then(res => {
        // フォーム非表示
        this.showForm = false;
      });
      // フォーム非表示
      this.showForm = false;
    }
  }
});
</script>