MW WP Formの設定・使い方・スパム対策・CSSカスタマイズを解説

WordPress

2022.02.05 2022.02.05

MW WP Formは、かんたんにフォームが設置できるWordPressのプラグインです。
設定の多さやバリデーションルールの豊富さでは、同じくWordPressのフォーム設置プラグインであるContact Form 7に勝ります。

MW WP Formの使い勝手や、設定はやや難しい面がありますが、使いこなせば自由にフォームを設置できます。

『MW WP Formはどうやって設定するの？』
『MW WP Formの使い方は？』
『MW WP Formで便利なプラグインはあるの？』

上記のような疑問に、今回のコラム記事ではしっかりと答えます。
MW WP Formの設定や使い方、フォームの設置方法、プラグインなどについてわかりやすく解説します。

1. MW WP Formとは
2. MW WP Formの特徴
3. MW WP Formの使い方
4. MW WP Formで追加したいプラグイン
5. MW WP FormのCSSをカスタマイズする方法
6. まとめ

MW WP Formとは

MW WP Formは、かんたんな操作で確認画面つきフォームが設置できる、WordPressのプラグインです。
世界中で10万以上インストールされる人気を誇ります。

MW WP Formは、ショートコードを利用してフォームを設置する仕組みです。
MW WP Formには以下のような機能があります。

豊富なバリデーションルール
HTMLとCSSで自由にデザインできる
問い合わせデータを保存
問い合わせデータをCSV形式でエクスポート
問い合わせデータをグラフで表示
CAPTCHAを設置するプラグインと連携してスパムを防止

MW WP Formの特徴

WordPressのフォーム設置プラグインのなかで、Contact Form 7は有名です。
しかし、MW WP FormはContact Form 7にはない特徴がいろいろとあります。

たとえば、確認画面がデフォルトでついていることは、Contact Form 7にはない特徴です。
Contact Form 7では確認画面を実装するのに、プラグインを追加する必要があります。

MW WP Formの特徴をよく理解し、適切に使用することで、かんたんにフォームの設置が可能です。

確認画面を搭載

フォーム設置によく利用されるプラグインのContact Form 7では、確認画面がついていません。
しかし、MW WP Formはデフォルトで確認画面の機能があります。

フォームの確認画面は入力データのミス防止や、画面遷移がほしい場面で重宝します。

MW WP Formは「入力画面→確認画面→完了画面」のほかに「入力画面→完了画面」といった遷移も可能です。
CSSを設定することで、メールアドレスの再入力を確認画面で非表示にすることもできます。

フォームに確認画面が必要なら、MW WP Formが適しているでしょう。

データ分析が可能

MW WP Formは、フォームから問い合わせがあったデータを保存し、グラフとして表示する機能があります。

一般的なフォームの場合、送信された問い合わせは、すべてメールで届けられます。
しかし、MW WP Formでは、フォームから送信された問い合わせ内容は、すべてデータベースに保存されます。

問い合わせのあった商品や個数ごとにグラフ化することで、データを可視化して分析できます。
グラフは、円グラフと棒グラフの2種類から出力可能です。

グラフを作成する項目は、フォーム内容によって追加できます。

CSV出力できる

MW WP Formは、問い合わせをデータベースに保存し、その内容をCSVでエクスポートできます。

CSVファイルは互換性が高く、ExcelやGoogleスプレッドシートのほかにメモ帳、テキストエディタでも編集可能です。

たとえば、フォームから問い合わせられたデータをCSVでエクスポートし、Googleスプレッドシートに取り込んで資料にできます。

ほかにも、マーケティングツールや自動化ツールなど、さまざまなツールで取り込んで利用できます。

記事情報を引き継げる

MW WP Formでは、閲覧していた記事の情報をフォームに引き継ぐことができます。

記事からフォームに遷移したときに、さまざまな引数を利用できます。

たとえば、記事タイトルやURLを引き継いで隠しフォームで送信すれば、どのWebページから問い合わせが発生したのかがわかります。

ただし、記事情報の引き継ぎにはテンプレートタグやHTMLの知識が必要です。

記事情報の引き継ぎは、使いこなせればかなり便利な機能です。

MW WP Formの使い方

MW WP Formの使い方について、わかりやすく解説します。

インストール

MW WP Formのインストールは、WordPressの管理画面から以下の手順でおこないましょう。

「プラグイン」→「新規追加」を開く
検索窓に「MW WP Form」を入力して検索
MW WP Formが表示されるので「今すぐインストール」をクリック
インストールが終わったら「有効化」をクリックして有効化する

フォーム作成

MW WP Formを利用するには、フォームを作成することが必要です。
フォームの作成は管理画面から「MW WP Form」→「新規追加」でおこないましょう。

次に、タイトルを入力します。
ほかのフォームと区別のつくタイトルにしましょう。

タイトル下にある本文に「フォームタグを追加」を利用して、ショートコードやHTMLを入力してフォームを作成します。
直接HTMLを入力することもできますが「フォームタグを追加」を使うことで、初心者でもかんたんにタグを追加できます。

ここでは、例として「名前」「メールアドレス」「問い合わせ内容」を追加してみます。
まず、名前を追加するために「テキスト」を選択して「フォームタグを追加」をクリックします。

フォームタグの設定画面が出てくるので「name」に項目の名前を入力しましょう。
今回は「名前」を入力しました。

それ以外の部分については、空白でもかまいません。
最後に「Insert」をクリックして、フォームタグを追加します。

上記のように、本文にフォームタグが追加されます。

同じように、メールアドレスは「メールアドレス」、問い合わせ内容は「テキストエリア」で追加しましょう。

最後に、ショートコードの左側に表示する項目名を入力しましょう。

これでフォームが完成しました。
しかし、このままではお名前やメールといった必須項目が、空白のまま送信されてしまいます。

そこで、バリデーションルールを設定しましょう。

バリデーションルール

バリデーションルールとは、入力制限や入力チェックのことです。
必須項目にしたり、半角英数字のみ入力可能にできます。

バリデーションルールは、フォーム編集画面の最下部で設定可能です。

先ほど作ったフォームを例に、名前を必須項目に設定してみます。
「バリデーションルールを追加」をクリックすると、上記の画面が表示されます。

「バリデーションを適用する項目」は、先ほど「フォームタグを追加」で「name」に設定した値です。
今回の場合は「名前」を入力しました。

必須項目にしたいので「必須項目」にチェックを入れて設定完了です。

バリデーションルールを閉じたいときは「▼」をクリックします。
たとえば、メールを設定するなら「必須項目」「メールアドレス」にチェックを入れるとよいでしょう。

確認画面

確認画面の設定は非常にかんたんです。

フォーム編集画面の「フォームタグを追加」から「確認・送信」を選択して追加しましょう。

自動的に確認画面が追加され、確認ボタンと送信ボタンを切り替えてくれます。
確認画面で戻れるように「戻るボタン」も追加しておくとよいでしょう。

サンクスページ

サンクスページ（完了画面メッセージ）は、フォーム編集画面の下で編集できます。
任意の文章や、サンクスメッセージを入力しましょう。

URL設定

フォーム編集画面では、それぞれの画面のURLを設定できます。
設定しなければ、同じURLで遷移することになります。

URLを編集するには、フォーム編集画面から下にスクロールしたところです。
設定したいURLを入力しましょう。

自動返信メール

自動返信メールを設定しておくと、問い合わせがあったときに自動でユーザーにメールが返信されます。

自動返信メールを設定する場合は、フォーム編集画面にある「フォームタグを追加」から「メール」を必ず設定しましょう。

自動返信メールの設定は、フォーム編集画面の右側にあります。
基本的には「件名」「送信者」「本文」を入力すればよいでしょう。

なお、本文には「name」で設定した項目を入力することで、自動的に項目が入力されます。
「name」で「メール」と設定した項目は、本文で{メール}として入力することで、入力されたメールアドレスが表示されます。

ソースコードとしては以下になります。

お客様の名前：{名前}様
メールアドレス：{メール}
問い合わせ内容：{問い合わせ内容}

管理者への通知メール

管理者への通知メールは「管理者宛メール設定」で設定できます。

「管理者宛メール設定」はフォーム編集画面の右側にあります。

「送信先（E-mailアドレス）」「件名」「本文」を設定しましょう。
それ以外の項目は空白でもかまいませんが、必要があれば入力しましょう。

自動返信メール設定と同じく、{}でくくった項目が自動で入力されます。
お客様のメールアドレスや名前、問い合わせ内容の表示に利用しましょう。

フォームの設置と公開

フォームはショートコードを利用して設置します。

フォーム編集画面の右側にある「フォーム識別子」に表示されているショートコードをコピーします。

コピーしたショートコードを、任意の固定ページにペーストしてください。

ショートコードをペーストした固定ページを公開したら、フォームの表示や動作をチェックしましょう。

MW WP Formで追加したいプラグイン

MW WP Formでぜひ追加しておきたいプラグインを解説していきます。

スパム防止「ReCAPTCHA for MW WP Form」

「ReCAPTCHA for MW WP Form」は、MW WP FormにreCAPTCHAを設定するプラグインです。

reCAPTCHA（リキャプチャ）は、フォームに対するスパムを防ぐためのサービスです。

フォームに登録するときに「私はロボットではありません」というチェックボックスを使ったことがある人も多いでしょう。
あれもreCAPTCHAの機能の1つです。

ReCAPTCHA for MW WP Formは、かんたんにMW WP FormにreCAPTCHAの機能を追加できます。
スパムを防止して、快適にフォームを利用しましょう。

住所の自動入力「zipaddr-jp」

郵便番号を入力すると、住所が自動的に入力される機能は非常に便利です。
MW WP Formで住所の自動入力機能を実現するのが「zipaddr-jp」です。

zipaddr-jpは、MW WP Form専用のプラグインではありませんので、使い方はやや難しいかもしれません。

zipaddr-jpをインストールしたあと、MW WP Formの各入力欄にIDを指定することで、住所の自動入力が可能となります。

MW WP Formのみならず、Contact Form 7でも利用できるプラグインです。

MW WP FormのCSSをカスタマイズする方法

MW WP FormでCSSを使って、フォームをカスタマイズする方法について解説します。

編集したい箇所をChromeのデベロッパーツールで特定

Google Chromeのデベロッパーツールを使って、CSSのカスタマイズ方法を解説していきます。

まず、カスタマイズしたい要素の上で右クリックして「検証」を開きます。

検証でデベロッパーツールを開き、カーソルを当てていた部分のclassやidを表示させましょう。

今回の場合は、h1タグの部分をカスタマイズしますが、それ以外の部分でもカスタマイズ可能です。

テキスト項目やテキストエリア、送信ボタンにidやclassを割り当てる場合、MW WP Formの設定でおこないましょう。

classやidをWordPressで編集

WordPressでは、テーマエディタからCSSを追加できます。

WordPressの管理画面から「外観」→「テーマエディタ」を開き、スタイルシート（style.css）を編集しましょう。

スタイルシートを開いたら、追加のCSSを書いていきましょう。

注意！

親テーマでスタイルシートを編集した場合、テーマのアップデートでファイルが上書きされ、編集したCSSが失われてしまう可能性があります。
子テーマでスタイルシートの編集をしましょう。

変更ができない場合は「!important」

WordPressでスタイルシートを編集していると、変更が反映されないことがあります。
変更が反映されない場合は、以下のポイントをチェックしましょう。

ブラウザキャッシュのクリア
キャッシュ系プラグインのキャッシュクリア
書いたCSSの記述ミス

ほかの記述がWordPressによって優先されている場合は「!important」を利用して優先順位を変更しましょう。

まとめ

WordPressのプラグイン「MW WP Form」を解説しました。

MW WP Formは、かんたんな操作でフォームをWordPressで作成したWebサイトに追加できるプラグインです。

Contact Form 7とはことなり、MW WP Formは確認画面つきのフォームが設置できることが特徴です。
そのほかにも「バリデーションルールが豊富」「HTMLとCSSで自由にデザイン」「問い合わせデータを保存」「データをグラフ化できる」といった特徴があります。

MW WP Formは設定が多く、初心者にはやや難しい面があるかもしれません。
しかし、使いこなせれば自由に多機能なフォームを設置できます。

くわえて、問い合わせデータを保存し、CSV形式でエクスポートすることも可能です。
そのため、データの分析やほかのツールでの利用も考えられます。

MW WP Formを賢く利用して、最適なフォームを作成しましょう。