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

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

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

server-recipe.com

2018.10.06

にて、ContactFrom7で、プルダウンを横並びにする方法を紹介しましたが、不足部分を・・・

プルダウンの作成

フォームの作成にて、通常作成と変わらない方法で、プルダウンを作っていきます。
今回も、生年月日を作ります。

↑「年」の部分を作ります

↑「月」の部分を作ります

↑「日」の部分を作ります

それぞれ、「タブを挿入」のボタンを押していきます。

↑「フォーム」の画面では、上記のようになります。

「Twenty Twenty-One」での横並び

↑最初から導入されているテンプレート「Twenty Twenty-One」では、上記のようになります。
この場合、幅は、小さくなっております。この場合、横並びにするには・・・

↑「フォーム」の「生年月日のところを

[select born-y include_blank "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000"]年
[select born-m include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12"]月
[select born-d include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日

から

[select born-y include_blank "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000"]年[select born-m include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12"]月[select born-d include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日

に変更をします。

「改行なし」に「１行」として書く。
のが、重要です。

↑すると、上記のように、横並びになります。

「Twenty Twenty-One」以外の横並び

他のテンプレートではどうでしょうか・・・

↑と、改行があるフォームで、設定をすると・・・

↑と、横幅がいっぱいになってしまいます。

↑この場合、横幅を狭くするために

.wpcf7 select
{
    width: 20%;
}

↑と、ＣＳＳを追加します。

↑画面を見てみると、幅が狭くなっています。
ただ、１行には、なっていないので、１行にします。

↑前半と、同じように

[select born-y include_blank "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000"]年
[select born-m include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12"]月
[select born-d include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日

から

[select born-y include_blank "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000"]年[select born-m include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12"]月[select born-d include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日

と、改行を入れないで（１行にして）保存をします。

↑横並びになりました。