前回、お問合せやアンケートなどのフォーム作成は、wordpressでホームページを作っているなら、無料のプラグインが手っ取り早い・・・という記事を書きました。
また、万が一、ホームページ作成にwordpressを使っていなくても、外部のフォーム作成サービスを使えば、手っ取り早くフォームを作成することができます。
たとえば、無料ならGoogleフォント、有料ならformrunなどですね。
企業用ではないフォームが欲しい
ところが、簡単に作れるフォームって、デザイン性がいまいちです。
特に、無料タイプは、その傾向が強いです。
また、有料タイプの方は、基本、企業用をイメージしているので、突出したデザインよりも、ユーザーインターフェースの方に重きを置いています。
まぁ、結局は、フォームに何をどこまで求めるのか？ってことになるんですが、このサイトでは、過去に、クリエイティブな話題とか絵の話とかもちょっぴり書いてきたんで、多少はそれなりの見た目にしたいな～と。
そこで！
「自分でフォームを作成してみようか？」
などと、アナログ系の素人がとんでもない野望を持ったのでした。
フォーム作成が難しいのはここ！
ところが、フォームの作成を練習し始めて、見えてきたことがあります。
それは！
フォームの作成は、とんでもなく面倒くさい！ってこと。
それを図にしたのがこちらです。
つまりどういうことか？というと、ホームページ上でフォームとしてちゃんと使えるようにするためには、黄色い四角と緑の四角の両方のプログラミングが必要ってことです。
しかも。
黄色い四角も、緑の四角も、それぞれ、めっちゃ面倒くさいわけですよ。
「これは、気が遠くなる・・・。」
でも、ここであきらめたら、いつもと同じです。（笑）
見た目だけのフォームを作成してみる
そこで、とりあえず、見た目だけでもいいからフォームを作成してみることにしました。
んで、最初に作ったのがこちら。
すべてコードを書いて作ったのですが、動画を見ながら作ったので、ちゃんと完成しました。
まぁ、多少、囲み線のタイプや色なんかは自分好みにしましたが。
で、次に作ってみたのがこちら。
こちらは、１からコードを書くんじゃなくて、bootstrapを利用して作成したアンケートフォームです。
bootstrapを使うと、手間は半分ぐらいでした。
しかも、簡単にレスポンシブデザインにすることができます。
上記のアンケートフォームはパソコン画面用ですが、スマホサイズになると、ちゃんと、ラジオボタンの部分が縦に並びます。
これもまた、動画を見て作ったので、無事、完成しました。
見た目もシンプルで綺麗なのですが、今、私が恋焦がれるデザインフォームとはちょっと違います。
フォーム作成コードを真似てみる
そこで、今度は、他の人が作ったデザインフォームを真似て作ってみることにしました。
世の中には、おしゃれな、かわいいフォームのコードを惜しみなく、コピペしていいよ！と言ってくれる人がいるんですね。
もちろん、コピペでは、勉強にならないので、一つずつ、コードを確認しながら自分流で作ってみました。
それがこちら。
だいぶ、手抜きをしたので、お手本にしたフォームより、何倍もしょぼいです。（泣）
一番の欠点は、メッセージ部分のライン調整ができていないところですが、でもまぁ、今回はここで終了と致します。
まとめ
もともとは、GA4のコンバージョン設定のためのフォーム作成だったはずなんですが、なんか、やっているうちに、フォームの作成の方が楽しくなってきちゃいました。
もっとも、納得のいくフォームを作成しようと思ったら、まだまだ学ばなきゃならないことは山積みなんですが、一番の肝は、続けられるか？どうか？ですね。
