初心者必見‼WordPressでお問い合わせフォームを簡単に設置する方法【Contact Form 7】

初心者必見‼Wordpressでお問い合わせフォームを簡単に設置する方法【Contact Form 7】

Wordpressでコンタクトフォームを設置するプラグインは様々あるのですが、数種類使ってみて一番良かったのは【Contact Form 7】だったので、今回は、この【Contact Form 7】のプラグインを設置する方法を解説していきます。

お問い合わせフォームが重要な理由

このようにお問い合わせフォームは、読者と運営サイトとの掛け橋の役割があるのでとても重要なのです。

もしお問い合わせフォームが無い場合、Google側に「このサイトにこんな広告を載せるな！」と報告されたらブログの評価が一気に下がって運営が難しくなるという事もあります。

なのでGoogleに対しても「ちゃんとお問い合わせフォームを設置しています！」というアピールにもなるので、SEOの向上につながるかもしれません。

お問い合わせフォームを設置する注意点

この3つを意識したお問い合わせフォームを作りましょう。

個人情報の項目は必要最低限にする

例えば個人情報は名前とメールアドレスで十分です。
住所や電話番号は基本必要ないと思います。
もちろんサービスの内容によっては必要な事もあるので、そこはユーザーの立場に立って教えても良いと思えるサービスの提供の時だけにしましょう。

その他入力項目も最小限にする

個人情報以外に、「このサイトは何で知りましたか？」「お使いのパソコンは何ですか？」など関係ない事や、アンケートが載せられていたりと、送信をするまでにステップが多すぎるのもNGです。

読者は早く送信をして、その回答が欲しいので、運営側の意図は必要ないものなのです。
また、入力項目が多いと途中で離脱する可能性もあるので、サイトの評価ダウンにも繋がり兼ねないのでここは最低限の入力項目だけにしましょう。

入力しやすいシンプルな設計にする

スマホでも入力しやすい「レスポンシブデザイン」をしっかり取り入れましょう。
近年はスマホやタブレットからのアクセスがPCを上回っているので、スマホ対応のデザインを心がける事は大切です。

また入力しやすいように入力項目の幅を大き目に取ったり、テキストのサイズも大きくすると読者にも優しいと思います。
少しでもストレスの無く、入力が出来るコンタクトフォームの設計を考えましょう。

WordPressにお問い合わせフォームを設置するプラグインなら「Contact Form 7」

WordPressには数多くのコンタクトフォームを作成できるプラグインがあります。
その中でも「Contact Form 7」は、日本製でカスタマイズがし易く、多くの企業で採用されている人気のお問い合わせフォームのプラグインです。
また、初心者でも設定が簡単な事も人気の理由です。

これを読んでもよく分からないと思いますが、お問い合わせフォームのプラグインでは安心でおすすめという事です。

WordPressのプラグイン「Contact Form 7」をインストールして設置する手順

「Contact Form 7」をインストールする

①管理画面サイドメニュー「プラグイン」→「新規追加」クリック

②キーワードに「Contact Form 7」と入力検索して「今すぐインストール」をクリック

③有効化をクリック

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

お問い合わせフォームを設定する

管理画面サイドメニュー「お問い合わせ」→「新規追加」をクリック

フォームの設定

①フォームの入力内容確認します。私は「題名」要らないので消しました。このままでもOKです。

②実際の表示はこんな感じになります。

メールの設定

①送信先：問い合わせがきた時に受け取るメールアドレスを設定する
②送信元：変更の必要なし。
③題名：メールの件名はあなたのブログ(サイト)名でOK
④追加ヘッダー：他のメールアドレスを設定できる
⑤メッセージ本文：受け取るメールの内容です。
お問い合わせ内容がそのまま本文に書かれます。
特に変更の必要はありません。

メッセージの設定

メッセージの設定も大切です。
送信が完了した際の読者への感謝のメッセージなど設定します。
またエラーが起きた時なども分かり易く伝えると親切です。
文言は基本的に変更する必要は無いですが、カスタムしたい場合は変更しましょう。

その他設定

基本的にここに入力は必要ありません。
最後に「保存」をクリックする。

ショートコードをコピーする

「保存」行うと、題名の下にショートコードが表示されます。
そのショートコードをコピーします。

お問い合わせフォームを固定ページに設置する手順

上記で設定が完了しても、お問い合わせフォームはまだ反映されません。
次に固定ページや投稿ページにショートコードを貼り付けてページを作成する必要があります。

お問い合わせページを作成する

「固定ページ」→「新規作成」
＊投稿ページでもどちらでもOKです。

ページにショートコードを貼り付ける

①題名：「例：お問い合わせ」
②テキストに切り替える
③先ほどコピーしたショートコードを貼り付ける
④「公開」をクリック
⑤パーマリンクを「contact」に変更して保存、再度⑥「更新」をクリック

グローバルメニューに設置する

「外観」→「メニュー」

メニューに加える

固定ページの「お問い合わせ」にチェックして「メニューに追加」クリック、「メニューを保存」をクリック

表示を確認してテストメールを送る

星月デザインの場合こんな感じです。グローバルメニューにお問い合わせが設置されています。

実際にメールが届くか確認する

本文は「これはテストです」と入力でOKです。
「送信」しましょう。
設定しているメールアドレスに届いているか確認します。

お問い合わせフォームをサイドバーに設定する方法

おお問い合わせフォームはサイドバーにも設置する事ができます。
常に目に入るので、コンバージョンは高くなると思います。
最終目標が「お問い合わせ」ならばここに設置するのも一つの手法です。

先ほどのショートコードをコピーする

管理画面「外観」→「ウィジェット」をクリック

サイドバーに入れたいウィジェットに「テキスト」を貼る

内容を入れ込む→保存

実際にサイトで確認してみるとこんな感じです。

初心者必見‼Wordpressでお問い合わせフォームを簡単に設置する方法【Contact Form 7】まとめ

お問い合わせフォームが重要な理由

お問い合わせフォームは、読者と運営サイトとの掛け橋の役割があるのでとても重要です。
また、Googleに対しても「ちゃんとお問い合わせフォームを設置しています！」というアピールにもなるので、SEOの向上につながります。

お問い合わせフォームを設置する注意点

• 個人情報の項目は必要最低限にする
• その他入力項目も最小限にする
• 入力しやすいシンプルな設計にする

「Contact Form 7」主な機能

• 1つのメールフォームに対して2種類まで自動返信メールが設定可能
• フォームの設定はボタンで設定可能
• 様々なスパム対策がなされている

「Contact Form 7」をインストールして設置する手順

• 「Contact Form 7」をインストールする
• お問い合わせフォームを設定する

お問い合わせフォームを固定ページに設置する手順

• お問い合わせページを作成する
• ページにショートコードを貼り付ける

グローバルメニューに設置する手順

• 「外観」→「メニュー」
• メニューに加える

表示を確認してテストメールを送る

• 実際にメールが届くか確認する

お問い合わせフォームをサイドバーに設定する方法

• ショートコードをコピーする
• 管理画面「外観」→「ウィジェット」をクリック
• ウィジェットに「テキスト」を貼る
• 内容を入れ込む→保存

ステップが多かったですが、「お問い合わせフォーム」はとても大切な設定なので必ず行いましょう！

＼一緒にWebデザイナーとして活躍するために勉強をしましょう！／