PAGE TOP

送信確認・完了画面を出せる問い合わせフォームプラグイン MW WP Form

MW WP FORM

お問い合わせフォームに送信確認画面、完了画面を出したいという要望は結構あると思います。
WordPressの定番お問い合わせフォームといえばContactForm7がありますが、送信ボタンを押した際に、グリーンの枠で「あなたのメッセージは送信されました。」という味気ない文言が出るだけ、というのはなんとなく淋しい。。。

 

しかし、送信確認画面や完了画面を出すフォームというのは日本独自の文化らしいことも何処かに書いてありました。

 

とは言えここは日本、文化に倣いましょうという事で、
確認画面を表示できるお問い合わせフォームを実装するにあたり、よっぽど高性能な機能が必要でない限りは和製の「MW WP Form」というプラグインがオススメです。

MW WP Form │ モンキーレンチ

WPの管理画面、プラグインの新規追加・検索から「MW WP Form」と検索し、インストール・有効化でサイドメニューにMW WP Formが現れます。

 

設定方法・使い方

ずらっとならんだ各フィールドのボタンをクリックするとショートコードが本文に挿入されます。 例えばテキストフィールドボタンを押すと、1行のテキスト入力フィールドを表示するショートコードが挿入されます。

 

[mwform_text name=””]

 

このname=”○○”欄にフィールドの名前を任意で付けます。
例えば、名前を入力してほしいフィールドだったとすると、「名前」とでもしておきましょう。
※フィールド名は日本語で大丈夫です。

 

そして、これにバリデーションルールを持たせたい場合は、下方にあるバリデーションルールの設定で、バリデーションルールを追加→適用する項目に「名前」と入力し、必須であったり、その他そのフィールドに適用したいルールにチェックを付けます。
※特にルールを適用する必要がない項目に関してはショートコードのname=””に任意文字列の入力だけで大丈夫です。

 

あとは自動返信メールや管理者宛メールの内容を決定し、最後にこのフォームを使用したい固定ページにフォーム識別子を貼り付けて完了。

 

送信確認画面・完了画面などの設定

設定画面にURL設定という項目があります。
各画面を表示させたい場合、固定ページをその分作ってここにURLを入力しておきます。
各URLに直接アクセスしても、順番通り進まないと最初の入力画面にリダイレクトされるように設定されています。
各画面を設定した場合、ボタンは下記のように記述する必要があります。

 

<ul>
<li>[mwform_backButton]</li>
<li>[mwform_submitButton]</li>
</ul>

 

確認画面へ進むボタン、戻るボタン、送信するボタンを画像に変えたい

MW WP Formで生成されたフォームは入力、確認、完了画面がそれぞれ「mw_wp_form_input」「mw_wp_form_confirm」「mw_wp_form_complete」というクラスで囲まれるようですので、各ボタンの画像を用意して、

 

/*確認画面へ進むボタン用*/
.mw_wp_form_input .btn input{
background:url(img/input_btn.png) no-repeat;
width:150px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}

.mw_wp_form_confirm .btn input{
/*送信ボタン用*/
background:url(img/confirm_btn.png) no-repeat;
width:150px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}

#submitback input{
/*戻るボタン用*/
background:url(img/form_back_btn.png) no-repeat;
width:80px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}

 

とCSSで装飾し、
ボタンの記述を

 

<ul>
<li><span id="submitback">[mwform_backButton]</span></li>
<li class="btn">[mwform_submitButton]</li>
</ul>

 

としてやると実現できました。
※ボタンサイズやliタグの並びなどは環境に合わせて書き換えてください。

 

まとめ

現在もプラグイン開発者によるアップデートが繰り返されており、より良い物に進化し続けている模様。
送信される内容により細かいルールを適用させたり、確認画面や送信完了画面を出したりしたい場合はMW WP FORMで決まりです。
今後ContactForm7に変わってWORDPRESSのお問い合わせフォームの定番プラグインになるのではないでしょうか。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •