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?

Googleフォームをカスタマイズして導入、Ajax処理を行う

More than 1 year has passed since last update.

はじめに

Googleフォーム、簡単にアンケート等作成できて便利ですよね
実はこれ、デザインをカスタマイズして自アプリ・サイトに導入することもできます
下記の記事をみていただくとどのように導入できるかがわかるかと思います

Googleフォームを自在にカスタマイズする

しかしながらこちらの場合お問い合わせ送信後にGoogleの送信完了ページに遷移してしまい、本アプリから一度離れてしまいます。
SPAを中心としたアプリ・サイトを実装をする場合、画面遷移せず、本アプリ中で完結するように作りたいことも出てくるかと思います。そのためカスタマイズしたGoogleフォームでAjax処理できないかと思い調べてみました。

まずAjaxなしで書いてみる

作成したGoogleフォームのhtmlソースからaction,およびクエリパラメータのキーとなるnameを抜き出します

作成したGoogleフォーム

スクリーンショット 2018-05-26 21.45.59.png

Googleフォームのhtmlソース

スクリーンショット 2018-05-26 21.46.13 2.png

これらのactionのURLとキー名を同じようにして、自分のアプリ・サイト中でデザインをカスタマイズしたフォームを作成すれば・・・

<form action="https://docs.google.com/forms/hoge/formResponse">
    <dir>
        <label for="email">お名前</label>
        <input id="name" type="text" name="entry.123456789" required="required">
    </dir>
    ...
</form>

無事カスタマイズしたGoogleフォームから内容を送信できました

screencapture-docs-google-forms-d-e-1FAIpQLSc2QD1VjvsRMb9c94Gm0yChnZxJziGsBg6xtXR0w03kEpYQww-formResponse-2018-05-26-21_33_59.png

が!こんなとこに遷移したくねえ!!

Ajax処理

やりかたはこちらを参考にしました 

今回はjQueryの$ajaxを使用しています
具体的にはポイントは以下です

  • dataTypeをxmlにする
  • CORSエラーが出るが、機能する
$.ajax({
  url: "https://docs.google.com/forms/hoge/formResponse",
  data: {"entry.123456789": name},
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function() {
      //Success message
    },
    200: function() {
      //Success Message
    }
  }
})

以下のCORSのエラーが出てきてしまいますが、実際にはフォーム送信は機能しています。エラーは回避できないようです。

Failed to load https://docs.google.com/forms/hoge/formResponse: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ちなみにこれを回避するため dataType: jsonp としたら以下のようなMIMEに関するエラーが発生し、機能しなくなります。

Refused to execute script from 'https://docs.google.com/forms/hoge' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

終わりに

みなさん疑問に思ってるかもしれません。なぜレガシー気味のjQueryを使用したのかと。
本当はaxiosで実装したかったんですが、うまく反映されませんでした。。。!

axios等でできたよー!って方いましたらぜひ教えていただけるとありがたいです!!

sugitata
Webエンジニアみならい
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