CONTACT FORM 7
Contact Form 7 対応フォームデザイン
WordPressの Contact Form 7 用に作ったフォームデザインです。CF7のフォーム欄に貼るタグと、CF7が出力するHTMLに合わせたCSSをセットで配布しています。エラー表示や送信完了の表示もデザイン済みです。
8種類
Contact Form 7 での使い方
- フォームの中身「CF7フォーム」タブの内容を、Contact Form 7 の「フォーム」欄に貼ります。メール設定の項目名（
[your-name]など）はそのまま使えます。 - CSS「CSS」タブの内容を、テーマの「追加CSS」か子テーマのstyle.cssに貼ります。
- ショートコード固定ページには
html_classを付けたショートコードを貼ります。例：[contact-form-7 id="123" html_class="cs-cf01"]（idはご自分のフォームの番号）。この指定でフォームにクラスが付き、CSSが効くようになります。
項目のあいだに余計な改行や隙間が出るときは、Contact Form 7 の自動整形（改行を<p>や<br>にする機能）が原因です。テーマの functions.php に add_filter( 'wpcf7_autop_or_not', '__return_false' ); を1行足すと止まります。各CSSにも、整形が入った場合の崩れを抑える指定を入れてあります。
見本の「送信」を押すと、未入力のときのエラー表示と、送信完了の表示を確かめられます（実際には送信されません）。
入力欄をクリックすると、中に書いてあったラベルが上に小さく移動します。各項目の placeholder " "（半角スペース1つ）はこの動きに必要なので消さないでください。
横幅が640pxより狭くなると、ラベルが上・入力欄が下の縦並びに切り替わります。「幅：スマホ」で確かめられます。
ラジオボタンをタイル状のボタンに見せています。選んだボタンに色が付きます。選択肢の文言はCF7フォームの [radio …] の中で変えられます。
四隅の枝と実は、CSSの中に書いたSVGの絵です（画像ファイル不要）。飾りが不要なら ::before と ::after のルールを消してください。
入力欄の左のアイコンは、CSSの背景に書いたSVGです。項目名は欄の中に入れてあるので（placeholder）、縦に短くまとまります。
背景のぼんやりした色の玉は、フォームの後ろに描いたグラデーションです。ページの背景に写真がある場合は、background の行を消すと写真がすりガラス越しに透けて見えます。