WordPressお問い合わせプラグイン「WPForms」をCSSで見た目をカスタマイズする方法

こんばんは、皆さんはWordPressのお問い合わせフォームにプラグインを使用していますか?

私はいろいろ迷ったのですが、「WPForms」というプラグインを使っています。(現在はサイトリニューアルしたので、外部のフォームをとりあえず入れてます。)

CONTENTS

WordPressお問い合わせプラグインWPFormsの特徴

WPFormsの特徴なのですが、ドラック&ドロップで画面に従って入力していけば、簡単にお問い合わせフォームを作ることができます。

インストールの仕方は、プラグイン→新規追加→検索欄に「WPForms」と入力して、順を追っていけばインストールできます。

個人のブログ用途なら無料版で十分機能は果たせると思います。

このインストールのくだりの周辺は、検索するとたくさん出てくるので割愛します。

WPFormsの見た目をCSSで変えてみよう!

今回の記事は、WPFormsの見た目のカスタマイズについてです。

WPFormsなのですが、カスタマイズ用のひな形が検索してもあまり見つかりませんでした。

ですが、海外のサイト様にCSSでのカスタマイズ方法が乗っていたのでご紹介いたします。

Fabrizio Van Marciano
How To Customize WPForms In WordPress Using Simple CSS Looking for a simple way to add CSS to your WPForms contact forms? Here's how to do it, complete with CSS snippets for you to use in your own website.

こちらの海外のサイト様にカスタマイズ方法が乗っています。英語なので、簡単にこちらで紹介いたしますね。

WPFormsの見た目CSSでのカスタマイズ方法

まずは、管理画面の左側のバーのところの、WPformsの設定を選択してクリックします。

このような画面が出てきますので、フォームスタイリングを含めるの箇所を「基本スタイリングのみ」を選択します。

そして設定を保存を押して設定を保存します。

それから、すべてのフォームから、作成してあるフォームを選択して、編集をクリックしてください。

すると、

こちらの画面が現れますので、左のバーにある設定をクリックします。

Advancedのタブにある、

フォームのCSSクラスに、「wpforms-container-full」と入力してください。

送信ボタンのCSSクラスに「my-submit-button」と入力してください。

CSSを追記して完成!

あとは、追加CSSなどにCSSを記述すればWPformsの見た目をカスタマイズすることができます。

このブログのカスタマイズは以下の記述にしています。

こちらのCSSは先ほど紹介したこの海外のサイト様がオリジナルです。参考にさせていただきありがとうございます。

このサイト様には、ほかにもCSSデザインのパターンがありますので、参考にするといいと思いますー。

Fabrizio Van Marciano
How To Customize WPForms In WordPress Using Simple CSS Looking for a simple way to add CSS to your WPForms contact forms? Here's how to do it, complete with CSS snippets for you to use in your own website.
/* WPFORMS CSS - MODERN STYLE
----------------------------*/
div.wpforms-container-full .wpforms-form input[type=date],
div.wpforms-container-full .wpforms-form input[type=datetime],
div.wpforms-container-full .wpforms-form input[type=datetime-local],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=month],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=password],
div.wpforms-container-full .wpforms-form input[type=range],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=time],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=week],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
     background: #E8E8E8;
     padding: 12px !important;
     border: none;
     border-radius: 3px;     
}
div.wpforms-container-full .wpforms-form .wpforms-field-label {
     font-size: 15px;
     word-spacing: 2px;
}
.my-submit-button {
      background: red;
      font-size: 16px !important;
      font-weight: bold;
      color: #fff !important;
      border: none !important;
      border-radius: 5px !important;
      margin-top: 5px !important;
      padding: 15px !important;
      text-transform: capitalize !important;
      letter-spacing: 1px !important;
}
.my-submit-button:hover {
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57) !important;
      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57) !important;
      box-shadow: 5px 40px -10px rgba(0,0,0,0.57) !important;
      transition: 0.3s !important;
}
できあがり

これでWPformsの外観カスタマイズができましたね。

WPFormsは、とても導入が簡単なプラグインなので、参考にしてみてくださいね。

それでは。

よかったらシェアしてね!

当ブログ使用サーバー

PROFILE

hiroのアバター hiro ただの主婦

4歳の女の子を育てながら日記を書いています。おだやかにくらしたい。

RANKING

応援が励みになりますm(__)m

CONTENTS
閉じる