WPForms をカスタマイズ【ボタン・必須文字・色を変更してオリジナルに】

WPForms は、お問い合わせフォームをドラッグ&ドロップで簡単に作れる一方で、色などは自由度が低め。そのため、CSS を駆使してカスタマイズする必要があります。

CSS なんて勉強してないから、あまり使いたくないよ〜。

くま五郎

りょう

大丈夫! 基本的にコピペで編集できるように解説するから、安心してね。

ということで、この記事では下記の部分のカスタマイズ方法を紹介します。

この記事で紹介するカスタマイズ
  • 送信ボタンを中央にして色も変える
  • 送信を押した後に表示される文言の背景色を変更する
  • 必須項目に表示されるアスタリスク(*)を文字に変える
  • 項目タイトルの前にアイコンを入れる

上記の中に探しているカスタマイズがあれば、後述する方法でカスタマイズしてみてください。

WPForms の送信ボタンを中央にする

WPForms は、デフォルトの状態だと左寄せの状態で「送信ボタン」が表示されるんですよね。

WPForms

基本設定などでは変更ができない箇所となるので、自分で CSS を追記して変更する必要があります。

りょう

CSS を追記するには、WordPress 管理画面の「外観」から「カスタマイズ」に入ると「追加CSS」という項目が出てきます。これから紹介する CSS をコピペして「公開」を押せば反映します。
「公開」を押しても反映しない場合
CSS を公開しても、設定が反映しない場合があります。その場合にはブラウザやサーバーなどにキャッシュが残っている可能性があるので、クリアにするかもしくは作業中はキャッシュが残らない設定にしておきましょう。

ボタンを中央に表示して色付けまで

まずは、純粋に「送信ボタン」を中央にする CSS はこちら。

CSS
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    text-align: center !important;
}

すると、こんな感じになっているはずです。

WPForms

ただ、せっかくボタンをカスタマイズするのであれば、色なんかも変えたいですよね。だって、灰色のボタンなんて目立たないですし。

そんな場合は、こちらの CSS も続けて追記してください。

CSS
div.wpforms-container-full .wpforms-form button[type=submit] {
    color: white !important;
    background: #ee7948 !important;
    border-color: #ee7948 !important;
}

すると、こんな感じになっているはずです。

WPForms

オレンジっぽい色を例では設定していますが、表示させたい色がある場合には #ee7948 の部分を別のカラーコードに変えてください。

ちなみに、 background がボタンの背景色で、 border-color がボタンの枠の色になります。

カラーコードって何? という人は、色を表示するときに使う英数字はなに?【サイトで表示するカラーコードの考え方】の記事が参考になると思います。

ボタンを中央にして色を変えるところまでいきましたが、このままだとボタンがカクカクしているんですよね。そこで、もし角を少し丸くしたい場合には、 border-radius:5px; を先ほどのコードに追加してあげます。

追記した場合には、このようになります。

CSS
div.wpforms-container-full .wpforms-form button[type=submit] {
    color: white !important;
    background: #ee7948 !important;
    border-color: #ee7948 !important;
    border-radius:5px;
}

すると、ボタンの角が少し丸くなってこのように表示されるはずです。

WPForms

送信後に表示される文言の背景色を変更する

お問い合わせの内容やデザインを全てカスタマイズして、あとはお客さんやユーザーからの問い合わせを待つばかり…

と思ってしまいますが、完成させたらまずは問題なく機能しているのか自分でも確認する必要があります。

そして、その時に初めて気づくんです。フォームのデザインなどはシンプルなのに、送信後になぜ「黄緑色」の背景色でメッセージが表示されるのかと。

WPForms

これも、CSS を追加することで簡単に色を変更することができます。

CSS
.wpforms-confirmation-container-full {
    background: #fff;
    border: 1px solid #000;
}

上記を追加してあげれば、背景色が「白」の状態でメッセージが表示されるようになります。もちろん、別の色にしたい場合には、 #fff の部分を別のカラーコードに変えてください。

WPForms

必須項目のアスタリスクを文字に変える

お問い合わせのフォームを作っている時に、「必須」にチェックを入れると入力しないと送信ができないように設定できます。

フォームを見た時にも必須であるかそうでないかを見分けるには、赤いアスタリスク(*)で判断することができます。

WPForms

ただ、どれだけの人がこれを理解してくれるかってことですよね。

そのため、フォームのどこかしらに「* は必須入力です」とでも記入しておく必要があるかもしれません。

いやいや、最初から「*」ではなくて「必須」と表示できていれば問題ないという話でもありますよね。

その場合には、2箇所コードを追記する必要があります。

りょう

今回は、CSS だけではなく PHP も少し扱います。

まずは、「*」を文字に変えるように指定します。

その場合に、下記のコードを function.php に追加してください。

PHP
function wpf_dev_required_indicator( $text ) {
	return ' <span class="wpforms-required-label">必須</span>';
}
add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator' );

すると、項目タイトルの横に赤い文字で「必須」と表示されているはずです。

WPForms

ただ、これだとちょっと味気ないですよね。そこで、「必須」という文字をタグにさせてしまいましょう。

CSS
.wpforms-required-label{                                
    color: #fff !important;                             
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25) !important;  
    background-color: #da4f49 !important;
    padding: 4px 7px 1px!important;
    border-radius: 5px !important;
    white-space: nowrap;  
}

今度はデザインを変更するので、また「追加CSS」に上記のコードをコピペしてください。すると、下記のように表示されます。

WPForms

このタグの色を変えたい場合には、 #da4f49 の部分のカラーコードを変更してみてください。

また、テーマなどによってタグの大きさなどが微妙に合わなかったりすることもあるはずです。その場合には、下記の部分を調整してみてください。

CSS
padding: 4px 7px 1px!important;

padding とは簡単にいうと「幅」なんですが、数字の順番で設定箇所が決まっています。

padding のルール
  • 値が1つの時:「上下左右」
  • 値が2つの時:「上下」「左右」の順番
  • 値が3つの時:「上」「左右」「下」の順番
  • 値が4つの時:「上」「右」「下」「左」の順番

となるので、例の場合には上が 4px 左右が 7px 下が 1px で幅を設定しているということです。タグの大きさを調整したい場合には、上記を参考にしてみてくださいね。

項目タイトルの前にアイコンを入れる

文字だけでは味気ないので、項目タイトルの前にアイコンを入れたい場合にも CSS を追記することで可能となります。

CSS
div.wpforms-container-full .wpforms-form .wpforms-field-label:before { 
    content: '\f1d8'; 
    font-family: "Font Awesome 5 Free";
    margin-right: 5px; 
}

すると、このように表示されます。

WPForms

これは Font Awesome を使っているのですが、例では「paper-plane 」を表示させています。つまり、「紙飛行機」ですね。

このアイコンを変えたい場合には、Font Awesomeにアクセスしてから Unicode をコピーして content にある f1d8 の部分を変えてください。

WPForms

その際には、 \ を必ずコードの前に付くようにしてくださいね。コピペすると消しがちなので。

Font AwesomeでWebアイコンフォントを簡単表示【初心者でも利用が可能です】

さいごに

細かい幅などを調整するのも難しくないと思うので、基本的には上記で紹介したコードを「追加CSS」または「function.php」に追加すればデザインを変更することができます。

扱い自体は簡単な WPForms なので、CSS でサクッとデザインを変えてサイト(ブログ)を運営してみてください!

他にも変更したい場所が出てきたら、追記してきますね。