こんばんは、皆さんはWordPressのお問い合わせフォームにプラグインを使用していますか？
私はいろいろ迷ったのですが、「WPForms」というプラグインを使っています。（現在はサイトリニューアルしたので、外部のフォームをとりあえず入れてます。）
WordPressお問い合わせプラグインWPFormsの特徴
WPFormsの特徴なのですが、ドラック＆ドロップで画面に従って入力していけば、簡単にお問い合わせフォームを作ることができます。
インストールの仕方は、プラグイン→新規追加→検索欄に「WPForms」と入力して、順を追っていけばインストールできます。
個人のブログ用途なら無料版で十分機能は果たせると思います。
このインストールのくだりの周辺は、検索するとたくさん出てくるので割愛します。
WPFormsの見た目をCSSで変えてみよう！
今回の記事は、WPFormsの見た目のカスタマイズについてです。
WPFormsなのですが、カスタマイズ用のひな形が検索してもあまり見つかりませんでした。
ですが、海外のサイト様にCSSでのカスタマイズ方法が乗っていたのでご紹介いたします。
こちらの海外のサイト様にカスタマイズ方法が乗っています。英語なので、簡単にこちらで紹介いたしますね。
WPFormsの見た目CSSでのカスタマイズ方法
まずは、管理画面の左側のバーのところの、WPformsの設定を選択してクリックします。
このような画面が出てきますので、フォームスタイリングを含めるの箇所を「基本スタイリングのみ」を選択します。
そして設定を保存を押して設定を保存します。
それから、すべてのフォームから、作成してあるフォームを選択して、編集をクリックしてください。
すると、
こちらの画面が現れますので、左のバーにある設定をクリックします。
Advancedのタブにある、
フォームのCSSクラスに、「wpforms-container-full」と入力してください。
送信ボタンのCSSクラスに「my-submit-button」と入力してください。
CSSを追記して完成！
あとは、追加CSSなどにCSSを記述すればWPformsの見た目をカスタマイズすることができます。
このブログのカスタマイズは以下の記述にしています。
こちらのCSSは先ほど紹介したこの海外のサイト様がオリジナルです。参考にさせていただきありがとうございます。
このサイト様には、ほかにもCSSデザインのパターンがありますので、参考にするといいと思いますー。
/* 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は、とても導入が簡単なプラグインなので、参考にしてみてくださいね。
それでは。
