お問い合わせフォームの入力欄の長さ(大きさ)の変更について

  • # ホームページ制作について
  • Eye108
  • Userじぇいく
  • Calender2021/06/14

解決
済み

お試し期間中です。
blue_circle というデザインが気に入って、作成しています。
お問い合わせフォームの入力欄についてですが、住所やメールアドレスを入力してもらう欄の長さがまちまちでかっこよくないです。
他のデザイン(例えば universal_plain)では長さが揃っています。
この入力欄の長さというのは変更できるのでしょうか?
できるのであれば詳しく教えていただきたいです。

詳しい方、よろしくお願いします。

みんなの回答を見る

  • Userhiguita
  • Calender2021-06-16 14:52:14

お問い合わせフォームの見た目は人によって好みが違うので、調整できると嬉しいですね。
「とりあえずHP」では簡単にお問い合わせフォーム入力欄の幅調整ができる機能はありませんが、ちょっと強引にCSS編集機能を使って、CSSを編集することで調整することができるみたいです。

方法としては、CSSの最後に以下の内容を追記するようになります。
※「blue_circle」のテンプレートで確認したので、他のテンプレートでは適用されない可能性があり、デザインテンプレートを変更したら編集した内容は適用されなくなります。
※「●●」部分の数値によって幅が変わります。

●お名前
input[name="onamae"]{
width: ●●px !important;
}

●ふりがな
input[name="furigana"]{
width: ●●px !important;
}

●ご年齢
input[name="age"]{
width: ●●px !important;
}

●郵便番号
input[name="zip"]{
width: ●●px !important;
}

●ご住所
input[name="addr"]{
width: ●●px !important;
}

●お電話
input[name="phone"]{
width: ●●px !important;
}

●メールアドレス
input[name="mailto"]{
width: ●●px !important;
}

●確認用メールアドレス
input[name="mail2"]{
width: ●●px !important;
}


例えば、「住所」「メールアドレス」「確認用メールアドレス」を同じ長さにしたい場合、以下のような内容をCSSに追記します。

---------ここから---------
input[name="addr"]{
width: 200px !important;
}
input[name="mailto"]{
width: 200px !important;
}
input[name="mail2"]{
width: 200px !important;
}
---------ここまで---------

CSS編集機能の使い方は以下のページで紹介されているので、参考にすると良いと思います。

https://pr.toriaez.jp/navi/howto/1864.html

記事を編集する
  • Userじぇいく
  • Calender2021-06-17 19:18:30

大変詳しくありがとうございました。
再現して確認までしてくださり感激です。
CSS編集はしたことがないのですが(汗)チャレンジしてみようと思います!

記事を編集する
次のページ