WordPressでコンタクトフォームを追加する2つの方法!スパム対策も紹介

CATEGORY

dejamブログ運営局

dejamブログ運営局

    目次

無料で改善案も入手できるLPOツール「dejam」。ヒートマップ、Web接客、プロジェクト管理、改善ナレッジなど盛りだくさん!

WordPressにコンタクトフォームを設置したほうがいい理由


WEBサイトを運営する場合は、問い合わせ用のフォームを用意しておきましょう。その理由は、サイト訪問者からの連絡の窓口になるからです。

また、問い合わせフォームがあれば企業からの仕事依頼の窓口にもなり、WEBサイト自体の信頼感の向上にもつながります。さらには、Googleアドセンスなど、広告の審査に通りやすくなる場合もあります。

本記事では、WordPressでコンタクトフォームを追加する方法をご紹介していきますので、ぜひ参考にしてください。

WordPressでコンタクトフォームを設置する方法


WordPressにコンタクトフォームを設置するには、いくつかの方法があります。自分ですべて作る方法もありますが、その場合は「HTML」や「CSS」、「PHP」の知識が必要になります。

手軽に設置する方法としては、WordPressのプラグインを利用することが挙げられます。プラグインを用いることで、WordPressにさまざまな機能を簡単に追加できます。

また、プラグインを使わない場合には、Googleフォームなど外部の機能を利用する方法もあります。以下に、それぞれの作成方法について詳しく見て行きましょう。

プラグイン「Contact Form 7」を使う

「Contact Form7」は、コンタクトフォームを作成できるWordPressのプラグインです。

フォームに、テキストや数値、日付やチェックボックス、ラジオボタン、メニューなど、質問項目を簡単に設置できます。

また、1つのフォームに2種類まで自動返信メールが設定できます。固定ページや投稿画面への設置も、ショートコードで手軽に設定でき、さまざまなカスタマイズも可能です。

Googleフォームを使う

Googleフォームは、Googleが提供している無料のアンケートツールです。

Googleフォームを利用することで、プラグインをインストールする必要がなく、サイトに負荷をかけません。

また、プラグインはアップデートする場合がありますが、Googleフォームであれば更新などの管理が不要です。

プラグインでコンタクトフォームを作成する手順6ステップ


ここからは、「Contact Form7」のプラグインを利用し、コンタクトフォームを設置する手順を詳しく紹介していきます。

わずかな時間で設定でき、簡単にお問い合わせフォームを作成できますので、手順を覚えておくと良いでしょう。

コンタクトフォームを作成する手順1:「Contact Form 7」のインストールと有効化

まず初めに、「Contact Form7」のプラグインをインストールします。

WordPressの管理画面にログイン後、画面左のメニューから「プラグイン」をクリックします。次に 「新規追加」をクリックするとプラグインの追加画面に変わります。

キーワード欄に「Contact Form7」と入力し、検索結果の横に表示される「今すぐインストール」をクリックし、インストールが終了したら「有効化」を押します。

コンタクトフォームを作成する手順2:問い合わせフォームの管理画面を開く

WordPressの画面左メニューの「お問い合わせ」をクリックし、「コンタクトフォーム1」と設定します。

次に、タイトルの下に出てくる「フォーム」「メール」「メッセージ」「その他の設定」というタブの中から、「フォーム」をクリックします。

ここでは、コンタクトフォームの項目を編集できます。あらかじめ「お名前」「メールアドレス」などの基本的な項目が設定されたフォームが用意されています。また、必要に応じて項目の編集ができます。

コンタクトフォームを作成する手順3:メールの設定をする

「メール」タブをクリックすると、フォームが送信される際に送られるメールの内容の確認および編集ができます。

フォームで入力した内容を反映するために「your-email」「your-name」と設定してください。

画面下部の「メール(2)を使用」にチェックを入れると、2つ目のメールを設定できます。この機能で、「1つは自分宛」「もう1つのメールは送信者宛」といった使い分けもできます。

コンタクトフォームを作成する手順4:メッセージの設定をする

次に、メールタブの横にある「メールの設定」をクリックします。メッセージの設定では、状況に応じて画面に表示されるメッセージを編集できます。

例えば、入力内容に不備が見つかった際は「入力内容に問題があります。確認して再度お試しください。」と表示されます。

必須項目が入力されていない場合の注意メッセージや、メッセージの送信に成功した場合のお礼メッセージなどを編集できます。

コンタクトフォームを作成する手順5:その他の設定をする

「その他の設定」をクリックすると、コードを入力して追加設定を行う画面に切り替わります。

例えば「subscribers_only: true」を入力すると、ログインユーザーのみがフォームの送信ができるようになります。

他には完了メッセージのみを表示し、メッセージは送信されない「demo_mode: on:」などがあります。必要な設定が完了したら「保存」をクリックして終了です。

コンタクトフォームを作成する手順6:固定ページに反映させる

コンタクトフォームの設定をしたら、固定ページに反映させます。</strong></mark>画面の左メニューから「お問い合わせ」を選択し、フォームタイトルの下の「ショートコード」をコピーします。

次に、左メニューの「固定ページ」「新規追加」をクリックします。「新規固定ページを追加」の画面が表示されるので、コピーしたショートコードを本文に貼り付けます。

それから「プレビュー」を押すとフォームの確認ができ、「下書き保存」や「公開」をクリックして保存できます。

問い合わせフォームはカスタムも可能

「コンタクトフォームの編集画面」から、コンタクトフォームのさまざまなカスタマイズができます。

例えば、テキストを設定し、コンタクトフォームの入力欄に文字を表示させることができます。

また、色々な入力項目を追加することも可能で、ラジオボタンやチェックボックス、ドロップダウンメニューも設定できます。他にも、数値や日付の入力欄を追加し、上限や下限といった条件も設定できます。

Googleフォームでコンタクトフォームを作成する手順6ステップ

ここまで、「Contact Form7」のプラグインを利用したコンタクトフォームの作成方法の説明をしてきました。

続いて、Googleフォームを利用したコンタクトフォームの作成手順を説明していきます。Googleにログインする必要があるので、事前にGoogleアカウントを取得しておきましょう。

コンタクトフォームを作成する手順1:「お名前」の項目を作る

まずは、GoogleフォームのWEBサイトを開き、「Googleフォームを使ってみる」を選択します。

画面が切り替わるので、表示された「新しいフォームを作成」を押します。「無題のフォーム」が表示されますので、ここでコンタクトフォームを作成します。

まずは、名前の入力項目を用意します。項目右上のリストから「記述式」を選択し、その左の項目名に「お名前」と入力し、最後に、右下の「必須」をクリックし有効化します。

コンタクトフォームを作成する手順2:「メールアドレス」の項目を作る

次にメールアドレスの入力項目を作ります。

まずは項目を増やす必要があるので、画面右端のアイコンを利用します。一番上の「〇に+」のアイコンが追加ボタンです。クリックするとお名前の項目の下に新しい項目が追加されます。

前述の「お名前」の項目と同じように、右上で「記述式」を選び、その左側の項目名に「メールアドレス」と入力し、最後に、右下の「必須」をクリックして有効化します。

コンタクトフォームを作成する手順3:「題名」の項目を作る

続いて、題名の項目を作成します。題名の項目も、今までの項目と同じ方法で追加します。まずは追加ボタンで項目を追加します。

追加された項目の右上で「記述式」を選び、その左側の項目名に「題名」と入力します。最後に、右下の「必須」をクリックして有効化します。

コンタクトフォームを作成する手順4:「メッセージ本文」の項目を作る

問い合わせ内容のメッセージ本文を入力する項目を作成します。今まで同様に、追加ボタンで項目を追加します。

メッセージ本文は長文でも入力できるように、追加された項目の右上で「段落」を選びます。左側の項目名に「メッセージ本文」と入力します。

最後に、右下の「必須」をクリックして有効化します。

コンタクトフォームを作成する手順5:フォームタイトルを入力する

全ての入力項目を作成したら、フォームのタイトルを入力します。一番上の「無題のフォーム」をクリックすると、文字を入力することができます。

たとえば、「お問い合わせ」など、分かりすいタイトルに変更しても良いでしょう。

コンタクトフォームを作成する手順6:WordPressに貼り付ける

コンタクトフォームのタイトルを決定したら、右上にある「送信」をクリックします。「フォームを送信」という画面がポップアップするので、送信方法の「<>」をクリックします。「コピー」をクリックすると「HTMLを埋め込む」欄のリンクがコピーされます。

最後に、WordPressの管理画面を開き、左メニューから「固定ページ」>「新規追加」に移動します。

タイトルに「お問い合わせ」と入力し、HTML編集でコピーしたリンクを貼り付けて完成です。

覚えておくと良いコンタクトフォームのポイント4つ


ここまで、「Contact Form7」と「Googleフォーム」を利用して固定ページでお問い合わせのフォームを作成する方法をご説明しました。

しかし、固定ページを作成しただけではリンクがないため、WEBサイト閲覧者がアクセスできません。

続いて、コンタクトフォームを公開する際のポイントを4つご紹介いたします。Webサイト上にリンクを作る方法やスパム対策など、押さえておきたいポイントですので、参考にしてください。

コンタクトフォームのポイント1:スパム対策

コンタクトフォームを公開しWEBサイトを運営していると、スパムメールが大量に来る可能性がありますのでスパム対策を実施しましょう。

「Akismet」は「Contact Form7」と連携できるWordPressのプラグインです。スパムメールなどを、自動的に専用のフォルダに振り分けてくれるプラグインで、多くのサイトで使用されています。

他には、Googleが提供しているスパム対策の「reCAPTCHA」があります。「私はロボットではありません」のチェックボックスなどで良く知られています。

コンタクトフォームのポイント2:サイドバーに追加する方法

サイドバーにコンタクトフォームを設置するには、管理画面の左側メニューの「お問い合わせ」>「コンタクトフォーム」に移動し、追加したいフォームのショートコードをコピーしておきます。

その後「外観」>「ウィジェット」に移動し、利用できるウィジェットの中から「テキスト」をドラッグし、サイドバーの表示したい場所へドロップします。

次に「テキスト」をクリックし、タイトル名をわかりやすく「お問い合せ」と入力し、本文内にショートコードを貼り付けます。最後に、「保存」し「完了」をクリックすれば追加完了です。

コンタクトフォームのポイント3:グローバルナビゲーションに追加する方法

コンタクトフォームをグローバルナビゲーションに設置するには、管理画面の左メニュー「外観」>「メニュー」に移動します。

メニュー構造の「メニュー名」に、分かりやすく「グローバルナビ」と入力します。左側の固定ページから、今回作成した「お問い合せ」にチェックし、「メニューに追加」をクリックします。

WordPressのテーマによって異なる場合がありますが、メニューの位置は「メイン」にチェックし、「メニューを保存」を押すと、グローバルナビゲーションにフォームが反映されます。

コンタクトフォームのポイント4:コンタクトフォームのリンクを追加する方法

固定ページを作っただけではWEBサイト上にリンクがないため、アクセスはできません。

まずメニューバーを作成し、固定ページのリンクを追加しましょう。この時、グローバルナビメニューや、サイドメニューに追加するほか、投稿画面にもコンタクトフォームのリンクを追加できます。
WEBサイト閲覧者がアクセスしやすいところに、コンタクトフォームへのリンクを追加することを忘れないようにしましょう。

WordPressにコンタクトフォームを追加してみよう

本記事では、WordPressにお問い合わせ用のコンタクトフォームを作成する方法についてご紹介しました。

WordPressにコンタクトフォームを設置することで、WEBサイト閲覧者からの貴重な意見や仕事のオファーをもらえるなど、ユーザーや企業と接点を増やすことができます。

ぜひ、今回紹介した方法を参考に、WordPressにコンタクトフォームを設置してみてはいかがでしょうか。

無料で改善案も入手できるLPOツール「dejam」。ヒートマップ、Web接客、プロジェクト管理、改善ナレッジなど盛りだくさん!

関連記事も読む