Contact Form 7のラジオボタンやチェックボックスを縦並びに表示する

WordPressのContact Form 7プラグインで作成するメールフォームに追加したラジオボタンは次のように横並びになります。

Contact Form 7のラジオボタン
Contact Form 7のラジオボタン

縦に並べるには、次のようなCSSを記述する方法があります。

/* Contact Form 7のラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
    margin-top:10px;
    display: block;
}

表示結果は次のようになります。

Contact Form 7のラジオボタンを縦並びに
Contact Form 7のラジオボタンを縦並びに

span(.wpcf7-list-item)に対して「display: block;」を指定することで、横並びのインライン要素ではなくブロック要素として表示しています。「margin-top:10px;」は項目の上に余白を入れているだけです。

テーマによっては上記のCSSセレクタではうまくいかない場合があります。そのテーマで設定されているCSSセレクタを調べながら試行錯誤してください。

また、フォーム要素に別のCSSが設定されているテーマでもうまくいかない場合があります。その場合、「float: none;」を追加するなど、既存のスタイルを上書きする工夫が必要です。

上記のCSSセレクタからラジオボタンを示す「.wpcf7-radio」を削除すると、チェックボックスなどすべてのリスト項目が縦並びになります。

/* Contact Form 7のリスト項目をすべて縦並びに */
.wpcf7-list-item {
    margin-top:10px;
    display: block;
}

表示結果は次のようになります。

チェックボックス・ラジオボタンなどのリスト項目を縦並びに
チェックボックス・ラジオボタンなどのリスト項目を縦並びに
チェックボックスのみを縦並びにするには最初に紹介したラジオボタン縦並び用のCSSの「.wpcf7-radio」を「.wpcf7-checkbox」に変更してください。

2014年11月12日Contact Form 7のカスタマイズ