WP FormsをCSS&JSでキレイにカスタマイズ！お問い合わせやCTA、LPにも最適

2020 4/01

2018.06.12 2020.04.01

読み込みが早いのでContact form7よりも好きな「WP forms」ですが、デザインが単調なのでカスタマイズできるようにCSSを組みました。

WordPress初心者の人でも簡単に設定できるようにプラグインを利用して実装するようにしています。

知識のある人も良いとこ取りで使ってみてください。

気に入っていただけたらシェアしてもらえると幸いです。

カスタマイズ後のデザイン例

カスタマイズ後のデザインは基本は以下のようになります。

背景色なども変えられるようにしていますので、LPの下部で目立たせることも可能です。

「Custom CSS & JS」プラグインで初心者でも簡単な実装方法

CSSとJSを使用しますので「Simple Custom CSS and JS」を利用します。

インストールと有効化をしてください。

JSコードの挿入方法

以下のJSソースコードをそのままコピペして使ってください。

jQuery(function() {
	jQuery(".wpforms-required-label").text("必須");
});

「Simple Custom CSS and JS」のタブにある「Add Custom JS」をクリックします。

タイトルは適当でいいです。コードのコメントも決して構いません。
上記のJSソースコードをコピーペーストして「公開」をクリックしてください。

JSの設定は以上です。

CSSコードの挿入方法

CSSは以下のソースコードを使用します。

なるべく多くの環境で効くようにimportantを多用しています。

コメントの部分に各機能を記載していますので、テキストのカラーやサイズ、背景色、余白の設定など自由に行なってください。

/*----------------------------------------------------------------------------- */
.wpforms-required-label{								/*	必須項目のラベル	*/
    color: #fff !important;								/*	必須ボタン文字色	*/
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25) !important;	/*	必須ボタン背景色	*/
    background-color: #da4f49 !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    white-space: nowrap;								/*	改行防止	*/
}
.wpforms-field-label{
    padding: 3px 0 !important;
}
.wpforms-one-half{
	width:100% !important;
	margin-left:0% !important;
}
.wpforms-field {
    border: 1px solid #cccccc !important;
    overflow: hidden !important;
    border-bottom: none !important;
    padding: 4% 2% !important;							/*	質問上下左右余白	*/
   	background-color:#ffffff !important;				/*	フォーム背景色	*/
}
.wpforms-field:last-child {
    border-bottom: 1px solid #cccccc !important;
}
.wpforms-field:nth-child(even) {
	background-color:#f4fbff !important;				/*	偶数行背景色(フォーム背景を1色にする場合は不要)	*/
}
label.wpforms-field-label {
    width: 50% !important;
    color:#333333;										/*	質問文字色	*/
    float: left !important;
    padding-right: 2% !important;
    margin: 0 0 15px 0 !important;
}
.wpforms-container ul{
    width: 50% !important;
    float: left !important;
}
.wpforms-field-small,
.wpforms-field-medium,
.wpforms-field-large{
    width: 50% !important;
    max-width: 50% !important;
    float: left !important;
}
.wpforms-field-small:focus,
.wpforms-field-medium:focus,
.wpforms-field-large:focus{
    width: 50% !important;
    max-width: 50% !important;
    float: left !important;
}
.wpforms-container textarea{
	max-width: 50%;
    float: left !important;
}
.wpforms-error{
	float:right !important;
}
.wpforms-submit-container{
	text-align:center;
}
.wpforms-form button[type=submit]{
	padding:0.5em 2em !important;
	background-color: #3cb371 !important;				/*	送信ボタン背景色	*/
    border: none !important;
    color:#ffffff !important;							/*	送信ボタン文字色	*/
    font-weight:bold;
}
.wpforms-form input[type=checkbox]{
	float:left !important;
	margin: 6px 10px 0 3px !important;
}
@media only screen and (max-width: 600px) {				/*	スマホ表示時設定開始*/
.wpforms-container{										/*	スマホ表示時横幅100%設定	*/
	margin-left: calc(((100vw - 100%) / 2) * -1) !important;
	margin-right: calc(((100vw - 100%) / 2) * -1) !important;
}
.wpforms-container textarea{
	max-width: 100%;
}
label.wpforms-field-label {
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    padding: 2px 5px !important;
}
label.wpforms-field-label {
    width: 100% !important;
}
.wpforms-container ul{
    width: 100% !important;
}
.wpforms-field-small,
.wpforms-field-medium,
.wpforms-field-large{
    width: 100% !important;
    max-width: 100% !important;
}
.wpforms-field-small:focus,
.wpforms-field-medium:focus,
.wpforms-field-large:focus{
    width: 100% !important;
    max-width: 100% !important;
}
.wpforms-field {
    border-left: none !important;
    border-right: none !important;
}
}														/*	スマホ表示時設定終了*/

「Add Custom CSS」をクリックします。