background

web制作を行う際にgoogleフォームを自サイト内に埋め込むという作業を行なったため健忘録を兼ねて残そうと思います。

googleフォームをサイト内に埋め込むと『クロスドメイン問題』という、chromeなどの開発者画面にエラーが表示されてしまう問題が発生してしまいます。動作的には問題ないのですが、個人的に気持ちが悪かったので私のサイトでは採用を見送りPHPで一からフォームを構築しました。 上記問題はjqueryを使用しても同じ問題が発生します。回避方法も存在するようなので興味のある方は試してみてください。

deliverables

※今回のコードは自サイト内のフォーム情報をgoogleフォームに送信し、googleフォームにリダイレクトさせないことを目的に作成し、そこまでの動作確認はしましたが、前述の通り途中で投げ出したためエラーチェックなどは一切されていません。使われる方はあくまで参考までにしていただくことをお勧めします。

以下がjavascriptのコードになります。

var myForm = document.getElementById('<自サイトのformのid>');
    var formData = new FormData(myForm);
    var request = new XMLHttpRequest();
    request.open("POST", "<googleフォームの送信先>", true);
    request.send(formData);
    //alert('JavaScriptのアラート');//実行後アラートを表示する。エラーチェックはしていない

How to use

基本的に他サイトで紹介されているjqueryを用いる手法と同じです。 自サイトに埋め込むフォームとgoogleフォームの内容とidを一致させ、javascriptのコード内に送信先のgoogleフォームのアドレスと送信したいフォームのidをセットし、フォームの実行ボタンを押した際にjavascriptが呼ばれるようにしてください。

上記コードだと、画面遷移などの変化は一切なく、googleフォーム側に情報が送信されます。そのままだと分かりにくいため画面変化と組み合わせた方が親切だと思います。

具体的なgoogleフォームの埋め込み方は後日追記する予定です。