拍手感想フォーム修正しました

感想フォーム作り直しました!

スクロールバグそのものは他の手段でも解決できそうだったんですけど、埋め込み枠にスクロールバーが生じること自体があまり好きではなく…
iframeタグは使わずにフォームのガワ(見た目)を自分で用意することでバグ回避できそうだったので、思い切って試してみました。
中身は同じグーグルフォームのままなんですが、ちゃんと送信できてる…!

とりあえずこれで大丈夫だとは思いますが、また何か問題があったらお知らせください~

 

 

今回の件おさらいしておくと…元々は拍手用に用意したページに画像とリロードボタン置いてあとはカウンターとグーグルフォームを埋め込むだけ、という至極簡単な仕組みだったんですが
iPhoneからだと埋め込みタグ(iframeやobject)にスクロールバーが発生しないらしいという仕様が発覚しまして。(当方androidなので気付かず)
改行したり長文書いたりして埋め込まれたページが長くなると、埋め込み枠の外に行ってしまったものは表示もスクロールもできず送信ができなくなってしまうと。

拍手とグーグルフォームの合体、簡単だしいい感じですよ!!って気軽に人に薦めてしまったこと申し訳なくなってきた。すみません。このバグはだいぶ問題ある……
うううiPhoneの仕様がちょっと特殊なんだよォ~~……使い方やグーグルフォームがおかしいわけではない(と思う

合体自体は本当してよかったなって思うんですよオススメ!!

でもこのバグを自力でどうにかするにはデザイン性を諦めて埋め込み枠の長さを余裕を持って設置するか、ある程度HTMLタグとJSをいじれる人じゃないと厳しいと思う(´・ω・`)
といっても先人たちが既にいろんなコードをウェブで公開してくれてて、それらを組み立てるだけなので本当に必要なのはたぶん根気だけですが…(地味に面倒くさくて大変だった)

 

参考にさせてもらった記事にも書いてあったけどグーグルフォームのカスタマイズは

メリット:iPhoneでの埋め込みバグの回避。デザインを自由にできる。iframe埋め込みよりずっと軽くて表示が早い。

デメリット:組み立てに時間かかる。面倒くさい。最低限タグ&JSの知識と根気が必要。

ですね。
作るのは面倒だったけど、気になってた箇所(埋め込みバグ、スクロールバー、送信後の空白、チェックボックスの並び、表示の重さ)が全部解消できたので結果的によかったです。

今回感想フォームの改行不具合についてご報告くださったお二方、本当にありがとうございました。
ご報告いただけなかったら絶対気付けなかったので、とても助かりました!

 

いろんなサイトを参考にさせてもらってあれこれ試行錯誤してたんだけど、複数チェックリストの必須判定の仕方に悩んだり、やっとやり方が分かってもnameに項目データ番号「entry.XXXXXXXXXX」を入れてしまうとドットのせいでチェックリストの必須判定ができなくなってしまう弊害があったりでずっと悩んでたらこちらのブログで全て解決した。
うちもグーグルフォーム埋め込みで使ってるんだけど…って人のためにリンク貼っておきます。

Googleform埋め込みでラジオボタンのデータを送信する方法 | つかぽんのボヤキ部屋

Web制作している人間なら誰しもフォームでつまづくと思います。(つまづきますよね!?俺だけ…!?)そして以前、フォームを簡単に使えるformrunというものを紹介しましたが、コチラもなかなかに便利なのでオススメです。

Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

今回はGoogleform埋め込みで回答完了画面に遷移させない方法 -改-としまして、以前記事で、Ajaxを使用してGoogleフォームを埋め込んで画面遷移させない方法を解説しました。

チェックリストの必須判定はこちらの記事↓を参考にしました。
↑のブログさんのJSに↓の処理を挟んだだけ。(※return trueは外す)

Javascript チェックボックスが未選択のままsubmitを押したら警告が出るようにする – americandog1993の日記

チェックボックスがすべて空だったらsubmitさせたくない時。 まずJS。 function isCheck() { var arr_checkBoxes = document.getElementsByClassName(“checkBoxes”); var count = 0; for (var i = 0; i < arr_checkBoxes.length; i++) { if (arr_checkBoxes[i].checked) { count++; } } if (count > 0) { return true; } else { window.alert(“項目を1つ以上選択…

テキストエリアの自動調整はこちら↓をお借りしました。

入力行数に合わせてrowsを自動調整 | 私的雑録検索

入力行数に合わせてrowsを自動調整:入力された文字数と改行に合わせて高さを追加 [jQuery] – 私的雑録 PHPをよく書いている人の備忘録

 

こういうサンプルコードや指南を無料で公開してくれてるサイトさん、本当にありがたい……感謝!

イイネ!