4-02 お問い合わせフォームを設置しよう

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

企業やお店のホームページに欠かせない機能のひとつが「お問い合わせフォーム(メールフォーム)」。WordPress(ワードプレス)では、プラグインを使ってお問い合わせフォーム(メールフォーム)の機能をホームページに追加できます。

ここでは、「Contact Form 7(コンタクトフォームセブン)」というプラグインを使って、ホームページにお問い合わせフォーム(メールフォーム)を設置する方法を解説します。

お問い合わせフォーム(メールフォーム)とは?

企業やお店のホームページで、このようなページを見たことはないでしょうか。これが「お問い合わせフォーム(メールフォーム)」です。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう
WordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップのお問い合わせフォーム

お問い合わせフォーム(メールフォーム)とは、ホームページを訪問した人が、そのホームページを運営している企業やお店に対して、聞きたいことなどを問い合わせるためのフォームのことです。メールフォームはお問い合わせを受け付けるほかにも、予約の申し込み受け付けや、プレゼントキャンペーンの応募を受け付けるために使うことができます。

お問い合わせフォーム(メールフォーム)を作るためのサービスには、Googleが提供するGoogleフォームなどもありますが、WordPress(ワードプレス)で制作するホームページなら、プラグインをインストールすれば、外部サービスを使うことなくお問い合わせフォーム(メールフォーム)を設置することが可能です。

Contact Form 7(コンタクトフォームセブン)とは?

Contact Form 7は、公式WordPress(ワードプレス)ホームページに登録されており、無料で利用することができるWordPress(ワードプレス)のお問い合わせフォーム(メールフォーム)用 プラグインです。初心者にも使いやすいシンプルな設計が人気で、累計5千万回以上もダウンロードされています。日本人の開発者による国産プラグインなので、日本語で使い方を説明したドキュメントが充実しているのも嬉しいポイントです。

Contact Form 7 ホームページ(日本語)

では、プラグイン「Contact Form 7」を使って、WordPressのホームページにお問い合わせフォーム(メールフォーム)を設置していきましょう。

Contact Form 7をインストール&有効化する

WordPress(ワードプレス)の管理画面にログインし、「プラグイン」にマウスポインターを合わせ、表示された「新規追加」をクリックします。WordPress管理画面へのログイン方法については「WordPress(ワードプレス)の管理画面にログインしよう」を参照してください。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

右上の検索窓に「Contact Form 7」と入力すると、検索結果にContact Form 7が出てきますので、「今すぐインストール」をクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

インストールが完了したら、「有効化」をクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

Contact Form 7プラグインが有効化され、管理画面左側のメニューに「お問い合わせ」という項目が新しく追加されました。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

お問い合わせフォーム(メールフォーム)を新規作成する

Contact Form 7プラグインが有効化されたら、追加された「お問い合わせ」機能を利用して、お問い合わせフォーム(メールフォーム)を新規作成しましょう。

WordPress(ワードプレス)管理画面の「お問い合わせ」にマウスポインターを合わせ、「新規追加」をクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

お問い合わせフォーム(メールフォーム)の編集画面が表示されました。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

「ここにタイトルを入力」と表示されているボックスに、お問い合わせフォーム(メールフォーム)のタイトルを入力します。これは複数のフォームを見分けるための管理用のタイトルなので、ホームページを見た人には表示されません。自分で管理する際にわかりやすいタイトルをつけましょう。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

次に、フォームに入力された内容を送信するメールアドレスを設定しましょう。「メール」のタブをクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

メールの設定画面が表示されたら、「送信先」のボックスに、送信先に設定するメールアドレスを入力して、右上の「保存」をクリックします。これで、作成したお問い合わせフォーム(メールフォーム)が保存されました。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

問い合わせフォーム(メールフォーム)の送信先にはどんなメールアドレスを設定したらいい?

大切なのは、多くの問い合わせが来てもメールが埋もれない&見逃さないことです。他のメールに埋もれないように、問い合わせフォーム(メールフォーム)の宛先専用のメールアドレスを取得してもいいでしょう。または、メールを見逃さないように、普段から使っているメールアドレスにする手もあります。メールの管理しやすさを考えて、適切なメールアドレスを設定しましょう。

お問い合わせフォーム(メールフォーム)を一覧表示して、ショートコードをコピーする

問い合わせフォーム(メールフォーム)の設定ができたので、次はそれを表示するページを作成していきます。

問い合わせフォームのページは、固定ページに問い合わせフォーム(メールフォーム)のショートコードを埋め込むことで表示させることができます。

ショートコードとは、メールフォームなどWordPress(ワードプレス)でのさまざまな動作を1行程度の短いコードで表したものです。もともとは複雑なプログラムで実装されているWordPress(ワードプレス)の動作を、ショートコードで呼び出すことができます。

ショートコードは、問い合わせフォーム(メールフォーム)一覧から確認できます。お問合わせフォーム(メールフォーム)を一覧で表示するには、 WordPress(ワードプレス)管理画面の「お問い合わせ」にマウスポインターを合わせ、「コンタクトフォーム」をクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

お問い合わせフォーム(メールフォーム)一覧が表示されました。先ほど作成・保存したフォームも表示されていますので、ショートコードをコピーしましょう。

コピーの操作は、Windowsなら以下の通りです。

  1. ショートコードをクリックする
  2. Ctrl + A キーを押す
  3. Ctrl + C キーを押す
WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

固定ページを新規作成する

ショートコードがコピーされたら、お問い合わせフォームを表示する新しい固定ページを作成しましょう。固定ぺージについて詳しく知りたい方は「投稿」と「固定ページ」の違いを知ろう のレッスンを参照してください。

新しい固定ページを作成するには、WordPress(ワードプレス)管理画面の上部にある「+新規」にマウスポインターを合わせ、「固定ページ」をクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

新規固定ページを追加する画面になりました。「タイトルを追加」と表示されている箇所に固定ページのタイトルを入力し、「文章を入力、または / でブロックを選択」 と表示されている箇所に先程コピーしたショートコードを貼り付けます。ショートコードを貼り付ける操作は、Windowsなら貼り付けたい箇所にカーソルを合わせて「Ctrl + V」キーを押します。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

ショートコードが貼り付けられたら、「プレビュー」をクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

お問い合わせフォーム(メールフォーム)がプレビュー表示されました。問題なければ、このプレビュー表示画面は閉じて構いません。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

新規固定ページの追加画面に戻って、パーマリンク(固定ページのURL)を編集しましょう。「文書」をクリックします。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

「パーマリンク」をクリックして、URLのボックス内の日本語を英単語に書き換えましょう。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

パーマリンク(URL)が編集できたら、「公開」をクリックして固定ページを公開しましょう。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

お問い合わせフォーム(メールフォーム)を修正するには

固定ページのプレビュー確認後にお問い合わせフォーム(メールフォーム)のデザインや項目を修正したい場合は、WordPress(ワードプレス)管理画面の「お問い合わせ」にマウスポインターを合わせ、「コンタクトフォーム」をクリックして、作成済のお問合わせフォーム(メールフォーム)一覧を表示します。一覧が表示されたら、編集したいフォームのタイトル下にマウスポインターを合わせると出てくる「編集」をクリックすれば、お問い合わせフォーム(メールフォーム)を修正することができます。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

お問い合わせフォーム(メールフォーム)を削除するには

一度作成したお問い合わせフォーム(メールフォーム)を削除する場合も、WordPress(ワードプレス)管理画面の「お問い合わせ」にマウスポインターを合わせ、「コンタクトフォーム」をクリックして、作成済のお問合わせフォーム(メールフォーム)一覧を表示します。

表示された一覧のうち削除したいフォームの左にあるチェックボックスにチェックを入れ、「一括操作▼」をクリックして「削除」を選択し、「適用」ボタンをクリックすると、チェックの入ったフォームが削除されます。

WordPress(ワードプレス)超入門 お問い合わせフォームを設置しよう

お問い合わせフォーム(メールフォーム)でホームページを訪問した人とつながろう

お問い合わせフォーム(メールフォーム)をホームページに設置すると、こちらから一方通行で情報発信するだけでなく、ホームページを閲覧した人は「どんなことを聞きたいのか?」「どんな人なのか?」「どんな興味を持ってくれているのか?」といった情報を把握することができます。

お問い合わせフォーム(メールフォーム)を上手に活用して、ホームページの改善や集客につなげましょう!

株式会社コミュニティコムが運営するWordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップでは、弁護士・法律事務所・士業向け WordPress テーマや、歯科医院・歯医者さん向け WordPress テーマなど、 業種・用途特化のWordPressテーマを販売しています。もちろん新エディター「Gutenberg(グーテンベルク)」対応です。
>> コミュニティコムショップのWordPressテーマ一覧

また、1ヶ月間無料の月額サポートプランでの継続的なサポートや、制作代行オプションもご提供しております。
>> コミュニティコムショップのオプション一覧

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

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