はじめに
アンケートフォームやユーザーからの入稿物が欲しいな，と思って，GoogleFormやMicrosoftFormsを使ったことはありませんか？
そしてGoogleFormを使っていて，デザインが思うように作れなくてもやっとした経験があるのは僕だけではないはず．．．
とはいえ！
とはいえですね，バックエンドの仕組みをすぐさま構築できるかというとそうではなく！
そのあたりをカバーしているのがこれらのサービスなんですよねー
GoogleForm使っているとGoogleDriveにデータもファイルもアップロードされるから便利なんですよね．．．
まさに雑魚のためのサービス
ですが！どうやらPostnというサービスでそこをカバーしてくれるらしい，のでそれを使って爆速でフォームを作ってみました．
（フォームのマークアップからバックエンドの準備までしてくれるようです）
作成したフォームはこちら！
じゃっかんスタイルが崩れていますが，トータル10分くらいなので気にしない．
あとでChatGPTに直してもらったらいいので．
手順
- Postnでフォームのバックエンドの準備＆フォーム部分のソースコードの作成する
- ChatGPTでスタイリングする
- GitHubPagesでホスティング・フォームを公開する
やってみる
Postn
まずは登録から
Googleアカウントで登録できます．Googleさまさまです．
そしたら，ワークスペースの作成→フォームの作成という順番で進めていきます．
ワークスペースの作成は名前入れるだけです！
よしなに進めましょう！
続いて，フォームの作成です．
色々と入れるところがあるのですがわからないので爆速狙っているのでフォーム名は爆速フォーム，IDはbakusokuにしてみました．
そしたらフォーム編集画面に移動して，コピーしてきます．
動画にまとめました．（あとでアップします）．
ChatGPT
プロンプトも適当です．爆速目指しています．
フォームのマークアップの部分にPostnで生成されたマークアップをコピペします．
モダンなフォームの画面を作って欲しい
メインカラー：#090E3F
サブカラー：#F6F6FA
フォームのマークアップだけはある
[フォームのマークアップ]
爆速で書いてくれます．ありがとうGPT-4o
GitHub Pages
適当にリポジトリを作成します．
ローカルに環境構築するのが面倒なので爆速目指しているのでwebから編集しちゃいます．
Add file → Create new fileで適当にindex.htmlを作り，ChatGPTからコピペして貼ります．
続いて，Settings→General/Code and automation/PagesでBranchからmainを選択してSaveします．
こんな感じです．
そしたらあとは公開されるのを待つだけです．
使ってみた
この内容で送ってみました．
受信した内容は受信箱から確認できます．
画像もバッチリですね．クリックするとダウンロードされます．
おわりに
爆速でできました．
CSSの調整はChatGPTと対話するとして，自由にフォームが作れるのはありがたいですね．
GitHubのコミットみてみたのですが，開始時にリポジトリ作ったので，差分をみてやると9分で完了したことになりますね．
操作動画やスクショを撮っていたので，RTAしたらもっと速くなりそうですw
しれっとAPIが公開されていますが，APIも私も叩かずに生暖かい目で見守ってくださいませ．．．