Googleフォームを自作アレンジしようとしたが詰んだ
Googleフォームを自作フォームと連携して簡易なWeb拍手を作ろうと思ったんだけど、メモ帳ではうまく行くのにサイトでは動きませんでした
超好みのシンプルさで良い感じだったんだけどおそらくクロスドメインによって阻まれている?Neocities はPHPが使えない?ていうのが原因かな???どうやってもうまく行かなかった…
供養します。
<form action="末尾がformResponseのURL" method="post">
<textarea name="entry.xxxxxx" placeholder="comment"></textarea>
<div class="clapradio"><input type="radio" id="clap" name="entry.iiiiiiii" value="clap" checked><label for="clap">clap</label></div>
<input type="submit" value="CLAP">
</form>
あらゆるサイトからコードを拝借しまくり落ち着いたのがこれ。
・URLと項目に対応するentryの番号はソースコード表示から探す。
アレンジした部分が以下。
・ラジオボタンを「checked」にする。
・CSSで「.clapradio」を作り、display: none; でラジオボタンの存在を非表示にする。
非表示だけどCheckedで押せてる状態になっているので、CLAPボタンを押すだけでGoogleフォームに「clap」が1入る。
これでわざわざボタンを選択する必要がなく一番理想形だった!使えなかったが…
で結局どうなったのか
Googleフォームは公式でiframe埋め込みコードが出せる(ダサいけど)ので…
<div style="width: 100%; height: 400px; background-color: #fff5f5; overflow: hidden">
<iframe src="GoogleフォームのURL" width="100%" height="520" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" style="position: relative; left: -5px; top: -150px">読み込んでいます…</iframe>
</div>
サイド(ハンバーガーメニュー)にこれを設置してます。
ヘッダー(タイトル部分と内容は保存されませんの文字)が邪魔なので
style="position: relative; left: -5px; top: -150px"
でiframeをトリミング、スクロール不可に
背景を白にしてはみ出た枠をなんとなく誤魔化した。
上部をトリミングしたことで送信完了が見切れてしまうけどもうそこまで面倒見切れませんって感じなので無視する。無視してください。
ラジオボタンで拍手を選択して送信してもらう必要があるけど別ページに飛ぶよりは手間ではないか…と思って落ち着かせている…
そして何より公式から許可されている埋め込みなので…
追記
案1
ラジオボタンをなくして短文の解答だけにする
何もせず送信すると空白回答になり、スプレッドシートに送信時間と空白の回答が送られる。(フォームの回答ページだと通知の数が増えるだけなのでわかりづらい)
公式の埋め込みコードでいけるので透過背景で置けて見た目がシンプル
案2
フォームの事前記入で「Clap」を押した状態のリンクをコピー
埋め込みのURL部分に貼り付ける
そのせいか背景透過にはならないがClapラジオボタンを押した状態で埋め込まれる
公式の方法ではないので今後仕様変更したりすると使えなさそう
でも事前記入したURLがコピーできるってことはそこまでダメな方法じゃないのではと思ってる