0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Googleフォームと自作フォームを連携した時、回答済みにならない問題の対処法

Last updated at Posted at 2023-04-06

<やりたかったこと>
自作の問い合わせ確認画面の送信ボタンを押した後、
自作の問い合わせ完了画面に飛ぶ。
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/

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?