
Googleフォーム回答後に好きなところに移動したいを実現!
こんにちは、ヒロです。
数あるブログの中から、僕のブログにお越しいただきありがとうございます。簡単に読める記事を目指していますので、ぜひ最後までお読みください。
このブログでは、デジタルトランスフォーメーション(DX)を促進するための自動化ツールの情報をお届けし、その結果生まれた時間を大切な人との時間や趣味、スキルアップに使っていただければと考えています。
海外YouTubeで見つけたもの
これ、海外のYouTubeで見つけました。YouTubeの検索で英語で調べたのですが、なんて検索したか忘れました(笑)
Googleフォーム回答後に
Googleフォームを回答してもらう際にリンクをシェアしたり、サイトに埋め込むためのコードを生成することができることはご存じかと思います。今回試してみたかったのは、回答後に自由に別のサイトに飛ばす方法です。
Googleフォームには回答後に表示される文章を編集する機能があり、その文章内に飛ばしたい先のURLを追加することもできます。しかし、もう少しエレガントに、そして情報を加えたいと思いました。
いろいろ調べたところ、海外のYouTubeで役立つ情報を見つけました。アクセントの強い英語で理解に苦しみましたが、問題なく動きました。
埋め込みコードを改造
比較のためにコードをシェアします。Googleフォームの右上の送信ボタンをクリックし、埋め込みのコードをコピーします。

以下のようなコードが生成されます。GoogleフォームのIDの部分は各自のフォームのIDになります。
<iframe src="https://docs.google.com/forms/d/e/"ここにフォームのIDが入ります"/viewform?embedded=true" width="640" height="5551" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
次に、iframeの後に id="gform" を追加し、<script>以下のスクリプトをコピペします。飛ばしたい先のURLの箇所に実際のURLを入れてください。
<iframe id="gform" src="https://docs.google.com/forms/d/e/"ここにフォームのIDが入ります"/viewform?embedded=true" width="640" height="5348" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
<script>
var load = 0;
document.getElementById('gform').onload = function(){
/*Execute on every reload on iFrame*/
load++;
if(load > 1){
/*Second reload is a submit*/
document.location = "飛ばしたい先のURLが入ります";
}
}
</script>
これだけでOk。
テスト
ちゃんと動くかどうか心配な方もいると思います。試しにYahooニュースやGoogleに飛ばすように設定してみると良いでしょう。
なぜこれをしたかったのか?
繰り返しになりますが、Googleフォームでは、回答後に表示するテキストを編集することは可能ですが、もう少し情報を加えたり、そこから別の案内をしたり、リンクを追加したりして、回答していただいた人にクリアに情報をお届けしたいと考えたからです。
まとめ
今回は、Googleフォームの回答後に自動的に別のサイトにリダイレクトする方法を紹介しました。これにより、フォームの回答後に追加情報を提供したり、次のステップに案内することが簡単になります。結果的に、フォーム回答者により充実した情報を届けることができるでしょう。
背景: Googleフォームの回答後に別のサイトに飛ばしたいというニーズがありました。
解決策: iframeとJavaScriptを使って、Googleフォームの回答後に自動的に別のサイトにリダイレクトする方法を紹介しました。
実装手順: iframeの埋め込みコードにid属性を追加し、JavaScriptでリダイレクトを実行します。
テスト: 動作確認のために実際にいくつかのサイトへのリダイレクトを試してみてください。
お役に立てたら嬉しいです。では次回をお楽しみに!
いいなと思ったら応援しよう!
