ContactForm7をレスポンシブにする

まだ全然サイト作れてないですがお問合せだけ作りました。お問い合わせフォーム作るの楽しいので、、

ですがスマホだと入力欄が突き抜けてしまうということがあったのでレスポンシブにしました
参考:コピペでOK！『Contact Form 7』をレスポンシブ化するカスタマイズ！

 

完成はこんな感じ。突き抜けずによさげ。

つくり方は参考サイトそのままです。

まずContactForm7の設定でタグに

class:form-width

を追加します。

次にCSSに

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

を入れるだけです。参考サイトはボタンもフラットデザインにしていたのでマネます。

.wpcf7-submit {
font-size: 1.2em;
padding: 5px 30px;
background-color: #0088CC;
color: #fff;
border-style: none;
}
.wpcf7-submit:hover:enabled {
background-color: #16A1E7;
color: #fff;
}

色をちょっとこのサイト仕様にしただけ。簡単。もっと濃い記事書かないとダメっすね。