[wp]cf7前提的な私的汎用フォームデザイン

どこでもこんな感じ。

こう。
解説的なもの
最後に

こう。

Document

“20240513_form” をダウンロード

20240513_form.zip – 18 回のダウンロード – 11.12 KB

scssで組むとデザイン変更とか楽でいいですね。

解説的なもの

なんでContactform7か

使ったらわかるけど便利。

無料の範囲でやれることがめちゃくちゃある。

問い合わせ内容をGoogleスプレッドシートに貯められるとかね。

確認画面がないこと、サンクスページがないことで広告周りでめんどい目に遭うかもだけど、基本的に詰みはない。

MW WP formをいまだに使ってる人は流石にアップデートして下さい。

導入したjs

名前からフリガナを自動挿入する「jquery.autoKana.js」
郵便番号から住所を自動入力する「yubinbango.js」

この2つはよく使う。

特にフリガナは、入力がめんどくさいから省いたほうがいい的なアレだったりもするけど、読みが分からないとか通常読まないやつとか、事務的なところできつくなるから個人的に必須。で、基本的にみんな変換できる名前だから手間はないと判断したりする。

あとはセミナーとかで希望日を入れて貰う場合はブラウザ依存よりdatepickerの方が使い勝手が良くて、これはWPプラグインよりは自分で作成したほうが安定する。だけど使う頻度はそんなにないので別記事に書いたのを参照。

js読み込み関係

    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous" defer></script>
    <script src="js/yubinbango.js" charset="UTF-8" defer></script>
    <script src="js/jquery.autoKana.js" charset="UTF-8" defer></script>
    <script src="js/form.js" charset="UTF-8" defer></script>

yubinbango.jsはjQueryに依存してない。
標準的な設定は<head>に入れておいて問題ないんだけど、今回の内容（form.js）は自動記入後にフォーカス位置を変更するギミックを足した。これはいわゆる<body>の最後（発火位置より後）に書かないと発火しない内容で、だけどwpは組み方により下部に書けないこともある。deferで読み込みを非同期にしちゃえば<head>に書いても発火するので一つの選択肢になる。

css関係

まず、独立で使えるようにreset.cssを突っ込んで初期化してある。別で初期化する場合は削除とかで調整。基本的にどうとでもできる組み方だけど、文字サイズを16pxありきにしてあるので干渉するかも。
そこは注意。

checkbox、radio、selectはsafariでデザイン変更が効かない。
なので、これを宣言する。

    :is(input[type="radio"],input[type="checkbox"],select){
        -webkit-appearance: none;
        appearance: none;
    }

で、これらは全部疑似要素が使えない。なので、親要素とか兄弟要素で装飾することになる。

今回は素材を引っ張るのがめんどくさかったので、アイコンが欲しい部分はCSSで済む程度の装飾にした。::beforeと::afterが使えたら最低限はできる。

親・兄弟については、今回はContactForm7を前提にしたので自動生成される<span>のclassを引っ張ってある。

html周り

dom多めだけど弄りやすい形に組んだつもり。
自分的にはこれが楽。

一つのタグに複数の役割をもたせるのは手を入れるときに結構しんどい場面がある。

レスポンシブについて

PC/SPで最適解を考えるよりも、基本的には同一の形のほうが作るのが楽だしユーザーにそこまでの影響はないと考える。なので、どっちでも崩れないデザインを作ることを優先してる。

そのうちの一つがinput周りの文字サイズ16px。これを割るとスマホだとズームされるし、このためにズーム拒否の魔法入れたくない。

タイトルと入力部の縦並びは、ある程度項目数が多い場合は横並びにして高さを抑える的なことはたまにやる。

デザインについて

まあなんというか、最低限的な。

checkboxとradioは茶目っ気。
アイコンにしてもいいんだけど、見やすさとか操作とか考えたらどっちがいいんだろうという気持ちがある。まあ、アイコンだと普通にやればいいだけなのでめんどくさそうなのを採用して組んだ。

最後に

もっと凝れるけど、此処から先は汎用性から外れる内容も出てくる気がしたのでおしまい。