web製作

コンタクトフォーム7の電話番号入力欄

 wordpressのコンタクトフォーム7でフォームを作っていると、電話番号や数値の入力欄がテキストフォームと比べて細くて真四角だったので、テキストフォームとそろえてみた。

施工前

電話番号とFAXの欄が細くて四角い。

これを子テーマのスタイルシートに

[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]
/* 電話番号入力欄 */
form input[type="tel"] {
border-width: 1px;
border-style: solid;
  border-radius: 4px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
font-size: 100%;
background-color: #ffffff;
width: 12em;
}

[/css]

を書いてみた。
border-radius で、角を丸く。
background-color: #ffffff;で枠内の背景を白にした。
そしてwidth: 12em; で入力欄の幅を指定。この幅でスマホの幅になっても見切れることは無い。

施工後

完成。

実際に使用したサイトはこちら

https://denpakudo.jp/guideapplicationform/

ドロップダウンのフォームの編集はこちら
コンタクトフォーム7のドロップダウンのCSS

ABOUT ME
moja
昭和47年生まれ。生まれた時からカープファン。 姫路生まれ姫路育ち。現在は相生市矢野町榊。 パソコン販売・修理・組立、出張サポート、ホームページ制作・WEBデザインなど。 奥さん1人と4男の父 真宗門徒
お問い合わせ

090-3990-0645

にほんブログ村 地域生活(街) 関西ブログ 姫路情報へにほんブログ村 子育てブログへにほんブログ村 野球ブログ 広島東洋カープへ