Google Form をサイトに埋め込んで Ajaxで自作サンクスページを表示する

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

# 背景
Google FormをWebサイトに埋め込んで使用すると、
通常であれば下記のようなGoogle Formの完了ページが表示されてしまいます。
<img width="876" alt="スクリーンショット 2019-06-01 14.25.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/7ac0127e-e661-89e7-024f-b6e417ce11b2.png">

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

# 手順１.Google Formを用意
Qiita投稿用に用意してみました。
https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/viewform
<img width="683" alt="スクリーンショット 2019-06-01 15.07.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/f0788677-0ce1-e132-4621-b791c564d3ca.png">


# 手順２.HTML作成
## (1)上記Google Formの各入力項目のname属性をメモ
<img width="1426" alt="スクリーンショット 2019-06-01 15.12.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/60b979b3-1322-cbf3-29da-d3626774c951.png">

## (2)自分のサイトに埋め込む
（１）でメモした各name属性をそのまま使用します。

```html: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のページになっています。
<img width="337" alt="スクリーンショット 2019-06-01 15.29.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/e0ea8603-b861-dad5-ce0b-89125d3de638.png">
上記送信ボタンを押すと、下記画面が表示されます。
<img width="704" alt="スクリーンショット 2019-06-01 15.27.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/04ce295d-d1fd-8c32-9661-3d11eae0beed.png">

Google FormのRESPONSESタブ内の状況より、きちんとデータが送られていることを確認。
![docs.google.com_forms_d_1KFAKNQcQgSnwcUdoz4sG5nrrA4I2QXbMUXkuOJoVJRQ_edit (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/5d3156f8-0231-e286-20dd-48ba4e2213e6.png)


## (4)Ajaxスクリプトを先ほどのHTMLに組み込む
```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が返却されるため、`statusCode`が`0`の`function`に入ります。
ただし、Google Formデータは正常に送信されているので、機能の観点では問題なしと思われます。
また、今回はサンプルなので一時的にGoogleトップページに遷移させました。（※本来は自作サンクスページです）
<img width="808" alt="スクリーンショット 2019-06-01 15.45.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/df0d9305-5ab7-da0c-d451-8c4c9e7dea74.png">


## (5)最終動作確認
<img width="343" alt="スクリーンショット 2019-06-01 15.43.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/92606425-11b8-fee2-47e5-54ec7c895d64.png">
送信ボタンを押すと、下記の通り、Googleトップページに画面遷移します。
<img width="623" alt="スクリーンショット 2019-06-01 15.44.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/b3279929-7cf3-9798-3d8b-f25d9240d273.png">

念のため、Google Formに送信されたデータも確認する。
![docs.google.com_forms_d_1KFAKNQcQgSnwcUdoz4sG5nrrA4I2QXbMUXkuOJoVJRQ_edit (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319350/62bedd61-3238-526c-1fa6-a1e6259a4d43.png)


以上、終わり。