確認画面付き+自動返信付きのお問い合わせフォームを最短手順で作る-MW WP Form

Webサイトを作るときに欠かせないのが「お問い合わせフォーム」です。WordPressでお問い合わせフォームを作るプラグインとして有名なのはContact Form 7です。非常に高機能なので、若干使い方が難しいと感じるかもしれません。ということで今回はやはり日本人の作者の方が作られたフォームプラグインMW WP Formを使って確認画面付き+自動返信付きのお問い合わせフォームを最短手順で作ってみました。

MW WP Formのインストール

MW WP Formをインストールします。

ダッシュボード プラグイン＞新規追加 をクリック

MW WP Form と入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

お問い合わせフォーム：フォーム部分を作成する

お問い合わせフォームのフォーム部分を作成します。

入力項目

入力項目は　name　と　id　という項目を決めておくと楽になるので最初に決めておきます。nameは日本語でOK、idは半角のアルファベットの名称で考えておきます。

name	id
お名前	name
メールアドレス	email
お問い合わせ内容	message

このような感じです。

ダッシュボード MW WP Form＞新規追加 をクリック

固定ページや投稿ページによく似た画面が表示されます。

タイトルにはMW WP Formの一覧で見たときにわかりやすい名前を入れます。そのほか、項目の前に表示する挨拶文なども入れておきます。

項目は

選択してください ▼　をクリックして、

項目の種類を選んで追加していきます。「お名前」は　テキスト で作ります。

フォームタグを追加をクリックすると

入力画面がポップアップされるので先ほど決めておいた

name　に　お名前、id に name を入力してInsertをクリック

このように項目が入ります。見出しが必要なので

こんな感じに「お名前」という見出しを入れました。

メールアドレスは

メールという項目を選んで、フォームタグを追加をクリック

name　に　メールアドレス、id に email を入力してInsertをクリック、

「メールアドレス」という見出しを入力します。

お問い合わせ内容は

テキストエリアという項目を選んで、フォームタグを追加をクリック

name　に　お問い合わせ内容、id に message を入力してInsertをクリック、

「お問い合わせ内容」という見出しを入力します。

確認画面用のボタンを設定する

今回は確認画面付きのフォームを作ろうと思います。MW WP Formでは確認画面の有無をボタンの種類を選ぶことだけで実現することができます！やってみてこれは画期的だなと思いました。

そのためのボタンの設定は以下の通りです。

ボタン項目(input)の中にある、確認・送信を選んで、

フォームタグを追加をクリック

このような画面になります。ボタンに表示する文字は

確認ボタンに表示する文字列「確認画面へ」
送信ボタンに表示する文字列「送信する」

となっています。修正したい場合は入力します。Insertをクリック

このようにショートコードが入りました。

確認画面で内容が間違っていたことに気づいたら入力画面に戻れるように、戻るボタンをつけておきます。

ボタン項目(input)の中にある、戻るを選んで、

フォームタグを追加をクリック

ボタンに表示される文言は「戻る」です。修正したい場合は修正します。　Insertをクリック

全体として、このような指定になりました。

入力のチェック方法を指定する

必須入力などの入力のチェック方法を指定します。

各項目の入力チェックを指定するには最初に、

バリデーションルールを追加をクリックして、

このような入力フォームを表示して、それぞれの指定をしていきます。

お名前　必須入力

name欄に「お名前」と入力し、必須項目にチェックを入れます。

メールアドレス　必須入力＋メールアドレス形式チェック

メールアドレス は必須入力と、メールアドレスの形式チェックをします。

name欄に「メールアドレス」と入力し、必須項目とメールアドレスにチェックを入れます。

お問い合わせ内容 必須入力

name欄に「お問い合わせ内容」と入力し、必須項目にチェックを入れます。

完了画面メッセージ

完了画面に表示するメッセージを入力します。

ここに

このように完了画面で表示する文章を入力します。

メールの設定

お問い合わせをいただいたお客様と管理者にメールを送る設定をします。今回は簡単にどちらにも同じ内容のメールを送るという設定をします。

この欄に指定をしていきます。まず

件名：1日でWordpPress作成講座：お問い合わせ
送信者：空欄のまま
送信元（E-mailアドレス）：空欄のまま

件名だけ入力しました。ここに入力した件名でメールが送られます。

送信者と送信元を空欄のままにしておくと送信者は設定＞一般設定の「サイトのタイトル」、送信元は 設定＞一般設定の「メールアドレス」となります。

送信元を変更しても、管理者に送られるメールのあて先は設定＞一般設定の「メールアドレス」となりますので注意が必要です。

本文 のところには

1日でWordpPress作成講座です。お問い合わせをいただきありがとうございます。

お問い合わせ内容は以下の通りです。

お問い合わせ番号：{tracking_number} 
お名前：{お名前}
メールアドレス：{メールアドレス}
お問い合わせ内容：
{お問い合わせ内容}

--------------------------------------------
1営業日以内にお返事させていただきます。
よろしくお願いします。

email:info@1day-workshop

このように入力しました。{}の中に先ほど入力項目で指定したname欄の名前を入れると、フォームから入力された値が入るようになります。

お問い合わせ番号：{tracking_number}

の{tracking_number} には、お問い合わせがあるたびに自動的に1つずつ増える番号が入ります。お問い合わせを管理する場合に通し番号があった方が便利なので、このようにつけておきました。

自動返信メール という項目は

メールアドレス と入力しました。これは入力項目の中のどの項目宛てにメールを送るかを指定しています。e-mailに相当する項目のnameを指定しますが今回は「メールアドレス」というnameをつけた項目だったのでそのように指定してあります。

これですべての指定が終わったので、

右上にある公開をクリックします。

お問い合わせフォームを表示させるには、

フォーム識別子を使いますので、このコードをコピーしておきます。

固定ページにお問い合わせページを作り、動作を確認する

固定ページにお問い合わせページを作ります。

ダッシュボード 固定ページ＞新規追加 をクリック

タイトルを入力して、先ほどコピーしたフォーム識別子を貼り付けます。

公開 をクリック。

作成したページを表示させると

このように作成したフォームが表示されています。

入力をして　確認画面へ をクリック

確認画面が表示されますので

送信するをクリック

完了画面が表示されました。

メールを確認する

問い合わせ本人に届いたメールを見てみます。

このように、指定した項目が表示されたメールが届いていました。

管理者へ届いたメールを見てみます。

問い合わせ本人のメールと同じメールが届いていました。

注意事項としては、返送先がどちらのメールも「管理者のメールアドレス」となっていますので、管理者がお問い合わせされた方にメールを出す場合は「返信」ではなく、メール中にあるメールアドレス宛に送る必要があるということです。

おまけ：機能はとてもたくさんあります！

今回はたくさんある機能をいかに簡単に「確認付きフォーム＋自動返信＋管理者へメール」を送れるか、という挑戦をしました。

MW WP Formにはこれ以外にもとてもたくさんの機能があり、慣れてきたらいろいろ試してみたいと思います。
たとえばデータ保存できる機能とか、ページのURLがわかる機能とかもあるようです。

MW WP Formに関する公式マニュアルやデモが掲載されている、作者さんのページ

https://2inc.org/manual-mw-wp-form/

こちらも参照してみてください！

作者のモンキーレンチさんは以前このブログでもご紹介させていただいたHabakiriというテーマの作者さんでもあります。

また、最近

こちらの本に付属のテーマも作られたようです！