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」に変更してください。
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPressの使い方・カスタマイズ・トラブル対応など、ご相談ください。
お問い合わせはこちらから
【対応料金の見積もりは無料です】
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク