有料版ではここに
ウィジェットを設置可能

フォームの設置

2019 10/24
有料版ではここに
ウィジェットを設置可能

プラグイン「Contact form 7」を入れました。

Contact Form 7
Contact Form 7
Contact Form 7Just another contact form plugin for WordPress. Simple but flexible.

たしかに、簡単にフォームが作れるのですが、デザインカスタマイズが制限されてしまうような。。

できる範囲でデザインすればいいのかもしれませんが、今回はデザインありきで作っていたのでちょっと「んーー。。」となってしまいました。

と言うか、ほんとにシンプルなフォームばかりで、ドロップダウン項目やファイルアップロード項目についてのカスタマイズを書いている記事が全然ないんです!

でも自分でメール設定すること考えるとやっぱり楽そうだし。。
もうちょっと頑張ってみます。

目次

ラベルは必要?

カスタマイズの仕方を紹介されているサイトをいろいろみましたが、フォームをテーブルで組んでcssでデザインする方法がほとんどです。

メールにアウトプットするのに、ラベルって必要でしたっけ?

今回のフォームは、ラベルなしで、入力欄にプレースホルダーで入力項目を表示させます。

(メール送信時にラベルが必要でしたら修正します。。)

ドロップダウン項目

プレースホルダーが設定できない

ドロップダウン項目は、プレースホルダーが設定できないようです。

デフォルトの表示は「—」となっているのですが、functions.phpのフィルターフックで任意の文字に変更できるようです。

http://www.sho-dw.com/web/156/

ただ、この方法だとフォーム内に複数のドロップダウン項目を設置していた場合、全て同じ設定になってしまうんです。
(もしかしたら変えれるのかもしれません)

今回はプレースホルダーをラベル代わりに表示させたいので、ドロップダウンごとに表示を変えられるのが理想なんですね。

最初の項目をラベルとみなす

[select* Test first_as_label "Placeholder" "Option 1" "Option 2"]

のように記述することで、セレクトボックス内の最初の項目をラベルとみなせるようです。

WordPress Development Stack Exch...
How to add placeholder for contact form7 for dropdown?
How to add placeholder for contact form7 for dropdown?I tried adding placeholder similar to the given for ContactNumber for my drop down Outlet but it doesn't appear. Code- <div class="form-group form-icon-gro...

この設定をして、「—」を非表示にすれば、最初の項目はあらかじめ見えているのでプレースホルダーのように見せかけることができるのです。

関係ないけど、オシャレなプルダウン

KodoCode
〔  ▼〕選択プルダウン(SELECT~OPTION)をおしゃれにするCSSスニペット15選。 | KodoCode
〔  ▼〕選択プルダウン(SELECT~OPTION)をおしゃれにするCSSスニペット15選。 | KodoCodeフォームのデザインをかっこよくする選択プルダウンのCSSサンプルをまとめました。 デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を...
copypet.jp
コピペでできる!cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp|...
コピペでできる!cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp|...フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 わかりやすくていい感じのセレクトボックスを集めました...

Contact form 7 じゃないけど参考に

GRAYCODE
プルダウンメニューのデザインを変更する | GRAYCODE HTML&CSS
プルダウンメニューのデザインを変更する | GRAYCODE HTML&CSSselect要素にデフォルトで効いているCSSを解除し、自由なデザインに変更する方法について解説します。

ファイルアップロード項目

Contact form 7 じゃないけど参考に

デザインやWEBに関する情報を発信...
ファイルアップロードボタンの装飾
ファイルアップロードボタンの装飾フォームのファイルアップロードボタンは、細かなデザイン変更を行おうとすると、ちょっとした工夫が必要になります。の装飾方法を解説します。
有料版ではここに
ウィジェットを設置可能
有料版ではここに
CTA用ウィジェットを設置可能

関連記事

コメント

コメントする

目次