WordPressで問い合わせページの作り方

11月にホームページを公開しましたが、中身はまだまだ未完成。問い合わせページ作成の記録です。

どうやってWordPressで問い合わせページを作るか?

WordPress初心者としては、ネットの情報が心強い味方です。まずはGoogle で「wordpress 問い合わせページ作成」というキーワードで検索しました。多数のサイトがヒットしましたが、割り切って上位10サイトで調べてみました。

すると、ほとんどがプラグインを使った作成方法の紹介でした。紹介数の多いものから挙げていきます。1サイトで複数のプラグインを紹介しているものもあるためサイト合計数は10を超えています。

  1. contact form 7     ・・・・・  10サイト
  2. Jetpack Contact Form  ・・・・・  3サイト
  3. Visual Form Builder   ・・・・・  3サイト
  4. MW WP Form          ・・・・・  2サイト
  5. Gravity Forms       ・・・・・  2サイト
  6. Typeform        ・・・・・  1サイト
  7. Trust Form        ・・・・・  1サイト

問い合わせページ作成ツールのお勧めは、contact form 7 か?

この結果から “contact form 7″を使用した方法がダントツでお勧めのようです。まずは、”contact form 7″に的を絞って調べてみました。

  1. 事前準備はインストールと有効化の2点
  2. 管理画面からフォームの作成ができる
  3. 初期設定で所定の項目が設定されている
  4. 入力内容はカスタマイズできる
  5. 問い合わせ先にメール通知できる
  6. 問い合わせ元へ自動返信メールを送れる
  7. メールフォームにはラジオボタン・ドロップダウンメニューなどが使用できる
  8. 問い合わせ時の確認画面はない
  9. フォームの内容を変更するにはHTMLを編集する

導入までの手順も簡単そうで、所定の項目でよければ初期設定のまま使えそうなので、”contact form 7″を使って問い合わせページを作ってみることにしました。使ってみて不具合があれば、そこからまた検討してみます。

WordPressの問い合わせページ作成手順(contact form 7編)

“contact form 7″を使った問い合わせページの作成方法です。

1.”contact form 7″のダウンロード

最初に”contact form 7″のホームページからダウンロードしてきます。

ダウンロード元 : https://ja.wordpress.org/plugins/contact-form-7/

画面中央の絵の右下にある「ダウンロード」のボタンをクリックします。

この時点では、次のファイルがダウンロードできました。

contact-form-7.5.1.1.zip

2.プラグインのインストール

2番目にWordPressに”contact form 7″をインストールします。

① WordPressの管理メニューから「プラグイン」をクリックします。

②右側にプラグインの画面が表示されるので、タイトル右にある「新規追加」をクリックします。

③「プラグイン追加」画面から画面中央にある「ファイルを選択」をクリックして、上でダウンロードしたファイルを指定します。

④最後に「プラグインを有効化」をクリックします。

⑤すると、WordPressの管理メニューに「お問い合わせ」が追加できました。

3.”contact form 7”のフォーム編集

3番目に問い合わせページの画面編集を行います。”contact form 7”を有効化した時点でテンプレートが作られていますので、これを使っていきます。

管理メニューの「お問い合わせ」をクリックすると、「コンタクトフォーム1」というタイトルでテンプレートが表示されるので、これを使って編集していきます。

①「コンタクトフォーム1」には、次の項目が設定済です。今回はこの設定のまま使おうと思います。

  1. お名前
  2. メールアドレス
  3. 題名
  4. メッセージ本文
  5. 送信ボタン

②ただ1点、タイトルを「お問い合わせ」に変更してみました。

以上でフォームの編集を終わりにします。

フォームへの項目追加や機能の追加は別に機会に調べてみたいと思います。

続いて、ホームページへ問い合わせページを追加します。

4.問い合わせページの追加

WordPressで問い合わせページを作るには、固定ページを作成し、その中にショートコードを張り付けるだけです。

①問い合わせ用の固定ページを作成します。タイトルを「問い合わせ」として、内容のショートコードを張り付けます。ショートコードというのはフォーム編集の画面中にあったコードです。

ここでは、

という値になります。

以上で問い合わせのページが作成できます。これをメニューで定義すれば画面表示完了です。

下のようなデザインの問い合わせページが作れました。

5.WordPressの問い合わせページと受信したメール

“contact form 7”の問い合わせ画面に入力したサンプルです。

この時に受信したメールはこのようなものが届きます。

以上で、WordPressでcontact form 7 を使用した問い合わせページの作成を終わります。

ホームページ記載の内容で気なる点などありましたら、問い合わせページからご連絡いただけると幸いです。

問い合わせページは こちらです。

問い合わせページに飛びます