ビリヤード大会エントリー用のカスタムフォームを作ってみた
※2020/8/3 Demoサイトへのリンクを追加
※2020/8/8 btn-group-toggle クラスで作った radio button のインデントが解決
どうも、キヨタです。
しばらく更新が滞ってしまいましたがサボっていた訳ではありませんw
本業の繁忙期だったのと、インプットが多くてなかなか進まなかったのです。
今回はビリヤードの大会のエントリーフォームを実装してみました。
本当はかなり多岐にわたって試行錯誤したのですが真面目に書くと疲れるでこの記事では雰囲気だけ書くので留めておこうと思います。
ビリヤードで公式戦に出られる方はそのうちこのフォームに出会うかも。
検討背景
- 私の趣味がビリヤードで業界的につながりがある
- ビリヤード界隈は業界的にデジタル化が遅れている
- 公式戦のエントリーがメールベースで運営が大変そう
- 入力の抜け漏れないようにフォーム化すればええやん
検討成果
最終的には下図のようなものが出来上がりました。
Demo : Sample大会 エントリーフォーム
- Google Apps Script
- フォーム制御
- SpreadSheetへのデータ格納
- メール自動応答
- レスポンシブデザイン
- Bootstrap (web)
- mjml (mail)
どうしてもできなかった事
- Bootstrapの btn-group-toggle クラスで作った radio button の左にどうしてもインデントが入ってしまう
[追記]
Bootstrapのform-checkクラスにpaddingが設定されていた事が問題だとの指摘があり、 下記の記述をstyleとして追加したら直りました。
.form-check { padding: 0; }
参考文献
ほぼゼロから色々詰め込んだのでちょっと多すぎ
