Web

プラグインMW WP Formで問合せフォームを作る – はじめてのWordPress

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
プラグインMW WP Formで問合せフォームを作る – はじめてのWordPress

WordPressでは、自動返信メール送信なども含めたフォーム機能の一式を、簡単に作ることができるプラグインがあります。

おすすめは以下の2つです。

  • Contact Form 7
  • MW WP Form

今回はその中から「MW WP Form」の基本的な使い方を説明します。

「MW WP Form」は「Contact Form 7」よりさらに高機能のフォームを作ることができ、しかも操作が簡単な優れ物でおすすめです。

プラグインのインストール時に障害が発生する場合があるため、新規にプラグインをインストールする前には、必ずバックアップを取っておきましょう。

以前の記事「バックアップ用プラグインUpdraftPlusを使おう」を参考にしてください。

MW WP Formの特徴

MW WP Formでは入力ページ以外にも

  • 確認ページ
  • エラーページ
  • 完了ページ

を個別URLで作成できる機能が標準でついており、専門知識がなくても簡単に作ることができるのが、特徴の一つです。

確認ページでは、入力ページに戻るボタンをつけることもできます。

WordPressプラグインMW WP Form 確認画面キャプチャ

MW WP Form確認画面 戻るボタン・送信するボタンの例

間違えて入力した際に修正ができるので、お客様にも安心してご利用いただけます。

もう一つの特徴は、フォームタグを簡単に入力できる「フォームタグジェネレーター」機能です。

フォームタグとは、フォームを作成するために必要なHTMLコードを自動的に書き出してくれるコードです。

「フォームタグジェネレーター」を使えば、初心者でもテキスト入力やチェックボックスなど様々な形式を使ったフォームが簡単に作れます。

WordPressプラグインMW WP Formフォームジェネレーター

MW WP Formフォームジェネレーター

「選択してください」をクリックすると、タグのメニューが一覧表示されます。

ここから挿入したいタグを選び、「フォームタグを追加」ボタンをクリックすればタグが本文エリアに挿入されます。

WordPressプラグインMW WP Formフォームジェネレータータグ一覧

MW WP Formフォームジェネレータータグ一覧

WordPressプラグインMW WP Formフォームタグ挿入例

MW WP Formフォームタグ挿入例

MW WP Form基本的な使い方

名前とメールアドレス、メールアドレス確認、お問合せ内容からなるフォームを例に説明します。

各項目は必須項目とし、メールアドレスは誤入力を防ぐため確認できるようにします。

1.プラグインをインストール

一般的なプラグインのインストール方法で行います。

  1. WordPressのダッシュボードからプラグイン>新規追加に進みます。
  2. 検索窓にMW WP Formと入力
  3. 検索結果からMW WP Formの「いますぐイントール」ボタンをクリックします。
WordPressプラグインMW WP Formインストール手順

MW WP Formインストール手順

  1. インストールが完了したら、有効化ボタンをクリックします。
WordPressプラグインMW WP Formインストール有効化

MW WP Formインストール有効化

  1. 左メニューに「MW WP Form」が追加されます。
WordPressプラグインMW WP Formメニュー追加

MW WP Formメニュー追加

2.新規フォームを作る

左メニューから「MW WP Form」>「新規追加」をクリック、フォームを追加画面が開きます。

WordPressプラグインMW WP Formフォーム新規追加

MW WP Formフォーム新規追加画面

この画面では

  • タイトル
  • フォームタグ設定
  • 完了画面のメッセージ設定
  • バリデーション(入力規則)の設定
  • URL設定(入力画面・確認画面・完了画面・エラー画面)
  • 自動返信メールの設定

を行います。完成したら公開ボタンをクリックして保存しましょう。

では、順にみていきましょう。

2-1.タイトルを付ける

タイトル欄に入力します。

同一サイト内に複数のフォームを作成するなら、他のフォームと区別ができるようタイトルを付けましょう。

WordPressプラグインMW WP Formフォームタイトル入力

MW WP Formフォームタイトル入力

2-2.フォームタグ設定

本文エリアには、予め項目名を入力しておきます。

WordPressプラグインMW WP Formフォーム本文項目入力

MW WP Formフォーム本文項目入力

「お名前」の下にカーソルを置き、

WordPressプラグインMW WP Formフォーム本文タグ追加位置

MW WP Formフォーム本文タグ追加位置

フォームタグジェネレーターから「テキスト」を選択、「フォームタグを追加」ボタンをクリックします。

WordPressプラグインMW WP Formテキストフォームタグ入力の例

MW WP Formテキストフォームタグ入力の例

フォームの詳細設定画面が開きます。

ここでは「name」欄にフォームタグの名前を入力します。
日本語でも半角英数字でも構いません。

「placeholder」欄に入力したテキストは、入力規則のガイドになるテキストです。

実際のお問い合わせページでは、その入力欄に薄い文字色で表示されます。

WordPressプラグインMW WP Formテキストフォームタグ詳細設定

MW WP Formテキストフォームタグ詳細設定の例

「insert」ボタンをクリックすると、本文に挿入されます。

WordPressプラグインMW WP Formテキストフォームタグ挿入結果

MW WP Formテキストフォームタグ挿入結果の例

同様にして他の項目もフォームタグを挿入していきましょう。

各項目で利用したフォームタグの種類と「name」は以下のとおりです。

項目名 フォームタグ種類 name
お名前 テキスト お名前
メールアドレス メール メール
メールアドレス確認 メール メール確認
お問い合わせ内容 テキストエリア 問い合わせ内容

最後に、送信ボタンを挿入します。

確認画面で間違って入力した箇所が見つかったら変更できるよう、入力画面に「戻る」ボタンも挿入します。

フォームタグジェネレーターから「戻る」を選択、「フォームタグを追加」ボタンをクリックします。

続いてフォームタグジェネレーターから「確認・送信」を選択、「フォームタグを追加」ボタンをクリックします。

WordPressプラグインMW WP Formフォーム戻る、確認・送信ボタン挿入

MW WP Formフォーム戻る、確認・送信ボタン挿入の例

このようにフォームタグが挿入されました。

WordPressプラグインMW WP Formフォームタグ挿入本文完成

MW WP Formフォームタグ挿入本文完成の例

2-3.完了画面のメッセージ設定

送信が完了した際に表示されるメッセージを設定します。

内容は

  • お問い合わせやお申込みをいただいたことへのお礼
  • 受付完了メールを送信したこと
  • 今後の対応について(担当より連絡するなど)
  • 受付完了メールが届かない場合の対処について

など、お客様の不安を解消できる事柄を記載しましょう。

WordPressプラグインMW WP Formフォーム完了画面メッセージ設定

MW WP Formフォーム完了画面メッセージ設定

2-4.入力画面・確認画面・完了画面・エラー画面のページ作成とURL設定

固定ページで入力画面・確認画面・完了画面・エラー画面の各ページを作ります。

入力画面ページを親ページとして、その他のページはその子ページにします。

ここでは例として、各ページのタイトルとURLを下図のように設定しました。

WordPressプラグインMW WP Formフォーム固定ページ一覧

MW WP Formフォーム固定ページ一覧

各ページの編集画面では本文エリアにブロックタイプ「ショートコード」で、フォーム識別子をコピー&ペーストし「公開」します。

WordPressプラグインMW WP Formフォーム識別子

MW WP Formフォーム識別子の例

WordPressプラグインMW WP Formフォーム識別子挿入

MW WP Formフォーム識別子挿入の例

フォーム設定画面の「URL設定」欄に作成した固定ページのURLを指定します。

WordPressプラグインMW WP Form URL設定

MW WP Form URL設定の例

2-5.バリデーションルール(入力規則)の設定

各項目を必須項目にし、メールアドレス確認では前に入力したメールアドレスと一致するかを確認できるようにします。

バリデーション欄の「バリデーションを追加する」ボタンをクリックします。

表示された詳細設定画面の「バリデーションを適用する項目」には、フォームタグの「name」で指定したテキストを入力します。

WordPressプラグインMW WP Formフォームタグname値

MW WP Formフォームタグname値の例

必須項目にチェックをします。

WordPressプラグインMW WP Form バリデーションルール設定

MW WP Form バリデーションルール設定の例

メールアドレスでは、メールアドレス欄にチェックを入れます。

これによりメールアドレス形式ではないテキストを入力すると、「メールアドレスの形式ではありません。」と警告が表示されます。

WordPressプラグインMW WP Form バリデーションルール設定

MW WP Form バリデーションルール設定の例

メールアドレス確認では、一致する項目に「メール」と入れます。

WordPressプラグインMW WP Form バリデーションルール設定

MW WP Form バリデーションルール設定の例

バリデーションで指定したとおり入力されないと、下図のようにエラー画面に警告が表示されます。

WordPressプラグインMW WP Form エラー画面キャプチャ

MW WP Form エラー画面キャプチャ

2-6.お客様宛て自動返信メールの設定

お客様宛ての自動返信メール設定は、フォーム編集画面の右側にある「自動返信メール設定」で行います。

WordPressプラグインMW WP Form 自動返信メール設定

MW WP Form 自動返信メール設定

必要な入力項目は以下のとおりです。

件名 メールの件名
(例:お問い合わせありがとうございます)
送信者 メールの送信者
(会社名やサイト名など)
Reply-to(メールアドレス) 自動送信メールから返信する際の宛先。送信元に設定したメールアドレス以外で受け取りたい場合に記入する。
本文 自動返信メールの本文
自動返信メール お客様のメールアドレス。
入力画面のメール項目に設定したフォームタグの「name」値を入力するとそのデータが適用される。
送信元(E-mailアドレス) 管理者宛メールの送信元アドレス。未入力の場合はシステムのアドレスが適用される。

本文ではフォームタグで設定した各項目の「name」値を指定すると、そのデータが自動的に挿入されます。

「name」値は{お名前}のように{ }で囲みます。

自動返信メールはお客様へお問い合わせを受け取ったこと、今後の連絡についてなどを知らせる大切なメールです。

挨拶文や担当者の名前、緊急の連絡先など状況に応じた内容を設定しましょう。

【本文欄の入力例】
—————————————-
{お名前}様
この度はお問い合わせありがとうございました。
以下の内容で受け付けいたしました。
後ほど担当者よりご連絡いたします。<お問い合わせ内容>
お名前:{お名前}様
E-Mail:{メール}
お問い合わせ内容:{問い合わせ内容}〇〇株式会社
担当 営業部 ×××××
——————————————–

2-7.管理者宛て自動返信メールの設定

管理者宛てのメールは「管理者メール設定」で行います。

WordPressプラグインMW WP Form 管理者宛てメール設定

MW WP Form 管理者宛てメール設定

必要な入力項目は以下のとおりです。

送信先(E-mailアドレス) 通知メールを受信するアドレス
CC(E-mailアドレス) CCのメールアドレス
BCC(E-mailアドレス) BCCのメールアドレス
件名 管理者宛メールの件名
(例:お問い合わせ受付)
送信者 管理者宛メールの送信者名。
(例:サイト名、会社名など判別しやすい名前)
Reply-to(メールアドレス) 管理者宛メールに返信する際の、返信先アドレス。空欄のままでOK
本文 管理者宛メールメールの本文
Return-Path(メールアドレス) メールが正常に送信できなかった場合に、送信するアドレス。空欄のままでOK
送信元(E-mailアドレス) 管理者宛メールの送信元アドレス。未入力の場合はシステムのアドレスが適用される。

お客様のお名前、メールアドレス、お問い合わせ内容など情報を確実に受け取るためにも、間違いが無いよう設定しましょう。

【本文欄の入力例】
—————————————-
{お名前}様 よりお問い合わせがありました。
E-Mail:{メール}
お問い合わせ内容:{問い合わせ内容}
—————————————-

これで完成しました。

2-8.テスト送信をしてみよう

固定ページで作ったお問い合わせページを表示してみましょう。

このようなページが出来上がりました。(デザインは利用するテーマや設定により異なります)

WordPressプラグインMW WP Form 入力画面キャプチャ

MW WP Form 入力画面キャプチャ

実際に入力し送信してみましょう。

確認画面から完了画面へ遷移するか、エラーが表示されるか、自動返信メールが送受信されるかなど、動作確認を必ず行いましょう。

まとめ

ビジネスブログや会社のウェブサイトには、お問い合わせや申込みページなどを作って、成果に結びつけましょう。

MW WP Formではフォームタグジェネレーターを使って、ここで紹介した以外にも、ラジオボタンやセレクトボックスなども簡単に設定できます。

いろいろ工夫してビジネスにあったフォーム作成を目指してください。