WordPress ContactForm7 プルダウンを横並びにする方法

「広告」

WordPress TIPS

2018.10.062021.04.20

記事内に広告が含まれています。

「広告」

プルダウンの横並び

WordPressの有名プラグイン、「Contact Form 7」にて、「生年月日」を入力させる場合、年月日、それぞれを「プルダウン」にする時があるかと思います。

プルダウンを生成すると、

のようになるかと思います。

デザイン的に、「横並び」にさせたくなります。

「プルダウン」の部品を設定する際に、「横並び」とか、「横幅」の設定はありません・・・

この場合、CSSを４行、加えるだけです。

.wpcf7 select
{
    width: 20%;
}

というようなCSSを追加させます。
（CSSの追加方法は別の時に）

「このパーセント」は、自分の好みで行います。

このCSSを有効にしてみましょう。

すると、「プルダウン」の「横幅」が狭くなり、「横並び」になりました。

「広告」

郵便番号を入力させたい場合、「テキスト」を入れる部品を「Contact Form 7」で作成すると、「横幅」が、凄く長くなります。

日本の郵便番号は、７桁です。そんなに「横幅」が長くなくてもいいです。

この場合も「CSS」を追加させることにより、「横幅」が狭くなります。

「テキストエリア」すべてではなく、「郵便番号」の「横幅」だけを小さくしたい場合、
「Contact Form 7」部品登録時に「ID」を指定します。

このID（上記の例では、「req_zip」）をCSSで指定します。

#req_zip
{
    width: 20%;
}

↑というふうにCSSを設定します。

そして、反映させましょう。

これで、「郵便番号」の「テキストエリア」の「横幅」だけを小さくしました。

「広告」

「Contact Form 7」のデザイン修正は、意外と簡単！
CSSは、難しいと思われるかもしれませんが、まずは、「コピー」して、使ってみてください。
だんだんと慣れてきて、WordPressの達人になります（笑）。

「広告」