• WordPress

[WordPress]お問合せフォームの作り方

Posted on 2016年7月4日

2016.07.05 「4.迷惑メールに入ってしまう時の対処法」について加筆いたしました。

お問合せフォームの作り方をまとめます。

お問合せフォームの作り方

お問合せフォームが作れるプラグインには有名なところで以下のものが有るようです。

  • Contact Form 7
  • MW WP Form
  • Jetpack Contact Form

他にもいつくか有るようですが、「Contact Form 7」「MW WP Form」が良く使われているみたいですね。この2つは日本人が開発したものなので、日本人にはとっつきやすいかと思います。

「MW WP Form」では確認画面を作ることができます。確認画面ってあんまり海外では主流では無いみたいですね。でも日本人だと確認画面が出ることを期待してしまいがちですね。私も出てくる物だと思って送信ボタン押してしまうことが多々あります。確認画面を出したい人は「MW WP Form」を使ってみてください。書き出されるコードがとてもシンプルなので、導入もカスタマイズもとても簡単です。

MW WP Form

ということで、ここでは「MW WP Form」を利用したお問合せフォームの作り方を説明します。

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

まずは、「MW WP Form」をインストールしてください。管理画面の「プラグイン」から検索し、有効にします。

すると、サイドメニューに「MW WP Form」が追加されますので、その中の「新規追加」をクリックしましょう。これがフォームの作成画面です。

キャプチャ

1.フォームタイトル

作成するフォームにタイトルを付けます。特に表示に影響を与えないので、「お問合せ」など分かりやすいタイトルにしましょう。

2.フォーム部品の作成

フォームの部品を書き出します。「フォームタグを追加」ボタンの横にある「選択してください」(※1)から、必要な部品を選択します。一行テキストなら「テキストフィールド」、複数行テキストなら「テキストエリア」にします。確認画面を出したい時は、ボタンに「確認・送信」を選択してください。

キャプチャ

選択後、name属性やid属性を指定できるポップアップが開きますので、必要に応じて指定してください(※name属性の値は必須です)。属性値を入力後、「Insert」ボタンを押すと、エディタにコードが入ります。これがフォーム部品になります。inputタグ等に置き換わるだけで、余計なコードは入りませんので、ここで自由にマークアップすることが出来ます。

次のコードは一例です。フォーム部品以外は、直接エディタに入力していきます。

3.完了画面メッセージ

エディタに出力したいコードを、入力します。下記は一例です。

4.URL設定

「URL設定」は空でも構いません。指定がない場合は、入力画面や確認画面が同一ページで行われます。あえて各画面を別ページに作りたい時はここでURLを指定してください。

5.バリデーションルール

ここでは、必須項目を入力せずに送信ボタンを押した場合にエラーを出すなどの設定が可能です。その他にも入力形式が「メールアドレス」では無い時など、さまざまな判定が可能なので必要に応じて設定してください。

設定方法は、「バリデーションルールを追加」ボタンをクリックして、「バリデーションを適用する項目」に適用したいフォーム部品のname属性値(「2.フォーム部品の作成」で指定したもの)を入力するだけです。例えば、先の入力例で言うと、名前の項目に必須判定を付けたい時は「バリデーションを適用する項目」に「your-name」と入力して「必須項目」にチェックを付けます。

6.自動返信メール設定

お問合せがあった際に、自動で返信を返すようにします。必要なければ空白にしておいてください。

「本文」には、フォームから送信されてきた内容を反映することが出来ます。「2.フォーム部品の作成」で設定したname属性値に{}を付けて入力してください。下記は本文の例です。

「自動返信メール」には返信メールを送信するメールアドレスが入ります。「2.フォーム部品の作成」でメールアドレスの項目に設定したname属性値(※{}は不要)を入力することで、お問い合わせ下さったユーザーのメールアドレスに返信することができます。先の入力例なら、「your-mail」と入れることになります。

※Gmailなどに送信する際に「成りすまし」を疑われて迷惑メールに入る場合が有ります。完了画面に、注記を書いておくといいかもしれません。
迷惑メールに入ってしまう時の対処法

7.管理者宛メール設定

お問合せがあった際、指定したメールアドレスへ通知してくれます。「本文」には「6.自動返信メール設定」の時と同様に、フォームから送信されてきた内容を反映することが出来ます。以下は本文の例です。

※Gmailなどに送信する際に「成りすまし」を疑われて迷惑メールに入る場合が有ります。
迷惑メールに入ってしまう時の対処法

8.設定

「問い合わせデータをデータベースに保存」にチェックを入れることで、管理画面でお問合せ内容を確認する事が出来るようになります。

9.公開

入力が済んだら、右上にある「公開」ボタンをクリックします。

2.固定ページの作成

お問合せ用の固定ページを作成します。

管理画面のサイドメニューから「固定ページ」の新規追加をクリックして作成画面で、タイトルを入力してください。次に本文を入力します。先ほどマークアップしたフォーム用のコード(※2.フォーム部品の作成/3.完了画面メッセージ)を呼び出したい場所に「フォーム識別子」を入力します。「フォーム識別子」はサイドメニューの「MW WP Form」から確認できます。

お問合せページ用にカスタムテンプレートを作成する場合は下記を参考にしてください。
[WordPress]固定ページでカスタムテンプレートを使用する方法 | patapata工房-ブログ-

「更新」ボタンを押して完了です。作成した固定ページのURLを開くと、フォーム画面が展開されている事が確認できます。

3.送信内容を確認

お問合せフォームからテスト送信をしてください。「8.設定」で「問い合わせデータをデータベースに保存」にチェックを入れていた場合、サイドメニューの「MW WP Form」の「問い合わせデータ」から、送信した内容を確認することができます。

4.迷惑メールに入ってしまう時の対処法

自動返信メールや管理者宛メールが迷惑メールに入ってしまう原因として、送信したメールの「from」と「送信元」のドメインが異なっていることが考えられます。通常、WordPressから送信されたメールは、「送信元」がサイトのドメインになっています。一方、「from」には「MW WP Form」で設定した「送信元(E-mailアドレス)」が使われるため、この2つのドメインが異なっている事があります。Gmailなどでは、これをスパムと判断してしまうようです。

キャプチャ

もしも、サイトのサーバとメールのサーバが異なるなど、ドメインを合わせたくない場合は、プラグインで解決することができるようです。
WP Mail SMTP

WP Mail SMTPの詳しい設定方法などは、こちらで紹介されています。 WordPressで「メール送れない!何で?」という方に試してほしい【WP Mail SMTP】設定方法 | 株式会社ブリッツゲート