お問い合せページを作る

今回はお問い合せページをプラグインを使って作成してみます。
お客様などからのお問い合せをメールで受けるためのページです。
jQueryなどでも実装できますが、やはり簡単にできるに越したことはありませんから、プラグインを利用することにします。

お問い合せフォーム用のプラグインとしてはContact Form7が定番ですが、残念ながら送信内容の確認画面がありません。その点が改善されたプラグインがありましたのでれを使用します。
MW WP Form というプラグインです。

MW WP Form

管理画面の[プラグイン]でMW WP Formを探して[新規追加]し、有効化すると管理画面のメニューに[MW WP Form]が現れます。
[MW WP Form]の画面で、問い合わせ内容の項目などのフォームを設定し、そのフォームの識別子を固定ページに貼りつけるという方法で問い合わせ画面を作ります。送信完了メッセージや自動返信メールの設定もおこないます。

[MW WP Form]を開くと
・タイトル
・問い合わせ画面フォーム
・完了画面メッセージ
・自動返信メール設定
・管理者宛メール設定
・URL設定
・バリデーションルール
・設定
といったブロックがあります。

最小限のものについて説明します。詳しくはMW WP Formの公式ページなどをご参照ください。

問い合わせ画面フォーム

まず[MW WP Form]のメニューで[新規追加]を選択します。
「フォームを追加」というタイトルの画面になりますので、まずタイトルを入力します。仮に「お問い合せ」としておきます。

その下のペイン部分に送信してもらう項目を追加していきます。
WordPressの記事編集画面と同じようにビジアルもしくはテキストで編集できるようになっており、入力項目を定義していきます。

上部にある[選択してください]というところから追加したい項目を選び、[フォームタグを追加]ボタンで追加していきます。

すると、その項目の名前やID、フィールドサイズ、初期値などを入力する窓が開きますので必要な内容を追加してきます。ペインにはショートコードで追加されていきます。
ショートコードについては、MW WP Form のマニュアルのショートコードをご覧ください。

フィールド以外にフィールドラベルなども入力します。
その際、フォーム編集画面では通常のHTMLタグも書けますので、classを使って CSS で表示を整えるようにします。
通常、フィールドラベル(項目名)がきて、その右側に入力欄という形になると思いますので、ちょっと昔流で邪道かもしれませんが <TABLE> などを利用すると楽に表示を整えられます。

確認画面もこのフォームの定義が使われますので、入力画面用と確認画面用の両方のボタンを配置します。
[送信]ボタンは、確認画面を表示しないでそのまま送信します。
[確認・送信]ボタンは確認画面を表示します。確認画面では[送信]ボタンになります。
[戻る]ボタンは確認画面から入力画面に戻るボタンで、入力画面では表示されません。
ですから、通常は[確認・送信]ボタンと[戻る]ボタンを配置しておけばいいでしょう。

完了メッセージ

完了メッセージは、送信完了時に画面にその旨を表示するメッセージです。

自動返信メール設定

自動返信メールは、問い合わせ内容を入力されたメールアドレス宛に送信するメールです。
このブロックの一番下に「自動返信メール」という欄がありますが、ここにはフォームで定義したメールアドレスのショートコートにある name の値を入力します。
具体的には、仮に[mwform_email name=”your_email” id=”email” size=”40″ maxlength=”100″] というショートコードだとすれば、your_email を入力します。

管理者宛メール設定

管理者に問い合わせがあったことを知らせるメールの設定です。

URL設定

入力画面、確認画面、完了画面のURL、バリデーションエラー画面URLをそれぞれ異なるものにしたい場合に入力します。同一のURLで変遷させる場合は未入力で構いません。

バリデーションルール

バリデーションルールというのは入力チェックのルールです。チェックしなければなにも必要ありませんが、メールアドレスくらいはチェクしておきましょう。

[バリデーションルールを追加]でチェックする項目の設定欄を追加します。
「バリデーションを適用する項目」のところは、チェックする項目(メールアドレス)の name の値を入れます。例えば先の例でいうと、”your_email” です。
メールアドレスは必須項目(確認メールが送られます)なので、「必須項目」にチェックを入れます。
メールアドレスの形式チェックをして欲しいので、「メールアドレス」にチェックを入れます。

確認用のメールアドレス欄があれば(作った方がいいです)、それ用のバリデーションルールも追加します。
こちらも「必須項目」にチェックを入れます。
「一致する項目」のところに、”your_email” を入力します。

※ MW WP Formの設定詳細については、MW WP Formの公式ページを参照ください

お問い合せページの作成

フォームの作成がすんだら、フォームを表示する固定ページを作成し、そこにフォーム編集画面にある[フォーム識別子]を貼りつけます。

[外観]-[メニュー]でも登録しておきましょう。

以上で完了です。

 

スポンサーリンク