WEBページの運営する際、お問い合わせフォームは欠かせない機能といえるでしょう。
お問い合わせフォームにより、ユーザーからのフィードバックを得ることができ、ビジネスの発展にも寄与するなど、その存在の価値は計り知れないものがあります。
WordPressを使っていて、お問い合わせフォームを追加したいと思っている方は多いでしょう。
この記事では、WordPressでのコンタクトフォームの導入手順を明確に解説します。初心者向けにもわかりやすく説明しているので、参考にしてみてください。
Contact Form 7とは？
ウェブサイトの運営者やブロガーにとって、読者とのコミュニケーションは重要です。訪問者からの質問、コメント、お問い合わせを受けることは、サイトの信頼性を高め、コンテンツの品質向上につながります。そのため、ウェブサイトにコンタクトフォームを追加することは、必要不可欠なステップです。
WordPressウェブサイトに導入するコンタクトフォームの中でも、「Contact Form 7（コンタクトフォーム7）」という便利なプラグインを使用する方法を解説します。
Contact Form 7とは？
「Contact Form 7（コンタクトフォーム7）」は、WordPressユーザー向けの無料プラグインで、ウェブサイトにカスタマイズ可能なコンタクトフォームを追加するための優れたツールです。
このプラグインを導入することで、訪問者が簡単にウェブサイト管理者と連絡を取る手段を提供することができます。
Contact Form 7は、フォームの設計やカスタマイズを容易にし、さまざまな情報を収集するための強力な機能を提供します。その使いやすさと柔軟性から、多くのWordPressウェブサイトで広く利用されています。
Contact Form 7の特徴
「Contact Form 7」は多くのWordPressユーザーやウェブサイトオーナーに愛用されており、簡単に使える優れたコンタクトフォームソリューションとして広く認識されています。
以下はその主な特徴です。
- 柔軟性とカスタマイズ性: Contact Form 7は、フォームのフィールドを自由に設計でき、異なる情報収集のニーズに合わせて調整できます。テキスト、メール、日付、ファイルアップロードなど、さまざまなフォーム要素を簡単に追加できます。
- シンプルなマークアップ: フォームのマークアップはシンプルでわかりやすく、CSSをカスタマイズしやすいため、デザインを一貫性のあるものに保ちやすいです。
- メール通知と自動返信: ユーザーがフォームを送信すると、指定したメールアドレスに通知が届き、送信者には自動返信メッセージが送信されます。
- スパム対策: Contact Form 7には、スパムメッセージを防ぐためのCAPTCHAやAkismetなどのプラグインとの連携機能があり、ウェブサイトをスパムから保護できます。
- 多言語対応: 多言語ウェブサイトに対応しており、異なる言語のフォームを簡単に作成できます。
- 無料で利用可能: Contact Form 7はオープンソースのプラグインで、無料で利用できます。追加料金なしで高機能なコンタクトフォームを導入できるのが魅力です。
コンタクトフォームを導入する方法
Contact Form 7を使用してコンタクトフォームを追加するステップについて具体的に解説していきます。
STEP1:Contact Form 7のインストール方法
以下のステップに従ってWordPressサイトにContact Form 7をインストールしましょう。
1.WordPressダッシュボードにログイン: WordPressの管理画面にログインします。
2.プラグインセクションに移動: ダッシュボードにログインしたら、左側のメニューから「プラグイン」を選択します。
3.新規プラグインの追加: プラグインのセクションに入ったら、「新規追加」ボタンをクリックします。
4.検索: 右上の検索バーに「Contact Form 7」と入力します。すると、Contact Form 7プラグインが表示されるはずです。
5.インストール: 「Contact Form 7」を見つけたら、「今すぐインストール」ボタンをクリックします。
6.有効化: インストールが完了すると、「有効化」ボタンが表示されます。これをクリックしてプラグインを有効にします。
7.Contactフォームの設定: プラグインが有効になると、左側のメニューに「Contact」が表示されます。このメニューから「設定」を選択し、Contact Form 7の設定をカスタマイズします。
以上のステップを完了すると、Contact Form 7がWordPressサイトに正常にインストールされ、カスタマイズして使用する準備が整います。必要に応じて、フォームのフィールドを追加、編集し、設定を調整して、自分のウェブサイトに合ったコンタクトフォームを作成できます。
STEP2:Contact Form 7のコンタクトフォームを設定する
- WordPressダッシュボードにログイン: まず、WordPressの管理画面にログインしてください。
- プラグインの追加: 左側のメニューから「プラグイン」を選択し、「新規追加」をクリックします。
- プラグイン検索: 検索バーに「Contact Form 7」と入力し、Enterキーを押してください。
- プラグインのインストール: Contact Form 7が表示されたら、「今すぐインストール」をクリックします。そして、プラグインを有効化するためのリンクが表示されるので、それをクリックします。
- Contact Form 7メニュー: 左側のメニューに「Contact」が新たに追加されます。これをクリックして、コンタクトフォームの設定画面にアクセスします。
- 新しいフォームの作成: コンタクトフォーム設定画面で、既存のフォームが表示されます。新しいフォームを作成するには、「新しい追加」をクリックします。
- フォームの編集: 新しいフォームが作成されたら、それを編集します。デフォルトで基本的なフォームが用意されていますが、必要に応じてフォームフィールドを追加・編集しましょう。フォームの設計は自由度が高く、名前、メールアドレス、メッセージなど、必要な情報を収集できます。
- フォームのショートコード: フォームが完成したら、フォームの上部にあるショートコード（例:
エラー: コンタクトフォームが見つかりません。
- コンタクトページにフォームを追加: ウェブサイトのコンタクトページなど、フォームを表示したいページに移動し、WordPressエディタでショートコードを貼り付けます。ページを更新すると、コンタクトフォームが表示されるようになります。
これで、Contact Form 7を使用したコンタクトフォームが設定されました。必要に応じて、フォームのスタイルや設定をカスタマイズし、訪問者からの問い合わせを受ける準備が整いました。
STEP3: コンタクトフォームの管理画面へのアクセス
Contact Form 7を導入したら、次はそのフォームをウェブサイトに表示する手順です。ユーザーが簡単にお問い合わせできるように、以下のステップに従って進めましょう。
1.ウェブページの編集
まず、コンタクトフォームを表示したいウェブページにアクセスします。これは、お問い合わせフォームが掲載されるページを指します。通常、コンタクトフォームは「お問い合わせ」といったページに配置されますが、ウェブサイトのデザインに合わせて自由に選択できます。
2.ブロックまたはショートコードの追加 エラー: コンタクトフォームが見つかりません。
ウェブページの編集画面で、コンタクトフォームを表示したい場所にフォーカスしてください。Contact Form 7はブロックエディターやショートコードを使ってフォームを挿入します。通常、編集画面のツールバーに「Add Contact Form」ボタンがあるか、以下のようなショートコードを挿入します。
この際、「フォームのID」には実際のフォームのIDを入力してください。
3.変更を保存
フォームを追加したら、変更を保存しましょう。ウェブページにコンタクトフォームが表示されるようになります。
4.プレビュー
最後に、ウェブページをプレビューして、コンタクトフォームが正しく表示されていることを確認しましょう。もし問題があれば、再度修正して保存してください。
以上のステップに従うことで、コンタクトフォームをウェブサイトに簡単に表示できます。ユーザーはこれから簡単にお問い合わせを行えるようになります。
STEP4:通知メッセージのカスタマイズ
次に、ユーザーからのお問い合わせが届いた際に、送信者とウェブサイト管理者に送信される通知メッセージをカスタマイズしましょう。通知メッセージは、お問い合わせの内容や受信側への情報提供に重要です。
1.ダッシュボードへアクセス
WordPressのダッシュボードにログインし、左側のメニューから「お問い合わせ」を選択します。次に、コンタクトフォームの名前をクリックして編集画面に移動します。
2.通知タブの選択
コンタクトフォームの編集画面に移動したら、「フォーム・メール・メッセージ・その他の設定」というタブが表れます。「フォーム」では、フォームに含まれる項目を編集します。シンプルな問い合わせフォームにしたい場合、特に編集する必要はありません。
3.送信者（カスタマー）への通知メッセージの編集
まず、送信者に送信される通知メッセージを編集します。ここでは、送信者に送る内容を自由にカスタマイズできます。
まず、「メール」タブをクリックします。
例えば、送信者宛てに内容を使い分けたい場合は、「メール(2)を使用」にチェックを入れて、内容変更することも可能です。
4.通知メッセージの編集
次に、送信状態や入力項目のエラーなどを伝えるために、画面に表示される各種メッセージを編集できます。
例えば、メッセージが正常に送信された際は「ありがとうございます。メッセージは送信されました。」と表示されます。カスタマイズも可能です。
5.完了画面の作成
最後にその他の設定を行います。
・ログインユーザーのみがフォーム送信可能: 「subscribers_only: true」と入力
・フォーム送信後にメールが送付されず、完了メッセージのみ表示: 「demo_mode: on:」と入力
通知メッセージをカスタマイズしたら、変更を保存しましょう。これにより、お問い合わせフォームが送信されたときに、指定した通知が送信者と管理者に届きます。
6.テスト送信
最後に、設定した通知メッセージが正しく動作するかを確認するために、お問い合わせフォームをテスト送信してみましょう。通知が正常に届くことを確認してください。
通知メッセージのカスタマイズは、お問い合わせプロセスの重要な部分です。送信者と管理者が正確な情報を受け取ることで、効果的なコミュニケーションが可能になります。
STEP5:追加オプションの設定
追加オプションは、お問い合わせフォームに機能や設定を追加するための手段です。
以下のステップで設定を行います。
- ダッシュボードへアクセス
WordPressのダッシュボードにログインし、左側のメニューから「Contact」を選択します。次に、コンタクトフォームの名前をクリックして編集画面に移動します。 - 追加オプションのタブを選択
コンタクトフォームの編集画面に移動したら、上部のタブから「追加オプション」を選択します。これにより、追加オプションの設定画面が表示されます。 - 追加オプションの設定
ここでは、以下のような追加オプションを設定できます。- キャプチャの追加: ロボットスパムを防ぐためのキャプチャ（画像認証）を有効にします。
- ファイルのアップロード: ユーザーがファイルをアップロードできるように設定します。
- 再CAPTCHA: Google reCAPTCHAを使用して、より高度なスパム対策を行います。
- 日付フォーマット: 日付の表示形式を設定します。
- 言語設定: フォームの言語を選択し、表示テキストをカスタマイズします。
- 設定を保存
追加オプションを設定したら、変更を保存しましょう。これにより、お問い合わせフォームに選択したオプションが反映されます。 - フォームプレビュー
設定したオプションが正しく動作するか確認するために、フォームのプレビューを表示してテストしてみましょう。
追加オプションの設定により、お問い合わせフォームをより柔軟にカスタマイズできます。必要に応じて、スパム対策やファイルアップロードなどの機能を有効にし、ユーザーとのコミュニケーションを強化しましょう。
STEP6:お問い合わせフォームの詳細設定
Contact Form 7の詳細設定では、フォームの外観や機能をさらにカスタマイズします。以下のステップで設定を行います。
- フォーム編集画面にアクセス
WordPressのダッシュボードにログインし、左側のメニューから「Contact」を選択します。次に、詳細設定を行いたいコンタクトフォームの名前をクリックして編集画面に移動します。 - 詳細設定タブを選択
コンタクトフォームの編集画面に移動したら、上部のタブから「詳細設定」を選択します。これにより、詳細設定のオプションが表示されます。 - 詳細設定のカスタマイズ
以下の項目をカスタマイズできます。- メール: 送信されるメールの内容やフォームの返信先アドレスを設定します。
- メッセージ: 送信後の表示メッセージをカスタマイズできます。成功時メッセージやエラーメッセージを設定します。
- 詳細設定: 各種設定をカスタマイズします。詳細設定では、Ajaxを有効にするかどうかや、エラーメッセージのスタイルを設定できます。
- 設定を保存
詳細設定をカスタマイズしたら、変更を保存しましょう。これにより、お問い合わせフォームが設定に従って動作します。 - フォームプレビュー
詳細設定を行ったフォームのプレビューを表示して、フォームが正しく動作するか確認しましょう。
詳細設定により、お問い合わせフォームをビジネスやウェブサイトの要件に合わせて細かくカスタマイズできます。メールの設定やメッセージのカスタマイズ、詳細設定の変更を行い、ユーザーとのコミュニケーションを効果的に行いましょう。
Google Formsでお問い合わせフォームを作成する手順
次に、「Google Forms」を利用してお問い合わせフォームを作成する手順を簡潔かつ分かりやすく説明します。
- Google Formsの作成:
- Googleアカウントにログインし、Google Formsを開きます。
- 新しいフォームを作成します。質問を追加し、フォームのデザインをカスタマイズします。
- フォームの設定:
- 右上の歯車アイコンから「フォームの設定」を選択します。
- 「収集先」セクションで、回答データを保存するためのGoogleスプレッドシートを作成または選択します。
- フォームの公開:
- フォームが完成したら、右上の送信ボタン（飛行機のアイコン）をクリックし、リンクをコピーします。
- WordPressへの埋め込み:
- WordPressのダッシュボードにログインします。
- 「ページ」または「投稿」を選択し、新しいページまたは投稿を作成します。
- クラシックエディタを使用している場合：
- ページまたは投稿の編集モードに入り、「テキスト」タブを選択します。
- Google Formsのコピーしたリンクを貼り付けます。
- グーテンベルグエディタを使用している場合：
- ブロックエディタ内で「埋め込み」ブロックを追加します。
- Google Formsのリンクを埋め込むためにブロックに貼り付けます。
- 公開とテスト:
- ページまたは投稿を公開または更新します。
- フォームが正しく表示されることを確認し、テストしてみてください。
これで、Google Formsを使って作成したお問い合わせフォームがWordPressのページまたは投稿に埋め込まれ、訪問者がフォームを使用して問い合わせできるようになります。訪問者からの回答データは、Googleスプレッドシートに収集されます。
【実践編】WordPressは難しい！いつまで経っても操作に慣れないあなたへ
WordPressは難しいですね、という言葉を運用現場でよく耳にします。
一般的にWordPressは簡単で使いやすいプラットフォームと言われていますが、本当にそうなのでしょうか？
困っている方の意見を聞いていくうちに一つの結論に至りました。
「管理画面の見方がわからない」
ということです。
まずは管理画面の基本的な解説をしましょう。
左側のメニュー
ダッシュボードの左側には主要なメニューがあります。これらのメニューアイコンをクリックして、特定の操作や設定にアクセスできます。
一般的なメニューアイコンには以下のものがあります
ダッシュボード: 管理画面を表示します。
投稿: ブログ記事やニュースなどの投稿を管理します。
メディア: 画像やファイルのライブラリを管理します。
固定ページ: ウェブサイトの固定ページを管理します。
外観: テーマ、カスタマイズ、メニューなどの外観に関連する設定を管理します。
プラグイン: インストールされているプラグインを管理し、新しいプラグインを追加できます。
ユーザー: ユーザーアカウントの管理と設定を行います。
ツール: その他のツールや設定を管理します。
設定: ウェブサイトの基本設定、パーマリンク、セキュリティなどを管理します。
この中でまず「ページ」からスタートすると良いでしょう。
トップページはこのメニューから作成するケースがほとんどです。
ここを開いて、色々といじってみるとWordPressの使い方がわかるようになります。
右上のユーザーメニュー
ダッシュボードの右上には、現在のユーザーアカウントに関するメニューがあります。ここからプロフィールの編集、ログアウト、パスワードの変更などを行えます。
管理画面の使い方さえマスターしてしまえばあとは簡単です。
1.ページの追加
ウェブサイトの新しいページを作成するには、「ページ」→「新規追加」を選択します。タイトルとコンテンツを入力し、ページを公開または下書きとして保存できます。
2.投稿の追加
ブログ記事やニュースなどのコンテンツを追加するには、「投稿」→「新規追加」を選択します。タイトルと本文を入力し、カテゴリーやタグを選択して投稿を公開できます。
3.テーマのカスタマイズ
ウェブサイトのデザインをカスタマイズするために、テーマを選択および設定できます。外観 → テーマから新しいテーマを選択し、カスタマイズオプションでロゴ、色、フォントなどを調整できます。
4.メニューの設定
ウェブサイトのナビゲーションメニューを作成および編集できます。外観 → メニューから新しいメニューを作成し、ページやカスタムリンクを追加してメニューを構築します。
5.プラグインの追加
ウェブサイトの機能を拡張するために、プラグインをインストールできます。プラグインはダッシュボードの「プラグイン」セクションから追加できます。
6.設定の管理
ウェブサイトの基本的な設定、パーマリンク構造、ユーザーアカウント、セキュリティ設定などを管理できます。設定セクションを確認し、必要に応じて設定を調整します。
7.投稿やページの公開
投稿やページを公開することで、ウェブサイトのコンテンツが公開されます。公開ボタンをクリックして、コンテンツをウェブサイトに表示します。
WordPressは簡単に利用できるツールですが、入り口がわからずに苦労しているケースが多いように思えます。
まずは「固定ページ」からページを新規作成して、使い方をマスターしましょう！
まとめ
今回は、WordPressに問い合わせフォームを設置する方法を詳しく解説しました。
WordPressを活用することで、訪問者とのコミュニケーションを強化し、ユーザーの満足度向上に寄与できる素晴らしい機会です。問い合わせフォームを通じて、訪問者の質問や悩みを把握し、それに応じたサポートや情報提供ができます。
提供した2つの方法を活用し、自身のWordPressウェブサイトに問い合わせフォームを設置して、ユーザーとの対話を促進しましょう。訪問者とのコミュニケーションの機会を増やすことは、ウェブサイト運営において非常に重要です。
