MW WP FormプラグインでWordPress（ワードプレス）で作ったホームページにお問い合わせフォームを設置しよう！

ホームページには必要なことが多い「お問い合わせフォーム」。WordPress（ワードプレス）では、プラグインを使って簡単に設置することができます。お問い合わせフォームが追加できるプラグインは複数ありますが、ここでは使いやすく多機能なフォームプラグイン「MW WP Form」を使って、ホームページにお問い合わせフォームを追加してみましょう。

「プラグインってなに？」という方は、以下の記事も読んでみてくださいね。
WordPress超入門4-01 プラグインを有効化して使えるようにしよう

まずは、MW WP Formの設定方法と基本操作な手順にしたがって、シンプルなお問い合わせフォームを作成してみましょう。

MW WP Formの設定方法と基本操作

1. プラグインをインストールする
2. フォームを作成する
3. 完了画面メッセージを入力する
4. 自動返信メール・管理者宛メールを設定する
5. 固定ページにショートコードを挿入する

基本的なやり方を学んだあとに、Googleアナリティクス用に確認・完了ページのURLを設定する方法とバリデーションルールを追加して必須項目にする方法について説明します。

MW WP Formの設定方法と基本操作

1.プラグインをインストールする

1. 左ナビゲーションから「プラグイン＞新規追加」を選択します。
2. キーワードに「MW WP Form」を入力します。
3. MW WP Formプラグインを「今すぐインストール」ボタンを押します。

数秒〜数十秒ほど「インストール中」と表示されますので、ページを移動せずに待ちましょう。

「インストール中」から「有効化」に切り替わったら、「有効化」ボタンを押します。

2.フォームを作成する

まずは、「名前」「メールアドレス」「お問い合わせ内容」の入力欄のあるフォーム作成の手順にしたがって、流れを確認しましょう。

1. プラグインを有効化すると、左ナビゲーションに「MW WP Form」が表示されます。「MW WP Form＞新規追加」を押します。
2. フォームのタイトルを入力します。

1. 本文欄の上にあるプルダウンメニューから、名前欄を表示するために「テキスト」を選択します。
2. 「フォームタグを追加」ボタンを押します。

※各フォームタグの種類は記事の後半で改めて解説します。

• 「name」欄に「名前」を入力します。※任意の値を入力することができます。
• 「Insert」ボタンを押します。

※name以外の項目は必要に応じて任意で入力します。

name	フォームデータが送信される際の識別名
id	CSSで要素を装飾する場合の識別名、およびJavaScriptなどのプログラムで参照する場合の識別名
class	CSSで要素を装飾する場合の識別名
size	テキストフィールドのサイズ（文字数）
maxlength	テキストフィールドに入力できる最大文字数
初期値	テキストフィールドに最初から入っている値
placeholder	テキストフィールドにあらかじめ表示されるダミーテキスト

本文欄にWordPressで「ショートコード」と呼ばれる文字列が挿入されるのを確認しましょう。

続いて、同様にプルダウンから「メール」「テキストエリア」を選択し、本文欄にショートコードを挿入しましょう。

必須項目は「name」のみです。任意の値を入力することができますが、ここではメールには「メール」、テキストエリアには「内容」と入力しています。

Webページとして表示した際に、ショートコード部分がそのままテキストボックスやテキストエリアとなります。それぞれのテキストボックスやテキストエリアの項目について補足しましょう。入力時、ショートコードの記述を誤って削除しないように気を付けましょう。

最後に、プルダウンメニューから「戻るボタン」と「確認送信ボタン」を挿入します。

ボタン用のショートコードが挿入されているのを確認します。

3.完了画面メッセージを入力する

「完了画面メッセージ」欄に、フォーム送信後に表示されるメッセージを入力します。

4.自動返信メール・管理者宛メールを設定する

自動返信メール設定

お問い合わせを送信したユーザーに送られる自動返信メールを設定します。

1. メールの「件名」を入力します。
2. メールの「送信者」を入力します。
3. 任意で「Replay-to」を入力します。ユーザーには6「送信元」のメールアドレスで届きますが、ユーザーがメールに返信した際に、送信元アドレスではないアドレスに返信をもらいたい場合に「Replay-to」を設定します。
4. メールの「本文」を入力します。ユーザーの入力をメールに反映する箇所には、
   {名前}　{メール}　{内容}
   のように、フォーム作成時に入力した「name」の値を波かっこ｛ ｝でくくります。
5. 「自動返信メール」には、フォーム作成時にメールに設定した「name」の値（ここでは「メール」）を入力します。
6. 「送信元（E-mailアドレス）」が空の場合は、自動的にシステムのアドレスから送信されます。基本的には入力しません。

管理者宛メール設定

ユーザーがお問い合わせを送信した際に送信される管理者宛のメールを設定します。

1. 「送信先（E-mailアドレス）」を入力します。
2. 「件名」を入力します。
3. 「送信者」を入力します。
4. 「本文」を入力します。自動返信メール設定と同様に、「name」の値を波かっこ｛ ｝でくくりましょう。

※CC、BCCを設定する場合は入力しましょう。Return-Path、送信元は基本的には入力しません。

全ての入力が完了したら、「公開」ボタンを押しましょう。

5.固定ページにショートコードを挿入する

「フォーム識別子」を選択してコピーします。

固定ページを新規追加し、コピーした「フォーム識別子」を本文欄にペーストして、固定ページを公開しましょう。

公開された固定ページに、フォームが表示されていることを確認します。テスト送信を行なって、動作確認を行いましょう。

フォームタグの種類

MW WP Formで挿入できる入力項目と選択項目のフォームタグを紹介します。

入力項目

日付ピッカー

メール

ファイル・画像

Numberフィールド

年月ピッカー

パスワード

Range フィールド

電話番号

テキスト

テキストエリア

URLフィールド

郵便番号

選択項目

チェックボックス

ラジオボタン

セレクトボックス

Googleアナリティクス用に確認・完了ページのURLを設定する

Googleアナリティクスでお問い合わせのコンバージョン設定などを行なっている場合、フォームの確認画面、完了画面それぞれに個別のURLを割り当てたい場合があります。

1.固定ページを作成する

確認画面と、完了画面用の固定ページを新規作成します。

1. 忘れずに、MW WP Formに設定した「フォーム識別子」を本文欄に貼り付けます。
2. パーマリンクを開いて、「URLスラッグ」を入力します。

ここでは、各ページのURLスラッグを下記のように設定しています。

MW WP FormのURL設定を行う

MW WP Formで、「URL設定」を入力します。固定ページのURLスラッグと対応するように入力しましょう。

バリデーションを設定する

フォームの送信前にチェック項目をを設定する場合は、バリデーションルールを設定します。ここでは、「名前」を必須にする例で設定してみましょう。

1. 「バリデーションルールを追加」ボタンを押します。
2. 「バリデーションを適用する項目」に、「name」に入力した値を入力します。
3. 名前を必須項目にする場合は「必須」にチェックしましょう。

作成されたフォームで、「名前」を未入力で「確認画面へ」ボタンを押すと、エラーメッセージが表示されます。

以上の手順で、お問い合わせフォームを設置することができます。少し難しいように思えるかもしれませんが、順を追って進めれば大丈夫です！ぜひ導入してみてください。

株式会社コミュニティコムが運営する教育部門「Chiemo（チエモ）」では、WordPress（ワードプレス）でホームページやブログを作り始めたけれど、「ここがわからない！」といったお悩みに対して、プロのデザイナーがマンツーマンでレッスンを行っています。

>> ホームページ制作＆WordPressなんでも相談会