サイトの引越しサービス
BLOG
ブログ
WordPress

WordPressで確認画面付きメールフォームを簡単に作成する方法

WordPressのメールフォームと言えば、Contact Form 7が最も有名ですが、確認画面が表示されません。 （※Contact Form 7 add confirmというプラグインを使えば、Contact Form 7で確認画面が使ますが、3年以上更新されておらず、つい最近使えなくなりました。）

では、WordPressで確認画面付きメールフォームはどれを使うのが良いかと言うと、MW WP Formをおすすめします。MW WP Formには確認画面の機能が標準装備されているので、法人サイトの向けのメールフォームに最適です。

ということで今回は、MW WP Formで確認画面付きメールフォームを簡単に作成する方法をご紹介します。実際に私がよく使うサンプルを掲載するので、そのサンプルをコピペすれば10分ぐらいで完成するので、是非お試しください。

今回は以下のようなシンプルなメールフォームを作成します。

002

目次

1.MW WP Formのインストール

左メニューのプラグインより「新規追加」をクリックします。
開いた画面のキーワード欄に「MW WP Form」と入力してください。

検索結果にMW WP Formのプラグインが表示されます。「今すぐインストール」ボタンを押し、インストールを開始します。最後にプラグインを有効化してください。

001

2.MW WP Formの項目を入力

プラグインを有効化すると、左メニューにMW WP Formが追加されています。
「新規追加」をクリックしてください。

002

「フォームを追加」の画面が表示されます。
ちなみに今回入力する項目は、画面で表示されている赤枠①～⑤の部分です。
入力する欄は多いですが、後ほどお見せするサンプルをコピペすれば、それほど手間がかかりません。

002

それでは、法人サイトでよくあるメールフォームを作っていきます。

①本文の入力

以下のコードを①に貼り付けてください。


お名前 ※
[mwform_text name="お名前" size="60"]

メールアドレス ※
[mwform_text name="メールアドレス" size="60"]

お問い合わせ内容 ※
[mwform_textarea name="お問い合わせ内容" cols="50" rows="5"]

[mwform_backButton value="修正する" class="btn back"][mwform_submitButton name="submit" class="btn send" confirm_value="入力内容を確認する" submit_value="送信する"]

【補足】項目の追加

メールフォームに項目を追加する場合は、以下の方法で追加してください。

「メディアを追加」の下の「選択してください」の項目を選択します。

002

次に「フォームタグを追加」をクリックします。

002

すると以下のような別窓が開きます。

ここではname:お名前、size:60と入力し、最後に「Insert」をクリックします。

002

本文には、下記のように表示されます。 002

②完了画面メッセージの入力

以下の内容を②に貼り付けます。

お問い合わせいただきありがとうございます。
ご入力いただいたメールアドレスに自動送信メールをお送り致しました。

※完了画面を別のURLにする場合は、「URL設定」を使います。
詳しくはMW WP FormのURL設定をご覧ください。

③バリデーションルールの入力

入力項目は「バリデーションルール」となっていますが、フォームの必須入力項目のことです。

ここでは「お名前」と「メールアドレス」にバリデーションルールを設定します。
「お名前」は以下のように設定してください。

002

「メールアドレス」は以下のように設定してください。

002

④自動返信メール設定

以下の内容を貼り付けます。

※メールアドレスはinfo@xxxxx.comとしているので、ご利用のメールアドレスに変更してください。


件名:【XXXX】へのお問い合わせありがとうございます
送信者:info@xxxxx.com
Reply-to（メールアドレス）:info@xxxxx.com

※送信者はXXXX等の企業名にしてもOKです。


本文:
{お名前}　様

この度は、お問い合わせいただき誠にありがとうございます。
内容を確認させていただき、ご返信させていただきます。

------------------------------

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

-------------------------------

※このメールは 【XXXX】のお問い合わせフォームから自動送信されました。

======

【XXXX】 
電話番号 0800-000-0000
メール info@xxxxx.com
https://xxxxx.com/

======


自動返信メール:メールアドレス
送信元（E-mailアドレス）:info@xxxxx.com

メールフォームに入力された値を表示する

「自動返信メール」以外の項目については、本文のnameの値を{}で囲み、入力フィールドに入力された値を表示できます。

今回の項目は以下のような対比になっています。

002

⑤管理者宛メール設定

以下の内容を貼り付けます。

送信先（E-mailアドレス）：info@xxxxx.com
件名：お問い合わせ
送信者：{お名前}
Reply-to（メールアドレス）:{メールアドレス}

本文:
【XXXX】へのお問い合わせがありました

-------------------------------

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

-------------------------------

※本メールはお問合せがあった際の自動配信メールです。
ご対応よろしくお願いいたします。

送信元（E-mailアドレス）:info@xxxxx.com

3.MW WP Formをホームページに設置

作成したフォームをホームページに設置します。
フォームの作成画面の右側に「フォーム識別子」という欄があります。

002

サンプルでは[mwform_formkey key="2144"]です。
これをコピーして、フォームを設置したいページに掲載します。

002

これでメールフォームの設置は完了です。

4.最後に

今回は初心者の方向けのシンプルなメールフォームにしましたが、 MW WP Formは結構複雑なこともできます。MW WP Formのマニュアル等を参考にいろいろ試してみてください。