Googleフォームを独自デザインで埋め込みajaxで送信させる方法

やりたいこと・方針

・Googleフォームで手軽にお問い合わせフォームを作りたい
・デザインはオリジナルがいい
・送信後もサイトから移動したくない（Googleフォームに移動したくない）
・jQuery使っちゃう

手順

1.普通にGoogleフォームを作成

まずは普通にGoogleフォームでフォームを作ります。必要な項目が揃っているか、得られる回答結果に問題がないか試しておきましょう。

2.独自デザインのフォームを作成

1.で作ったフォームと項目が同じになるよう、オリジナルデザインのフォームHTMLを作ります。以下はサンプルです。

<form id="form" action="https://docs.google.com/forms/（略）/formResponse" method="post">
    <p>
        <label>必須テキスト *</label>
        <input type="text" name="entry.111111111" required>
    </p>
    <p>
        <label>チェックボックス</label>
        <input type="checkbox" name="entry.222222222" value="チェック項目1"> チェック項目1<br>
        <input type="checkbox" name="entry.222222222" value="チェック項目2"> チェック項目2<br>
        <input type="checkbox" name="entry.222222222" value="チェック項目3"> チェック項目3<br>
    </p>
    <p>
        <label>セレクトボックス</label>
        <select name="entry.333333333">
            <option value="選択肢1">選択肢1</option>
            <option value="選択肢2">選択肢2</option>
            <option value="選択肢3">選択肢3</option>
        </select>
    </p>
    <p>
        <label>テキストエリア</label>
        <textarea name="entry.444444444"></textarea>
    </p>
    <p>
        <input type="submit" class="button" value="送信">
    </p>
</form>

3.作成したGoogleフォームの公開ページを表示

1.で作成したGoogleフォームの公開ページを開いたら、ブラウザの「検証」ツールでformのaction値や各フィールドのname値を調べ、2.で作ったフォームに当てはめていきます。上記のサンプルのようなaction、nameが設定されるはずです。
チェックボックスやセレクトボックスのvalueは、選択項目の表示名と同じになります。

4.機能チェック

この段階で問題なく問い合わせフォームが機能するか確認しておきましょう。送信ボタンを押したらGoogleフォームの回答完了画面が出てくるはずです。また、回答も問題なく登録されているか確認しておきましょう。

5.非同期通信で送信

4.で問題なく登録されていたら、最後に非同期通信させるJavaScriptを書いていきます。各フォームの値を取得するには、jQueryのserialize()関数が便利です。

$(function() {
    $('#form').submit(function(){
        $.ajax({
            url: $('#form').attr('action'),
            data: $('#form').serialize(),
            type: 'POST',
            dataType: 'xml',
            statusCode: {
                0: function() {
                    //成功した際の処理を書きます。
                },
                200: function() {
                    //成功した際の処理を書きます。
                }
            }
        });
        return false;
    });
});

処理後にコンソール上で警告文が表示されますが、解決するのは難しいらしく、挙動的には問題が起きないので私はスルーしています。

6.最終確認

以上で設定は終わりです。問題なく動作するかチェックしましょう。