Mac・iPhone・Webをブログに『してみる』

SiteMiru

WordPress

【WordPress】コピペでOK!『Contact Form 7』をレスポンシブ化するカスタマイズ!

更新日:

wordpress-contactform7-responsive

お問い合わせフォームをサクッと『レスポンシブ化』してみました。

WordPressのお問い合わせフォームといえば皆大好き『Contact Form 7』。プラグインで簡単に設置出来るのでよく使われてるのではないでしょうか?

ただ、スマホで見た時に突き出てしまってちょっと不格好。

せっかくのレスポンシブテーマなのでお問い合わせフォームもレスポンシブにしちゃいましょうー。

作業時間1分ぐらいです。(多分)

スポンサーリンク

まず、スマホで見るとこんな感じ

wordpress-contactform7-responsive01

あらら。フォームが突き出てしまってますね。

別にこのままでも使えるからいいんですがあんまり気持ちよくはないので可変に対応したいところ。参考にさせて頂いた記事はこちら。

Contact Form 7をレスポンシブ対応する | WordPressの勉強がてら

コードそのまま使わせてもらってます、感謝!

ここから1分!貼り付けるだけで『レスポンシブ化』

『コンタクトフォーム』にClassを追加

wordpress-contactform7-responsive04

WordPress管理画面より『お問い合わせ』→『コンタクトフォーム』へ行き、フォームのレスポンシブ対応したい箇所へClassを追加します。

class:form-width

そして画面に収まるようにCSSへこちらをペッと貼り付け。

.form-width { max-width: 100%;}

作業終了です。スマホでチェックしてみると。。

wordpress-contactform7-responsive02 1

フォーム部分が突き出てません、OKです。

コードを貼り付けるだけなので1分ほどの簡単作業ですね!

ついでにボタンもフラットな感じにカスタマイズ

wordpress-contactform7-responsive03

CSSへ追加するだけでボタンの雰囲気も変えられます。

こちらのコードをCSSへペッと貼り付け。

.wpcf7-submit {
font-size: 17px;
padding: 3px 25px;
background: #e9e9e9; 
color: #363B3F;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: solid 4px #dcdcdc;
}
.wpcf7-submit:hover {
background-color: #dcdcdc;
color: #dc143c;
}

うむ、フラットな今風ボタンになったのではないでしょうか。

ブログやサイト運営してるとお問い合わせって結構来るものなので使いやすくていい印象を与えるに越したことはないですよね。よろしければコード使ってみてくださいねー。

この記事が気に入ったら
いいね!しよう

-WordPress
-,

Copyright© SiteMiru , 2017 AllRights Reserved.