ワードプレスのプラグイン「Contact Form 7」でお問い合わせフォームの作成方法!確認画面の設定も!

WRITER
 
この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

Webサイトを運営するなら、問い合わせフォームの作成は必須だといっても過言ではありません。

ですが、それを設置することは目的ではなく手段です。

大事なのは、サイトを訪れた方から問い合わせや連絡をいただけることです。

なので、問い合わせをしたいと思ってくださった方がストレスを感じることなく入力出来るようにシンプルなものがいいですね。

 

そんな問い合わせフォームを簡単に作成できるワードプレスのプラグイン「Contact Form 7」の設定方法などを紹介します!

「Contact Form 7」の設定方法

それでは、「Contact Form 7」の設定方法を紹介しますね。

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

左のメニューから「プラグイン」→「新規追加」を選択します。

すると以下のようなプラグインを新規追加する画面に遷移します。

右上の「キーワード」欄に「Contact Form 7」と入力すると、下の検索結果に「Contact Form 7」が表示されますので、「今すぐインストール」ボタンをクリックします。

すると「インストール」が始まります。

インストールが終了すると、ボタンが以下のように「有効化」に変わりますので、そのボタンをクリックしてプラグインを有効にします。

これでインストールは完了です。

 

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

プラグインを「有効化」すると、左のメニューに「お問い合わせ」が追加されています。

「お問い合わせ」→「新規追加」を選択。

すると以下のような画面が表示されます。

 

「フォーム」タブは、お問い合わせフォームを作成する画面です。

既に必要と思われる項目が設定されていますので、必要に応じて編集してくださいね。

私はそのままにしました。

 

「メール」タブは、メッセージの送り先、内容を設定する画面です。

こちらも既に必要な値が設定されていますので、必要に応じて編集してくださいね。

 

「メッセージ」タブは、ブログの訪問者がお問い合わせフォームで送信した時などに、「Contact Form 7」からの応答メッセージを設定する画面です。

自分が表示させたいメッセージに編集します。

ここで設定された応答メッセージは、このように表示されます。

応答メッセージはデフォルトで画面下に表示されますが、位置を変更したい場合は「 [response]」タグを「フォーム」タブのお問い合わせフォーム編集画面の好きな位置に入れましょう。

例えば一番上に表示したい場合は、このような感じです。

 

「その他の設定」タブは、お問い合わせフォームにカスタム設定を追加する画面です。

例えば、ログインしているユーザーだけにお問い合わせフォームを使えるようにしたい場合など、いくつかのモードを設定することができます。

現時点で設定出来るモードは

  • 購読者限定モード
  • デモモード
  • メールをスキップするモード
  • 検証としての承諾確認
  • Flamingoの設定
  • メッセージの保存機能の設定
  • JavaScriptコードの記述

です。

詳しくはこちらを参照してみてください。

ちょっと難しく感じるかもしれませんが、特別なことをする必要がなければ、ここは設定する必要はありません。

 

つらつらと書きましたが、こだわりが無ければ何も変更しなくても大丈夫です!

設定が完了したら、[保存]ボタンをクリックします。

すると画面上部に以下のようなメッセージが表示されますので、表示されているショートコードをコピーします。

 

次に、左のメニューから「固定ページ」→「新規作成」を選択し、固定ページの新規作成画面へ遷移します。

そして、

  • タイトルを入力
  • 先ほどコピーしたコードを貼り付け

し、[公開]ボタンをクリックします。

すると、このようなお問い合わせフォームが出来ていると思います。

 

迷惑メール対策

お問い合わせフォームを作成したけれど、迷惑メールが多くて困っている!という場合は、確認用の必須チェックボックスを設置することで迷惑メール対策ができます。

お問い合わせフォーム作成画面で、確認用の必須チェックボックスを設置したい場所にカーソルを合わせ、右上の[承認確認]ボタンをクリックします。

すると、以下のようなダイアログボックスが表示されるので、

  • 「同意条件」に表示したい文言を入力
  • オプションのチェックボックスを外す

を設定し、[タグを挿入]ボタンをクリックします。

すると、以下のようにお問い合わせフォームにタグが挿入されます。

[更新]ボタンをクリックすると、お問い合わせフォームにチェックボックスが追加されているはずです。

そして、チェックボックスにチェックを入れないと、[送信]ボタンが押せないようになっているはずです。

これを設定することで、入力途中でEnterキーをうっかり押してしまった時の送信ミスも防ぐことができます。

 

確認画面の作成方法

「Contact Form 7」は確認画面がありません。

これは日本特有の文化のようですが、確認画面が当たり前の文化ではそのまま送信されてしまうとびっくりしてしまいますよね。

やはり確認画面は欲しい!という場合は、プラグインを追加することでそれが可能になります!

 

プラグイン「Contact Form 7 add confirm」をインストールする

確認画面を追加するには、「Contact Form 7 add confirm」というプラグインを使用します。

「Contact Form 7」をインストールしたのと同じように、こちらのプラグインも「インストールし有効化」します。

すると、お問い合わせフォーム作成画面に「確認ボタン」「戻って編集ボタン」が追加されます。

 

確認画面を作成する

確認画面を作成するとありますが、追加された「確認ボタン」「戻って編集ボタン」をクリックし、表示されたダイアログの「ラベル」にボタンの名前を入力後[タグを挿入]ボタンをクリックするだけです。

ボタンを追加する場所(順番)は

  1. [confirm “確認”]
  2. [back “戻る”]
  3. [submit “送信”]

がおすすめです。

ボタンが追加出来たら、[保存]ボタンをクリックします。

すると、お問い合わせフォームの[送信]ボタンが[確認]ボタンに変わっているはずです。

 

試しに必要事項を入力し、[確認]ボタンをクリックすると、以下のような確認画面(画面遷移ではありません)となります。

そして、ボタンも[戻る][送信]となっているはずです。

ここで[戻る]をクリックすると再度入力画面へ、[送信]ボタンをクリックすると入力した内容が送信されます。

 

まとめ

プラグイン「Contact Form 7」を使ってお問い合わせフォームを作成する方法を紹介しました。

確認画面が欲しい場合は、プラグイン「Contact Form 7 add confirm」を使ってみてくださいね。

 

 

 

この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。

Copyright© トラベラーズサロン , 2018 All Rights Reserved.