【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;
}

完成図

お問い合わせフォーム完成図

ラベルの前にアイコンが入り、フィールドの幅が等間隔になりました。

アスタリスクは当サイトで使用しているキーカラーの色にしてみました。

ボタンもセンタリングされ、色も白黒に。ホバーすると黒く反転するようになっています。

シンプルながら統一感が出たような気がします。

送信完了後のサンクスメッセージの完成図

こちらも送信ボタンに合わせて白黒にしました。

一連の流れで、デザインが統一されました。

補足

  • reCaptcha
  • SMTP(メールサーバー)

WPFormsを利用するにはこの2点についても設定が必要ですが、本記事では省略しています。

まとめ

こんな感じになりました。

このサイトは色数が多くないのでシンプルに微調整しましたが、フォントカラーや背景色をアレンジすればカラフルにカスタマイズすることもできます。

お試しください。

  • URLをコピーしました!

コメント

コメントする

目次