【SWELL】WPFormsのカスタマイズ方法をご紹介します

WPFormsのカスタマイズ方法をご紹介します

ContactForm7より簡単に設置可能なWPFormsのカスタマイズ方法をご紹介します。

ほぼなにもしなくても簡単に設置できるWPFormsですが、ちょっとした調整をすることで設置するサイトによく馴染むようになります。

本記事では以下の点を追加ssで調整します。

ラベルの文字のサイズと色を調整する
送信ボタンの色を変えてセンタリングする
送信を押した後に表示されるサンクスメッセージの色を白黒にする
必須項目に表示されるアスタリスク(*)の色を変える
項目タイトルの前にアイコンを入れる

事前準備

まずはインストール

有効化します。

WPFormsのデフォルトはこんな感じ

このままでも十分使用できます。

ラベルの名称変更や、フィールドサイズを調整する

名前とメールのフィールドをそれぞれ選択し、名前を任意で変更します。

フィールドサイズについては左の「フィールドオプション」の「高度」を選択すると、「フィールドサイズ」という項目があります。これはデフォルトでは「中」になっていて、入力するフィールドが少し短くなっている状態です。

わたしはメッセージのフィールドの幅と同一にしたかったのでこの部分を「大」に変更しました。

cssでも調整できますが、このように選択できるようになっていると簡単でありがたいです。

cssのカスタマイズ

いきなりですが一気に記載します。

/* wpform フォームの各ラベルの文字調整 */
div.wpforms-container-full .wpforms-form .wpforms-field-label{
color: #000;
font-size:14px;
font-weight:normal;
}
/* wpform 送信ボタン文字サイズ調整・センタリング */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
text-align: center;
font-size:14px;
}
/* wpform 送信ボタンスタイル */
div.wpforms-container-full .wpforms-form button[type=submit] {
margin-top:0.7rem;
background: #fff;
color: #000;
display: inline-block;
min-width: 60%;
padding: 0.75em 3em;
position: relative;
text-decoration: none;
transition: box-shadow .25s,background-color .25s;
}
div.wpforms-container-full .wpforms-form button[type=submit]:hover{
color:#fff;
background:#2b2b2b;
}
/* wpform 送信完了メッセージを白黒に */
.wpforms-confirmation-container-full {
background: #fff;
border: 1px solid #000;
}
/* wpform ラベルの前に飛行機アイコン（FontAwesome） */
div.wpforms-container-full .wpforms-form .wpforms-field-label:before {
content: '\f1d8';
font-family: "Font Awesome 5 Free";
margin-right: 7px;
}
/* wpform アスタリスクの色変更 */
.wpforms-required-label{
color: #3facc1!important;
}