<やりたかったこと>
自作の問い合わせ確認画面の送信ボタンを押した後、
自作の問い合わせ完了画面に飛ぶ。
googleフォーム側は回答済みになっている。
<発生した問題>
自作の問い合わせ確認画面の送信ボタンを押した後、
googleフォームの入力画面に飛ぶ。googleフォーム側で回答済みになっていない。
(googleフォームの入力画面は未入力の項目はなかった。)
<問い合わせフォームのページ遷移>
自作の入力画面 -> 自作の確認画面 -> 自作の送信完了画面
※自作の送信完了画面が表示された段階で、
googleフォームでは回答済みになる。
<対処方法>
自作の送信完了画面に飛ぶ処理をjQueryの非同期処理(Ajax送信)で記述する。
以下のソースを自作の確認画面のformタグの下(</form>
の下)に記述する。
<script type="text/javascript">
/**
* 問い合わせ完了画面にAjax送信で遷移させる関数
*
* @param event eventオブジェクト
* @return bool 結果
**/
$('#confirm_form').submit(function(event){ // 問い合わせ確認画面の送信するボタンをクリックすると呼ばれる。
event.preventDefault(); // formの送信機能を停止する。
// googleフォームのformタグのaction属性と各項目の値を変数に代入。
let baseUrl = "https://docs.google.com/forms/...../formResponse";
let kind = $("[name=\"entry.xxxxx\"]").val();
let name = $("[name=\"entry.xxxxx\"]").val();
let kana = $("[name=\"entry.xxxxx\"]").val();
// jQueryのajax関数を使用して非同期処理を実行する。
$.ajax({
url: baseUrl,
data: {
"entry.xxxxx": kind,
"entry.xxxxx": name,
"entry.xxxxx": kana,
},
type: "POST",
dataType: "xml",
}).always((jqXHR, textStatus, errorThrown) => { // ajax送信が成功すると、問い合わせ完了画面に移動する。
window.location.href = "問い合わせ完了画面のファイルの相対パス";
});
return false;
});
</script>
<参考サイト>
https://haniwaman.com/google-form-original/
<問題が発生した原因>
ブラウザのセキュリティ対策として、1つのサイトで複数のドメインからデータを
持ってこれないようになっている(クロスドメイン)ため、
自作の問い合わせフォームに入力した内容がgoogleフォームに送信できなかったと考えた。
(あくまで個人的見解なので、合っているかは不明。)
参考サイト:
https://shogo-log.com/google-form-ajax/