MW WP Formで確認画面・完了画面・サンクスメール付きお問い合わせフォーム作成手順

MW WP Formを使ったお問い合わせフォームの作成手順についての説明です。

以前Contact Form 7で確認画面、完了画面、サンクスメール付きのフォーム作成手順を書きましたが、MW WP Formでも同じことができます。

Contact Form 7とMW WP Formの大きな違いは、MW WP Formには確認画面とデータベース保存機能・CSV出力機能がデフォルトの状態で付けられるということです。

あと、自分の主観ですがMW WP Formのほうがカスタマイズ性が高いと感じます。

なので使い分けとしては、基本的なフォームはContact Form 7で作り、少し手の混んだフォームはMW WP Formを使っています。

記事作成当時のWordPressのバージョンは5.9.2

※MW WP Formは現在更新が止まっています。今のところ動作するようですが、いつまで使えるかわかりませんのでご注意ください。

お問い合わせフォーム作成に必要なプラグイン

MW WP Form（バージョン 4.4.0）
フォームプラグイン

お問い合わせフォーム作成に必須ではないが、あったら便利なプラグイン

WP Mail SMTP
localhostでメールの送信テストまでやりたい場合
reCAPTCHA for MW WP Form
Google reCAPTCHAを使ってスパム対策をする場合

MW WP Form のインストール

プラグインの新規追加画面で「MW WP Form」と検索し、インストール。その後有効化。

日本語対応していますので、日本語化されていない場合は翻訳を更新しましょう。

MW WP Formの設定

プラグインを有効化すると管理画面のサイドバーに「MW WP Form」の項目が出てきますので、そこから設定していきます。

投稿記事を追加するときと同じ要領で「新規追加」をクリック。

そしてまずタイトルを「お問い合わせ」に設定して、入力フォームの作成を行っていきます。

入力フォームの作成

引き続きフォーム追加画面で行う作業です。

下は一般的なフォームの内容で、あくまで雛形です。

htmlのタグやclass名などは適当につけていますので、適宜書き換えてください。

<p>お気軽にお問い合わせください。</p>

</div>

<h5>お問い合わせ種別<span class="attention required">必須</span></h5>

[mwform_select name="your-contact-kind" children=":選択してください,製品に関するお問合せ,採用に関するお問合せ,その他" post_raw="true"]

</div>

[mwform_text name="your-name"]

</div>

[mwform_text name="your-name-kana"]

</div>

[mwform_email name="your-email" size="60"]

</div>

[mwform_tel name="your-telno"]

</div>

<h5>お問い合わせ内容<span class="attention required">必須</span></h5>

[mwform_textarea name="your-message" cols="50" rows="5"]

</div>

<p class="small caution">docomo、au、softbankなど各キャリアメールをご利用の方は、迷惑メールフィルタの影響で確認メールが正しく届かないことがございます。以下のアドレスを受信できるように設定をお願いいたします。</p>

<p class="small caution">mail@email</p>

</div>

<p class="button-wrapper">[mwform_submitButton name="submit" class="submit button" confirm_value="確認画面へ" submit_value="お問い合わせを送信"]</p>

<p class="button-wrapper">[mwform_backButton class="back button" value="戻って修正する"]</p>

</div>

</section>

通知メール＆サンクスメール本文の作成

サイドバーに「管理者宛て」と「お客様宛て」のメール設定を行う項目があります。

管理者宛メール設定

運営者宛てメールの設定です。

自分の環境に合わせて設定していきます。

メール本文以外の設定項目

送信先（E-mailアドレス）：運営者メールアドレス
件名：お問い合わせがありました（自動配信メール）
送信者（送信元）：{your-email}
Reply-to（メールアドレス）：{your-email}

本文：下にサンプルを記載

メール本文

あくまで雛形ですので、用途に合わせて書き換えてください。

以下のお問い合わせがありました。

受付日時：{受付日時}

************************************************

■お客様情報

************************************************

お名前　：{your-name} 様

ふりがな：{your-name-kana} 様

E-mail ：{your-email}

電話番号：{your-telno}

************************************************

■お問い合わせ種別・内容

************************************************

・お問い合わせ種別

{your-contact-kind}

・お問い合わせ内容

{your-message}

自動返信メール設定

お客様宛てのサンクスメールの設定です。

これも自分の用途に合わせて設定してきます。

メール本文以外の設定項目

件名：お問い合わせ内容のご確認（自動配信メール）
送信者（送信元）：株式会社○○
Reply-to（メールアドレス）：運営者メールアドレス
自動返信メール送信先：{your-email}

本文：下にサンプルを記載

メール本文

これもあくまで雛形ですので、用途に合わせて書き換えてください。

{your-name} 様

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

本メールはシステムから自動送信されています。

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

お問い合わせありがとうございます。

以下の内容にてお問い合わせを承りましたので、ご確認ください。

受付日時：{受付日時}

************************************************

■お客様情報

************************************************

お名前　：{your-name} 様

ふりがな：{your-name-kana} 様

E-mail ：{your-email}

電話番号：{your-telno}

************************************************

■お問い合わせ種別・内容

************************************************

・お問い合わせ種別

{your-contact-kind}

・お問い合わせ内容

{your-message}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

このメールはご入力いただいたメールアドレス宛に送信しています。

本メールに覚えがない場合、

大変お手数ですが破棄してくださいますようお願い申し上げます。

///////////////////////////////////////////////////////////////////

株式会社〇〇

〒000-0000

東京都○○○○○○○

TEL：03-0000-0000

データベースに保存する設定

返信メールなどを設定したメタボックスの下に「設定」というメタボックスがあります。

その中の「問い合わせデータをデータベースに保存」にチェックを入れると、問い合わせ内容がデータベースに保存されるようになります。

保存内容は、「問い合わせデータ」から見ることができます。

送信完了画面メッセージの作成

Contact Form 7とは違い、デフォルトで設定項目があります。

以下は雛形となります。

<p>お問い合わせ内容の送信が完了しました。</p>

<p>ありがとうございました。</p>

</div>

<a class="button" href="[url]">トップページに戻る</a>

</div>

</section>

7行目のhttps://fixcode.jpというショートコードは、以下のページで紹介したサイトのURLを表示するショートコードです。

仕事で使える便利なWordPressショートコード集

バリデーションルールの作成

フォームの項目に合わせてバリデーションルールを作成することができます。

あらかじめ便利なバリデーションルールが用意されていて、それらを簡単に導入することができるので、とても便利です。

今回の説明では以下のバリデーションルールを設定します。

メール本文以外の設定項目

your-contact-kind：「必須項目」にチェック
your-name：「必須項目」にチェック
your-name-kana：「必須項目」にチェック
your-email：「必須項目」と「メールアドレス」にチェック
your-telno：「電話番号」にチェック
your-message：「必須項目」にチェック

URL設定

URL設定というリダイレクトページを設定できる項目も用意されていますが、今回は設定しません。

オリジナルのメールタグの作成

オリジナルの「メールタグ」を定義して、メール送信時に使用することができる機能があります。

今回は送信メールの本文に受付日時を記載するためのメールタグを作成します。

下のコードをfunctions.phpに貼り付けて、メール本文内で{受付日時}と書いておけば、実際の日付が入ります。

受付日時メールタグの作成

/**

* オリジナルメールタグの作成

* @param string $value 送信された値

* @param string $key メールタグ

* @param int $insert_contact_data_id データベースに保存した場合、そのときの Post ID

function my_mwform_custom_mail_tag( $value, $key, $insert_contact_data_id ) {

// {受付日時}で発動

if ( $key === '受付日時' ) {

return date_i18n( 'Y/m/d H:i:s' );

}

return $value;

}

add_filter( 'mwform_custom_mail_tag_mw-wp-form-228', 'my_mwform_custom_mail_tag', 10, 3 );

15行目の「228」という番号はフォームの識別番号ですので、自分の番号と置き換えてください。

固定ページの作成

お問い合わせフォームのページと送信完了ページを固定ページで作成していきます。

ここも雛形を書いてますので、用途に合わせて書き換えてください。

お問い合わせフォームを表示するページの作成

ページタイトル：お問い合わせ

ページスラッグ：contact

1	[mwform_formkey key="ここにフォームのID"]

固定ページに記述するのは、↑この一行です。

このショートコードのkeyに自分のフォームIDを入れてください。

ショートコードおよびフォームIDはMW WP Form の設定画面のフォーム識別子で確認できます。

最後に

長くなりましたが、以上です。

このプラグインでカスタマイズしていると、気の利いたフックなどがたくさん用意されていて、すごく作り手のことを考えて作られているなぁと感じることが多々あります。

だから、とても重宝しています。

開発者が日本人ということもあり、マニュアルも日本語でなおかつわかりやすく作ってくれています。

・MW WP Form 公式マニュアル

MW WP Formで確認画面・完了画面・サンクスメール付きお問い合わせフォーム作成手順