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 Form をサイトに埋め込んで Ajaxで自作サンクスページを表示する

More than 1 year has passed since last update.

やりたいこと

Google Formを自分のWebサイトに埋め込み、
Webサイト内のSubmitボタン押下時にGoogle Formに Ajax で入力データを送信し、
そのコールバックで自作したサンクスページへリダイレクトさせます。

背景

Google FormをWebサイトに埋め込んで使用すると、
通常であれば下記のようなGoogle Formの完了ページが表示されてしまいます。
スクリーンショット 2019-06-01 14.25.18.png

これを自作のサンクスページにする方法を以下に記載します。

手順1.Google Formを用意

Qiita投稿用に用意してみました。
https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/viewform
スクリーンショット 2019-06-01 15.07.38.png

手順2.HTML作成

(1)上記Google Formの各入力項目のname属性をメモ

スクリーンショット 2019-06-01 15.12.32.png

(2)自分のサイトに埋め込む

(1)でメモした各name属性をそのまま使用します。

sample.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Google Formテスト</title>
    </head>
    <body>
        <form action="https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse">
            <input id="name" type="text" name="entry.1777069002" />
            <input id="nameKana" type="text" name="entry.974250288" />
            <input id="marriage" type="hidden" name="entry.1776684468" value="愛" />
            <input id="submitBtn" type="submit" value="送信">
        </form>
    </body>
</html>

(3)動作確認

この時点だと完了ページはまだGoogle Formのページになっています。
スクリーンショット 2019-06-01 15.29.28.png
上記送信ボタンを押すと、下記画面が表示されます。
スクリーンショット 2019-06-01 15.27.48.png

Google FormのRESPONSESタブ内の状況より、きちんとデータが送られていることを確認。
docs.google.com_forms_d_1KFAKNQcQgSnwcUdoz4sG5nrrA4I2QXbMUXkuOJoVJRQ_edit (2).png

(4)Ajaxスクリプトを先ほどのHTMLに組み込む

sample.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Google Formテスト</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            $("#googleform").submit(function (event) {
                var name = $("#name").val();
                var nameKana = $("#nameKana").val();
                var marriage = $("#marriage").val();
                $.ajax({
                    url: "https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse",
                    data: {"entry.1777069002": name, "entry.974250288": nameKana, "entry.1776684468": marriage},
                    type: "POST",
                    dataType: "xml",
                    statusCode: {
                        0: function() {
                            window.location.href="https://google.com"
                        },
                        200: function() {
                            alert("errorMsg")
                        }
                    }
                })
                event.preventDefault();
            });
        });
        </script>
    </head>
    <body>
        <div id="googleform">
            <form>
                <input id="name" type="text" name="entry.1777069002" />
                <input id="nameKana" type="text" name="entry.974250288" />
                <input id="marriage" type="hidden" name="entry.1776684468" value="ルックス" />
                <input id="submitBtn" type="submit" value="送信">
            </form>
        </div>
    </body>
</html>

注意点として下記のように「Cross-Origin Read Blocking (CORB)」が発生しますが、
HTTPステータスコードに0が返却されるため、statusCode0functionに入ります。
ただし、Google Formデータは正常に送信されているので、機能の観点では問題なしと思われます。
また、今回はサンプルなので一時的にGoogleトップページに遷移させました。(※本来は自作サンクスページです)
スクリーンショット 2019-06-01 15.45.43.png

(5)最終動作確認

スクリーンショット 2019-06-01 15.43.48.png
送信ボタンを押すと、下記の通り、Googleトップページに画面遷移します。
スクリーンショット 2019-06-01 15.44.02.png

念のため、Google Formに送信されたデータも確認する。
docs.google.com_forms_d_1KFAKNQcQgSnwcUdoz4sG5nrrA4I2QXbMUXkuOJoVJRQ_edit (3).png

以上、終わり。

taichikanaya_1989
東京でフリーランスエンジニアをしています。有用な記事をQiitaへたくさん投稿していきたいと思っています。どうぞよろしくお願いします。
https://www.attakait.xyz
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