Contact Form 7レスポンシブル対応

WordPressでサイトを制作するとお問い合わせフォームで「Contct Form 7」を使用される事もあるかと思います。とても便利で簡単に設置できるので個人的には重宝しております。前に制作させて頂いたサイトでレスポンシブル対応させましたので、CSSを記載致します。

.wpcf7,
.half{
	
	width: 90%;
}
.wpcf7{
	margin-right: 5% !important;
}
.wpcf7 input[type="text"],
.wpcf7 textarea {
	padding: 5px;
	width: 85%;
	border:1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-radius: 5px;
	background: #fff;
	-webkit-box-shadow: 0 1px 1px #fff, 0 2px 4px #eee inset;
	-moz-box-shadow: 0 1px 1px #fff, 0 2px 4px #eee inset;
	box-shadow: 0 1px 1px #fff, 0 2px 4px #eee inset;
	color: #555;
}
.wpcf7 input[type="email"],
.wpcf7 textarea {
	padding: 5px;
	width: 85%;
	border:1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-radius: 5px;
	background: #fff;
	-webkit-box-shadow: 0 1px 1px #fff, 0 2px 4px #eee inset;
	-moz-box-shadow: 0 1px 1px #fff, 0 2px 4px #eee inset;
	box-shadow: 0 1px 1px #fff, 0 2px 4px #eee inset;
	color: #555;
}
.wpcf7 textarea{
	overflow: auto;
        height: 100px;
        width: 95%;
}
.wpcf7 label{
	display: block;
}
.req{
       color: #fd738a;
       vertical-align: super;
       font-size: 80%;
}

#captcha-text{
       width: 199px;
}

.wpcf7-form-control.wpcf7-submit{
        width: 161px;
	height: 46px;
	border: 0;
	background: #222;
	color: #fff;
	text-indent: .5em;
	letter-spacing: .5em;
	font-size: 16px;
	cursor: pointer;
        margin-bottom: 30px;
}

.wpcf7-submit:hover{
	background-position: 0 100%;
	background: #444;
                
}
.wpcf7-submit:active{
	position: relative;
	top:1px;
	background: #444;
}

まとめ

WordPressでは多くのプラグインを使用される方も多いと思います。よく使うプラグインをレスポンシブル対応にしておくと作業効率が上がるかもしれませんね!!上記のCSSはコピペして頂くと「Contct Form 7」をレスポンシブル対応にできますので、閲覧された方の作業効率アップに利用して頂けると幸いです。