【最短】WordPress（ワードプレス）で問合せフォームを設置する方法

WordPressは初期設定のままではお問い合わせフォームが備わっていません。

お問い合わせフォームは、サイトを利用する人が疑問や不安点を解決するための有効な手段となります。 設置方法が難しそうだと感じるかもしれませんが、プラグインを利用することで簡単な設定のみで設置することができます。手間や時間をかけずにお問い合わせフォームを作成する方法を紹介します。

お問い合わせフォームの設置方法

ここではお問合せフォームを作成できるプラグインの1つである『Contact Form 7』を使用して紹介します。

『Contact Form 7』はお問い合わせフォームの中でも有名なプラグインです。カスタマイズが可能なことから柔軟性が高く、企業サイトでも多く採用されているプラグインの１つです。編集にはHTMLを使う必要があり、初心者の方には少し難しく感じるかもしれませんが、慣れれば非常に優秀なプラグインですので、以下を参考にして使ってみてください。

プラグイン『Contact Form 7』をインストールする

『Contact Form 7』をWordPressにインストールします。

左サイドバーの「プラグイン」から「新規追加」をクリックし、右上に表示される検索窓に「Contact Form 7」と入力します。すると『Contact Form 7』が表示されるので「今すぐインストール」をクリックします。

プラグインをインストールする方法には、管理画面から検索してインストールする方法とインストールするプラグインをアップロードする方法があります。

word press公式のプラグインである『Contact Form 7』を使用する場合には、管理画面から設定することができます。

プラグインを有効化する

プラグインはインストールしただけでは使用することができません。使用するためには有効化する必要があります。「インストール済み」から『Contact Form 7』の「有効化」をクリックしてください。

お問い合わせフォームを作成する

プラグインのインストール、有効化が完了すると、左メニューバーに「お問合せ」というメニューが追加されます。「お問合せ」の「新規作成」から新しいフォームの編集画面に移動します。

編集画面は、フォーム名・フォーム（入力内容）・メール・メッセージ・その他という項目に分けられています。ここからはそれぞれについて説明していきます。

フォーム名

フォーム名は、編集画面のページ上部に表示されています。管理者がフォームを管理するための名前で、実際のサイトには表示されません。わかりやすい名前を付けると良いでしょう。

これは、フォームを管理するためのものでサイト閲覧時には表示されないため自分がわかりやすいものを付けてください。

フォーム

デフォルトでは、名前・メールアドレス・題名・メッセージ本文・送信ボタンが設定されています。

フォームの項目を追加したい場合は、画面上部に表示されているフォームタブの項目の中から追加したいものをクリックしてフォームに追加していきます。

例えば、担当部署を入力する項目を追加したい時は、[テキスト]をクリックします。すると以下のようなフォームタグの設定画面が表示されますので、必要事項を入力していきます。

・項目タイプ 必須項目にチェックすると、ユーザーが必ず入力しなくてはならない項目になります。

・名前項目の名前です。

・デフォルト値 項目に初期表示される値です。

・Akismet スパム対策のプラグインであるAkismetが有効化されている場合に、フォームの入力値を検証し、スパム判定が行われます。

・ID属性 HTMLコードのIDに付加する値で、cssやJavaScriptを使用する場合のみ設定します。

・クラス属性 HTMLコードのclassに付加する値で、ID属性同様cssやJavaScriptを使用する場合のみ設定します。 ※全て入力しなければいけないものではありません。必要なものだけ入力します。

必要な情報を入力したら「タグを挿入」をクリックすると設定したタグが新しく挿入されます。（赤枠）後は、デフォルトで入っているフォームタグと同じようにpタグとbrタグを使って、挿入したタグの見出しを記載します。（青枠）

メール

フォームからお問合せがあった場合、その内容が管理者にメールで送信されます。「メール」ではその送信時の内容について設定を行います。設定する内容は、送信先・送信元・題名・追加ヘッダー・メッセージ本文・ファイル添付などです。

[your-name]や[your-email]と表示されるのは、フォームで入力した内容が置き換えられたものになります。

以下、設定できる項目の詳細です。

・送信先 お問合せ内容についてのメールを受信したいメールアドレスを設定します。

・送信元 メール送信元となるアドレスを入力します。サイトのドメインと入力したメールアドレスのドメインが異なっている場合、「サイトのドメインに属していないメールアドレスが送信元に設定されています」と表示され、メールサーバーがスパムと認識してメールを受信することができなくなってしまう可能性があります。

・題名メールを受信した時の件名です。わかりやすい題名を設定しましょう。

・ 追加ヘッダー 受信メールに対して返信するアドレスを指定するヘッダーです。デフォルトの状態では「Reply-To:[your-email]」と表示されますが、メールアドレスを書き換えることで返信元を指定することができます。

・ メッセージ本文 メール本文にあたります。デフォルトの状態で、差出人・題名・お問合せ内容については確認することがきますが、メールタグを組み合わせて表示する内容を変更することもできます。

・ ファイル添付 この項目にアップロードされたファイルに対応するメールタグを設定するとファイルを添付することができます。

確認メール

メールの設定画面を下にスクロールしていくと、メール(2)という項目が表示されます。

これは、お問い合わせをしてくれた方に確認用として自動返信メールを送信する設定です。必須項目ではないため設定しなくても大丈夫ですが、きちんと送信されているかの確認や、送信したメールの控えとなるため便利な機能です。

「メール(2)を使用」にチェックを入れると、以下のような画面が表示されます。

・ 送信先 自動返信を送る宛先となるメールアドレスを指定します。デフォルトで入力されている[your-name]のままで大丈夫です。

・ 送信元 送信元としたいメールアドレスを指定します。

・題名自動返信メールの題名を入力れています。デフォルトで入力されている[your-subject]では、メールフォームで入力された件名が表示されます。

・ 追加ヘッダー 自動送信メールに返信する場合に送り先となるメールアドレスを指定します。送信元へ返信されるようにしたい場合には、「Reply-To:….」は削除し、別のメールアドレスに送信されるようにしたい場合には、メールアドレスを入力します。

・ メッセージ本文 自動送信メールで送信したい内容を入力します。[your-name]、[your-email]、[your-message]は、自動的にメールフォームに入力された「名前」「メールアドレス」「メール本文」に置き換えて送信されます。

設定が完了したら、「保存」クリックすればメールの設定は完了です。

お問い合わせフォームをページに反映させる

フォームを作成しただけではそのフォームはまだサイトに反映さていません。フォームを反映するには、そのフォームをページに追加する必要があります。まず、フォーム編集ページのフォーム名の下に表示されている「[ ]」で囲われているコンタクトフォームのショートコードをコピーします。

（※フォームの一覧画面からもショートコードをコピーすることもできます。）

お問い合わせフォームを設定したいページの編集画面を開いて、コピーしたショートコードを貼り付けます。

貼り付けたら、「公開」または「更新」をクリックしたら完了です。下の画像のようにページにお問い合わせフォームが反映されています。

カスタマイズ

ここまでは、デフォルトに近いシンプルなお問い合わせフォームの作成方法を紹介しましたが、カスタマイズした例もいくつか紹介します。

電話番号

お問い合わせフォームで電話番号も入力してもらいたい場合、編集画面にある[電話番号]をクリックして電話番号のフォームタグを追加します。クリックすると、フォームタグの設定画面が表示されます。

・項目タイプ必須項目としたい場合にチェックを入れます。

・デフォルト値入力例を表示したい場合に入力して、チェックを入れます。記載したい項目を入力したら、「タグを挿入」をクリックしてタグを追加します。電話番号 [tel* checkbox-936] 画面上ではこのように表示されます。

ドロップダウンメニュー

ドロップダウンメニューを利用して選択肢を表示することも可能です。今回は、お問い合わせ内容を選択できるように設定します。「フォーム」の編集画面にある[ドロップダウンメニュー]をクリックします。

すると、フォームタグを生成する画面が表示されます。

・項目タイプ：必須項目とする場合にはチェックを入れます。・名前：ドロップダウンメニューで作成する質問項目の名前を入力します。・オプション：選択肢を１つにつき１行以内で入力します。・複数選択を可能にする：複数選択を可能にする場合には、チェックを入れます。・空の項目を先頭に挿入する：ドロップダウンメニューの先頭を空白にしたい場合、チェックを入れます。 ※ID属性・クラス属性：何も入力しないままで大丈夫です。

必要事項を入力し、「タグを挿入」をクリックしてタグを追加します。

・お問い合わせ内容の種類 [select* menu-280 “会員登録・登録情報” “商品に関するお問い合わせ” “資料請求” “その他”] 選択肢を書き換えるだけで他の内容に変更することも可能です。実際の画面ではこのように表示されます。

チェックボックス

ドロップダウンメニューではなく、チェックボックスを用いても同じように選択肢を表示することが可能です。チェックボックスの生成画面の入力手順は、ドロップダウンメニューと同じです。

入力を終え挿入するとこのようなタグが挿入されます。お問い合わせ内容の種類 [checkbox checkbox-35 “会員登録” “商品に関するお問い合わせ” “資料請求” “その他”] 実際の画面上にはこのように反映されます。

ラジオボタン

ドロップダウンメニュー、チェックボックス以外にラジオボタンを用いて選択肢を表示することも可能です。ラジオボタンの生成画面も、他の２つと同じように入力します。

以下のタグが入力されます。お問い合わせ内容の種類 [radio radio-59 default:1 “会員登録” “商品に関するお問い合わせ” “資料請求” “その他”]

これをコピーして貼り付けるだけで、お問い合わせ内容選択欄を作成することも可能です。選択肢を書き換えるだけで他の内容に変更できます。画面上では、このように入力されます。

テキストエリア

デフォルトの状態でも、「メッセージ本文」というユーザーの書き込むことのできる欄が設けられていますが、それを増やしたい場合にはテキストエリアを用いて設定します。フォームタグ生成を入力しタグを挿入します。

項目タイプ：必須項目としたい場合には、チェックを入れます。デフォルト値：入力例や内容について表示したい場合には入力しチェックを入れます。 ID属性、クラス属性については入力しないままで大丈夫です。以下のようなタグが挿入されます。お問い合わせ内容 [textarea textarea-177]

これをコピーして貼り付けるだけで、お問い合わせ内容の入力欄を作成することも可能です。「お問い合わせ内容」の部分を書き換えるだけで他の入力欄に変更できます。画面上ではこのように表示されます。

デフォルトの状態に、電話番号、お問い合わせ内容の種類、お問い合わせ内容の入力欄のタグを足すとこのようなフォームになります。

お名前 (必須) [text* your-name] 電話番号 (必須) [tel* tel-60] メールアドレス (必須) [email* your-email] お問い合わせ内容の選択 [select* menu-470 “会員登録” “商品に関するお問い合わせ” “資料請求” “その他”] 題名 [text your-subject] お問い合わせ内容 [textarea your-message] その他 [textarea textarea-177]

これをコピーして貼り付けてフォームを作成することも可能です。ページにはこのように表示されます。

このようにタグを追加した際には、編集後にコンタクトフォームの編集画面で「保存」をクリックし、固定ページの編集画面で「更新」をクリックしなければページ上に反映されないことに注意してください。

他のプラグイン

Contact Form7を使ってお問い合わせフォームを設置する方法を説明しましたが、別のプラグインもいくつかあるため、それぞれ特徴を紹介します。

Jetpack Contact Form

Jetpack Contact Formは、Word pressの開発元であるAutomatic社が提供するプラグインです。

簡単なお問い合わせフォームを作成する場合には便利なプラグインですが、「お問い合わせ内容の確認画面が表示されない」「自動返信機能がない」「作成したフォームを保存することができず、新しいフォームに変更する際に作り直さなければない」といった点があります。

Trust Form

Trust Formは、「Jetpack Contact Form」と同様にシンプルで簡単なお問い合わせフォームを作成するのに向いているプラグインです。

しかし、Jetpack Contact Formとは異なり、お問い合わせ内容を確認画面で表示することができます。また、フォームを利用してショートコードを呼び出すこともできます。カスタマイズした項目をテンプレートとして残すことができ、フォームを使い回すことが可能です。そのため、複数のお問い合わせフォームを使い分けたい場合に便利なプラグインです。

MW WP Form

確認画面や自動返信メールを実装することのできるプラグインです。幅広くカスタマイズすることができますが、HTMLタグなどの知識が必要となるため初心者の方には少し難しいかもしれません。

しかし、有料の拡張機能を使用すればHTMLが苦手な方でもカスタマイズすることが可能になります。「確認画面」「送信完了画面」「エラー画面」などを設定できることと、お問い合わせ内容をデータベース内に保存可能な点がContact Form7と異なります。基本的には、HTMLの知識を持つ中級者向けのプラグインです。