Web

Googleform埋め込みで回答完了画面に遷移させない方法

前回の記事でGoogleformからnameを取得するところまでを説明しました。

もしまだ見てない場合は前回の記事も一緒に読んでみてください。
前回の記事→https://tukapon-k.jp/archives/776

前回の状態でも一応動くっちゃ動くんですよ。

でも、フォーム入力後にグーグルフォームの送信完了画面に遷移してしまうので

お世辞にもスタイリッシュとは言えないですよね。

 

そこでAjaxを使用して送信完了画面に遷移しないように制御してみます。

コードの確認

まずは前回作成したコードの確認です。

これをそのまま動かすと以下のように送信後Googleformの送信完了ページに行きます。

これをページ内で完結できるようにします。

まずhtmlファイルhead内にjsの読み込み記述を書きます。
jQueryも読み込んでおきましょう。

「sample」の部分は各自で好きに変えてくださいね

ちょっとコードを変更

次にAjax!と行きたいところですが

私が想像している仕様は、
①フォームをボタンをおして送信
②送信されたら画面からフォームの表示を削除
③フォームのあった位置に「回答ありがとう」のメッセージを表示

としたいので、
まずは以下のように書き換えます。

まずフォームタグに合った「action=””」を削除し、
ボタンタグをinputタグに変更。

inputが押されることでAjaxが起動するように変更しました。

そして各選択肢に「id=””」を振りAjaxに送信します。

idは選択肢に合ったものであれば何でもいいです。

 

送信が完了、もしくは成功したときの文言は、

CSSで「display: none;」しておいてください。

 

最後に全てを囲ったdivタグを用意し、クラスかidを振ってください。

とりあえず今回は「id=”googleform”」と設定しました。

 

Ajaxの記述

やっとここまできました。

ここまでくればあとは一瞬です。

 

先にコードをお見せします。

見てると感覚的にわかりそうですね。

id、name、URL、成功・失敗したときの処理は好きに変えてください。

 

これで送信後に画面が遷移することなくデータだけを送信することができます。

試してみましょう。CSSで装飾などしてみました。

行けました!

 

ちなみにこの状態だとページを更新するとまたフォームが出現しますので、

何度でもフォームの送信ができてしまいます。

今回は複数回答を許可しているので問題ないですが、

もし1度のみの回答制限にしたければキャッシュなどを利用した方法も使ってみるといいでしょう。

 

 

フォームの利用だけで言えば以前紹介したformrunをつかった方が断然楽でした…。

が、練習にもなるので是非やってみてください。

 

最後まで読んでいただきありがとうございました~~~(´゚ω゚`)

※間違っているところがあったらコメントください。

 

2018/12/20 追記

上のjsだとチェックボックスが複数選択された時にデータが送信されないエラーが発生してしまうため、

それを回避するコードを別記事にて紹介しました。

 

複数選択のチェックボックスを使用しない場合は上記の記事のコードでも大丈夫ですが、

複数選択のチェックボックスを使用する場合は以下を参考にしてください。


デモページも作成しましたので一緒にどうぞ。

ピックアップ記事

  1. 目標がない人はやりたいことリスト100をやってみよう
  2. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」
  3. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

関連記事

  1. Web

    【jQuery】ナビの範囲外をクリックしてナビを閉じる方法

    Webサイトのナビやメニュー用のプラグインが多く出回ってますが、…

  2. Web

    非同期(Ajax)でPHPの関数を実行させサーバーにフォルダとファイルを作成する

    最近PHPを勉強し始めたので備忘録がてら書きます。今回は、H…

  3. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!

    PCにExcelが入っていないけど買いたくない…たまに、「…

  4. Web

    Web業界用語。ガチ初心者は覚えた方がいい必須用語10個

    どうもWeb業界に生きるつかぽんです。今回…

  5. Web

    圧縮ファイルの種類別紹介!

    そもそも圧縮ファイルってなに?圧縮ファイルとは、圧縮アルゴリズムを…

  6. Web

    【Brackets】コーダーオススメのエディタはブラケッツ一択!

    みなさんエディタは何を使っていますか?そもそもエディタとは、端…

コメント

    • 豆柴
    • 2018年 9月 25日

    つかぽん様

    こんにちわ。Googleフォームのカスタマイズをしており、
    どうしてもラジオボタンの値が取得できず、ググっていたところ貴ブログにたどり着きました。

    とても判りやすい解説で参考にさせていただきました。
    私の記述が謝っているのか、いまだにラジオボタンの値がとれません…

    つかぽん様のコードを下記のようにしてみました。

    $(“#googleform input[name=~]).val();にすると、undefineだったため、name→idにしたことで、
    変数に入力値は格納できました。

    $(document).ready(function () {
    $(“#googleform”).submit(function (event) {
    var lname = $(“#googleform input[id=lastName]”).val();
    var fname = $(“#googleform input[id=firstName]”).val();
    var gender = $(“#googleform input[id=gender]:checked”).val();
    var email = $(“#googleform input[id=e-mail]”).val();
    var selfintro = $(“#googleform textarea[id=selfintro]”).val();
    var comment = $(“#googleform textarea[id=comment]”).val();

    $.ajax({
    url: “{$formのURL}”,
    data: {
    “entry.902383202”: lname,
    “entry.818944688”: fname,
    “entry.1520596638”: gender,
    “entry.2116932320”: email,
    “entry.486370071”: selfintro,
    “entry.1675964745”: comment
    },
    type: “POST”,
    dataType: “xml”,
    statusCode: {
    0: function () {
    //送信に成功したときの処理
    $(“form”).slideUp();
    $(‘#success’).slideDown();
    },
    200: function () {
    //送信に失敗したときの処理
    $(“form”).slideUp();
    $(‘#error’).slideDown();
    }
    }
    });
    event.preventDefault();
    });
    });

    上記コードを実装し、送信ボタンを押下しましたが、他のテキストフィールドはOKだったものの、
    選択形式部分がどうしてもダメでした。

    つかぽん様のサンプルコードにある、以下は関係していますか?

    $.ajax({
    url: “https://docs.google.com/forms/d/e/hogehoge/formResponse”,
    data: {
    “entry.1460665739”: name,
    “entry.541030406”: gender,
    “entry.1100401905”: entry ← この部分。

    • 豆柴様

      コメントありがとうございます!
      確認したところ私のコードが間違ってました…

      以下の「entry」の部分は私のコードでいうと「food」が正です

      ✕:”entry.1100401905″: entry
      〇:”entry.1100401905″: food

      (なおしておきます…w)

      しかし豆柴様のコードを見る限り
      genderを選択項目としたいようですが、
      “entry.1520596638”: gender,できちんと命名されているため問題はないかと思われます。

      もしかするとHTMLのほうに問題があるかもしれません。
      HTMLのコードを見せていただくことは可能ですか?

        • 豆柴
        • 2018年 9月 25日

        tukapon様

        ご返信くださりありがとうございます!
        HTML側のソースコードは以下になります。

        氏名(姓)必須

        氏名(名)必須

        性別必須

        男性

        女性

        メールアドレス必須

        ご自身についてお聞かせください

        その他ご質問について

         

        送信完了しました。ありがとうございました。

        送信に失敗しました。ページを更新して再度送信してください。

          • 豆柴
          • 2018年 9月 25日

          すみません。HTMLコード貼り付けて返信したら、普通にテキスト部分だけの表示になってしまいました…。

          • そういえばコードによってはそうなりますね…

            コンタクトフォームよりお問い合わせ頂ければメールにてご連絡も可能ですのでご面倒でなければそちらよりお願いします!

            • 豆柴
            • 2018年 9月 25日

            tukaponさま

            解決しました!
            html側に問題ありまして、ラジオボタンのvalue属性の中身がmale、femaleとなっており、Googleフォーム側の表示内容(男性or女性)と異なっていたためでした。
            値をmale→男性、female→女性にすることで、googleフォーム側の回答結果欄に反映されていることを確認できました!

            お騒がせして申し訳ございませんでした。

    • 2018年 12月 16日

    突然のコメント失礼致します。
    Ajaxの記述で、チェックボックスで複数選択の場合、どうしてもスプレッドシート側に反映されなくて、記述の仕方に困っているのですが、お分かりでしたらご教授頂ければ幸いです。
    よろしくお願い致します。

    • 事象というのは、
      「チェックボックスを一つしか選択していない場合はスプレッドシートに反映されるけど、チェックボックスを複数選択したときのみスプレッドシートに反映されない」
      といった症状で合ってますか?

    • 2018年 12月 17日

    ご返信ありがとうございます。

    上記の症状であっております。
    上記の記事を参考に、グーグルフォームをカスタマイズを行い、フォーム画面を遷移させないように設定しているのですが、
    チェックボックスの複数回答のみ、スプレッドシートに一つしか反映されない症状です。

    .val();をいくつか調べて試しているのですが、どうしてもまだうまくいかずコメントでご質問させて頂きました。

    大変お手数ですが、お分かりでしたらご教授頂ければ幸いです。
    よろしくお願い致します。

    • コードを見ていないので正確な理由はわかりませんが、
      おそらく原因はHTML側の「value」にあるのではないかと思います。

      「スプレッドシートに一つしか反映されない」という事象を除いては問題なく動いているようですので
      問題はAjax部分ではない可能性があります。

      記事内のコードを見ていただければわかりますが、複数選択の箇所もidとnameは質問ごとに全て統一されており
      「value」でのみ振り分けしていますので
      どれを選択してもスプレッドシートには一つしか反映されないといった場合は全てのvalueが同じになっている可能性があるか、
      1つを除いてそれ以外のvalueが間違っている可能性があります。

    • 2018年 12月 17日

    お忙しい中、ご返信ありがとうございます。
    「value」は、全て再度確認したところ、全て異なって表記しておりました。

    一点気になっているのが、Ajax部分の
    var ◯◯ = $(“#googleform input[name=◯◯]:checked”).val();

    .val();の部分が調べていますと、

    「ただし、val()はセレクタに合致した最初の要素のみを取得するので、該当するチェックボックスが複数の場合は、eachやmapでループさせる必要がある。」

    この値が原因で、複数チェックされたときに、一つしか反映されないのかなと思っています。
    これをどうやってAjax部分に反映させればいいかに2日間程アタマを悩ませております、、、。

    • あー、なるほど。。。

      配列で渡す必要がありそうですね…
      仕事の関係で今すぐに確認が難しいので明日までお待ちいただくことは可能ですか?

      確認後記入いただいたGoogleのメールアドレス宛に回答いたします。

    • 2018年 12月 17日

    ありがとうございます、、、!
    お忙しい中大変お手数をおかけしますが、わかりましたらご連絡を頂ければ幸いです!

    • とも
    • 2019年 1月 30日

    つかぽん様

    はじめまして、ともと申します。
    つかぽん様のコードを参考に、回答完了画面に遷移させないよう記述したつもりなのですが、
    フォームの方に回答が反映されず、頭を悩ませております・・・。
    遷移する場合はグーグルの方に反映されていたので、
    私の記述ミスなのかと思うのですが、Ajaxを理解していないため
    誤まっている箇所がわからずご質問させていただいた次第です。
    お手すきの際にご教授いただければ幸いです。

    参考までに書き換えたコードの方を記載しておきます。

    $(document).ready(function () {
    $(“#googleform”).submit(function (event) {
    var name = $(“#googleform input[id=name]”).val();
    var mail = $(“#googleform input[id=mail]”).val();
    var address = $(“#googleform input[id=address]”).val();
    var tel = $(“#googleform input[id=tel]”).val();
    var radio = $(“#googleform input[id=radio]:checked”).val();
    var comment = $(“#googleform textarea[id=comment]”).val();

    $.ajax({
    url: “フォームのURL”,
    data: {
    “entry.2005620554”: name,
    “entry.1045781291”: mail,
    “entry.1065046570”: address,
    “entry.1166974658”: tel,
    “entry.1678114928”: radio,
    “entry.839337160”: comment
    },
    type: “POST”,
    dataType: “xml”,
    statusCode: {
    0: function () {
    //送信に成功したときの処理
    $(“form”).slideUp();
    $(‘#success’).slideDown();
    },
    200: function () {
    //送信に失敗したときの処理
    $(“form”).slideUp();
    $(‘#error’).slideDown();
    }
    }
    });
    event.preventDefault();
    });
    });

    ご返答お待ちしております。

    • とも様
      コメント頂きありがとうございます。

      正直提示頂いた部分のコードだけだと正確な情報がわかりません。(文法的には問題なさそうです)
      html込みであればもう少しわかるかもしれません。

      とも様がおっしゃられている「遷移する場合はグーグルの方に反映されていた」という部分は

      ①遷移する場合
      →Googleフォームに遷移はしてしまうがデータはきちんと送信(集計まで)されている

      ②遷移しない場合
      →この場合は遷移もしないしデータも送信されない

      という認識でお間違いないですか?

      ちなみにこの記事のコードだと、ある一定条件下でエラーがおきるじょうたいのコードになってしまっているため、
      この記事とは別に以下の記事で少しコードの体裁を変えたものも紹介しているので以下も一度試してみるといいかもしれません
      https://tukapon-k.jp/archives/1410

    • とも
    • 2019年 1月 30日

    つかぽん様

    お返事ありがとうございます。
    つかぽん様のおっしゃる通り
    ①遷移する場合
    →Googleフォームに遷移はしてしまうがデータはきちんと送信(集計まで)されている

    ②遷移しない場合
    →この場合は遷移もしないしデータも送信されない

    こちらの状態でした。
    ですが改変されたコードの方を参考にし再度書き直しましたところ、
    遷移もせず、データの方もGoogleフォームに送信されるようになりました。

    ですが、別件で問題箇所が出てきてしまいましたので、再度ご教授いただければと思います。

    添付させていただいたページがフォームのテストページになっております。
    このページ内では「お名前」「メールアドレス」「お問い合わせ内容」の
    箇所が必須項目となっているのですが、記載していなくても送信ボタンを押すとエラーにならず送信完了になってしまいます。
    その場合、Googleの方にデータの反映はされておりません。
    Googleフォームの設定では必須項目にチェックは入っております。
    どうすれば必須項目と認識させることができるでしょうか?

    なんども申し訳ございませんが、
    お手隙の際にご返信いただければ幸いです。

    • とも様

      テストページを拝見したところinputタグの中に指定してるrequired属性の綴りが間違っていますね。
      テストページのタグ内には「requred」と記述されていますが正しくは「required」です。
      ※「i」が抜けています

      誤「requred」
      正「required」

      ここを修正するだけでおそらく希望通りの挙動をしてくれると思いますよ!

    • とも
    • 2019年 1月 30日

    つかぽん様

    ご返信ありがとうございます。
    単純な書き間違いでお手数をおかけして、お恥ずかしい限りです。
    お時間頂きましてありがとうございました!

    • 2019年 5月 07日

    コメント失礼致します。

    GoogleフォームでAjaxを利用した場合、ファイル添付の場合はどう記載していいか分からず、コメントでご質問させて頂きました。

    大変お手数ですが、お分かりでしたらお手隙の際にご教授頂ければ幸いです。
    よろしくお願い致します。

    • すいません、コメントに気付かず…

      実際に確認していないので何とも言えないですが、
      Gフォームの画像を指定する場所にも当然テキストボックスの時と同様のinputタグとname=”entry.00000000″形式のものがあったので
      そちらを指定するほか方法がないかと思います。

      /* 画像ファイルの取得とGフォームのIDをセット */
      var hoge = new FormData($(‘#画像用inputタグ’).get(0));
      data.append(‘entry.00000000’, hoge);

  1. この記事へのトラックバックはありません。

最近の記事

  1. Diary

    Canon EOS Kiss X8iで撮影したポートレート写真
  2. カメラ/写真

    【スタビライザー】Flycam(フライカム) C6買ってみた
  3. Diary

    Switchソフトで悩んだらゼノブレ2を買え!ゼルダBOWよりオススメXenob…
  4. Diary

    災害対策。最低でもこれだけは準備しておけ!
  5. Web

    USBにデータ保存は危険?データが消えるので注意!
PAGE TOP