WordPres(ワードプレス)で運用されているサイトに、連絡先情報としてコンタクトフォームを設置したいと思ってはいませんか?とてもシンプルで便利なプラグインとして「Contact Form 7」があります。今回はその設置方法と設定方法について、簡単に図解説したいと思います。

ビジネスサイトでなくても、今は連絡先情報をサイトに載せるのは必須でしょう。訪問された方の信頼感もアップします。簡単に設置できますので、初心者の方もぜひ挑戦しましょう。

連絡用コンタクトフォーム設置方法 Contact Form 7

1.Contact Form 7 のインストール

コンタクトフォーム7は、ワードプレスダッシュボードの「プラグイン」>「新規追加」から、「Contact Form 7」と入力して検索できます。下記を探して「今すぐインストール」をクリックします。

インストールが終わったら「有効化」をクリックします。

有効化されると、ダッシュボードに「お問い合わせ」というメニューが表示され、コンタクトフォームの設定ができるようになります。

2.「コンタクト」フォームの作成

今回は「コンタクト」という名称で、連絡用のコンタクトフォームを設置することにします。

1)「お問い合わせ」をクリック

「お問い合わせ」をクリックすると、インストール時点で「コンタクトフォーム1」という名称でサンプルのコンタクトフォームが作成されていると思います。これを改造して使うことにしましょう。

2)「コンタクトフォーム1」をクリック

「コンタクトフォーム1」をクリックすると、下記のフォーム編集画面となります。①でコンタクトフォームの名称を「コンタクト」に変更し、下部の「保存」をクリックします。

3)メール送信先の確認(変更)

コンタクトフォームのタブメニューから「メール」をクリックすると、下記のフォームが表示されるので、「送信先」枠のメールアドレスを確認します。自サイトの管理アドレスがセットされていると思います。もし変更が必要であれば変更し「保存」をクリックしてください。

たったこれだけの操作で、標準的なコンタクトフォームの作成ができました。

Contact Form 7の機能の詳細な設定方法についてはまた別で解説することにして、続けて、今作成した「コンタクト」フォームをサイトに配置する方法を説明します。

4)コンタクトフォームをサイトに配置する

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

作成したコンタクトフォームをサイトに設置するには、ショートコードを用います。Contact Form 7のショートコードは、

ダッシュボードの「お問い合わせ」を開き、

下記の赤枠部分をクリックすると選択状態にできますので、右クリックメニューから「コピー」をしてください。

②ショートコードを固定ページに設置する

ワードプレスのダッシュボードから、

固定ページをクリックし

新規追加をクリックします。

表示された固定ページの編集画面で、下記のように①タイトルに「コンタクト」と入力します。②本文に先ほどコピーしたショートコードを貼り付けます。

③固定ページ「コンタクト」を公開する

「公開する」をクリックして公開してください。

④「コンタクト」をメニューに配置する

ダッシュボードの「外観」>「メニュー」をクリックします。

メニューを選び、①固定ページの作成した「コンタクト」にチェックを入れて、②「メニューに追加」をクリックすると、メニューにコンタクトが追加されるので、③「メニューを保存」をクリックして確定します。

メニューをグローバルナビメニューとして配置していると、下記のように表示されます。

⑤実際のコンタクトフォームの画面

今回作成したコンタクトフォームの実画面は下記になります。名前とメールアドレスの入力を必須とした、連絡用フォームが出来上がりました。シンプルなものですが、 わかりやすくて必要十分です。

ビジネスサイトでなくても、今は連絡先情報をサイトに載せるのは必須でしょう。訪問された方の信頼感もアップします。簡単に設置できますので、初心者の方もぜひ挑戦しましょう。