【WordPress】MW WP Formを使用したお問い合わせフォームの作成 | DXシステム開発・WEB制作 SmileVision|大阪のWEBシステム開発 SmileVision

社員ブログ 【WordPress】MW WP Formを使用したお問い合わせフォームの作成
mw_wp_form

ども、こんにちは!開発部のいろはです。
今回は私が重宝しているWordPressのプラグイン
MW WP Form」の使い方を解説します

目次

1.MW WP Fromとは?

MW WP FormはWordPressにお問い合わせフォームの機能を追加するプラグインです。
シンプルなショートコードを記述してフォームを作成することができます。
また企業サイトなどで採用されやすい確認画面のサポートや、
MW WP Formの機能を拡張する追加アドオンなどがあるのが特徴です!

2.MW WP Fromのダウンロード

公式サイトからMW WP Formをダウンロードしてインストール・有効化します。
img1

あわせて読みたい
【WordPress】プラグインの使い方(インストール・有効化・停止・削除)【2024年最新】2024年1月現在WordPressには約59,500件ものプラグインがあり、最も人気なCMSの一つとなっております。 プラグインとは...

3.MW WP Fromeの使い方

3-1.フォームの作成

プラグインをインストールするとMW WP Formの項目がメニューが追加されますので、
その中の新規追加を選択します。
img2
タイトルに判断しやすい名前をつけた後、フォーム入力画面の編集を行います。
メディアを追加の下にある「選択してください」をクリックして、追加する項目の形式を選択します。
(今回はメールアドレスの入力欄を例に作成してみたいと思います。)
形式を選択後「フォームタグを追加」をクリックし、入力項目の編集画面を開きます。
項目内容を編集して「Insert」ボタンをクリックで追加します。
img3
もう少し下記のような入力項目を増やしてフォームっぽく作ってみましょう・・・

入力項目 フォームタグの種類
お名前  テキスト(入力項目)
メールアドレス  メール(入力項目)
お問い合わせ内容  テキストエリア(入力項目)
確認ボタン/送信ボタン  確認・送信(ボタン項目)

こんな感じになりました!
フォームタグだけでは何の項目かわからないので、名称を付けます。
img4
必須項目の設定を行う場合はバリデーションルールを追加を行い、
各入力項目のname属性を入力して必須項目にチェックをします。
画像はお名前入力欄に必須項目を付与してみました!
img5
フォーム確認画面や完了画面のURLを変更したい時は「URL設定」が便利です。
入力画面・確認画面・完了画面・エラー画面ごとにURLを変更することができます。(固定ページに遷移させることも可能)
img6
「完了メッセージ」より完了画面を変更することができます。
img7

固定ページに遷移させる場合は、入力画面・確認画面・完了画面・エラー画面の全てにMW WP Formのショートコードを記載します。(記載がなければフォームを送信後、入力画面に戻らず完了画面にリダイレクトしてしまいます)

3-2.メールの設定

内容送信後に自動返信メールの設定と管理者あてに届く通知メールの設定を行います。

自動返信メール(お客様が受信するメール)の設定方法

画面右の自動返信メール設定の項目を編集します。
img8

編集項目 詳細
件名 受信されるメールの件名を記入します。
送信者 送信者の名前や企業名などを記入します。
送信元(E-mailアドレス) 送信元のメールアドレスを記入します。
本文 問い合せ内容が無事に送信されたことや連絡先などの著名欄、
今後の対応などを記入します。
自動返信メール メールの項目に利用したname属性の値を記入してください。
この入力がなければ自動返信が届かなくなります。{}記号は不要です。

画像の本文にある{name}や{contents}は
フォームの入力内容を呼び出すことができます。
フォームタグ[name=”◯◯”]の◯◯の部分を
自動返信メールの本文にコピー&ペーストします。
img9
通知メール(管理者へ届くメール)の設定
自動返信メールの下にある「管理者宛のメール設定」で、
問い合せがあった時に管理者へ自動通知するメールの設定を行います。

編集項目 詳細
送信先(E-mailアドレス) 問い合せ内容を通知するE-mailアドレスを記入します。
件名  メールの件名を記入します。
「お問合わせ通知」など記入すると確認しやすいです。
送信者 {name}でフォームに入力された名前が反映されます。
未記入の場合はWordPressのサイト名が指定されます。※1
送信元(E-mailアドレス) {mail} でフォームに入力されたメールアドレスが反映されます。
未記入の場合はWordPressに登録した時のアドレスが指定されます。※1
本文  {contents}でフォームに入力された本文が反映されます。※1

※1…各項目に利用したname属性の値を記入してください。
内容の入力後は画面右の公開を押して保存します。

3-3.固定ページを作成し、フォームを公開する

MW WP Formの一覧画面などより
作成したフォーム識別子のショートコードをコピーします。
img11
固定ページを新規作成し、フォーム識別子のショートコードをペーストします。
MW WP Formで入力画面のURLを指定している場合、パーマリンクは統一してください。
img12
公開して下記のように表示されればOKです!
img13

4.便利な追加アドオン

MW WP Formには便利な拡張機能がございますので、合わせてご紹介いたします!

画像認証を追加する「MW WP Form CAPTCHA」

MW WP Form CAPTCHAはフォーム送信時に画像認証を行うアドオンです。
img14
詳細はこちら

GUIでフォームを作成する「MW WP Form Generator」

MW WP Form GeneratorをインストールすればGUIでフォーム作成することが出来ます。
HTMLが苦手な方でも簡単にフォーム作成できます。
img15
詳細はこちら

5.Contact Form 7(2018/09/13追加)

あわせて読みたい
contact_form_7
【WordPress】Contact Form 7を使ったお問い合わせフォームの作成こんにちは!開発部のいろはです。 今回はWordPressのプラグイン「Contact Form 7」を使用した お問い合わせフォー...

Contact Form 7はMW WP Formと同じフォームを作成するプラグインです。
こちらの記事で使い方をご紹介しておりますので、合わせてご覧ください!

6.〆

MW WP Formを使用してお問合わせフォームの作成方法について解説いたしました。
確認画面があるだけではなく、入力データの保存や値の自動編集機能など
機能が非常に魅力的なので是非使っていたいただきたいプラグインです!
それでは、お疲れ様でしたノシ

ABOUT ME
いろは
いろは
2017年入社 開発部所属のいろはと申します! 当ブログではWordPressなどWEBに関するアイデアや応用例をを中心に発信して参ります。