mashmash555 歌とギターと釣りと色々

mashmash555 official blog

Wordpress

STINGER5 contactform7カスタマイズ横幅を整える

投稿日:

contactform7横幅を整えてスマートフォンでの表示を最適化

多くの方が導入されているcontactform7。
カスタマイズに優れていてとても便利ですよね。
このブログでも使っていますが、STINGER5にデフォルトで導入するとスマートフォンで表示した際にテキストエリアがはみ出てしまい、スクロールした際に横へもスクロールしてしまう現象を修正した手順を参考までに書いておきます。

コンタクトフォームの編集

お問い合わせ→コンタクトフォーム→編集とクリックしてフォームへ下記をコピペ。
コンタクトフォーム
[text]
お名前 (必須)
[[text* your-name class:form-width]]

メールアドレス (必須)
[email* your-email class:form-width]

題名
[[text your-subject class:form-width]]

メッセージ本文
[textarea your-message class:form-width]

[submit "送信"]
[/text]

CSSの編集

外観→CSS編集を選択して下記コードを記述
[css]
.form-width {
max-width: 100%;
}
[/css]

以上のカスタマイズで横幅が最適化されてスマートフォンでの横スクロールがなくなりました!!

-Wordpress
-, , ,

Top

Copyright© mashmash555 official blog , 2017 All Rights Reserved Powered by AFFINGER4.