50代初心者の僕にも出来た!「Contact Form 7」でワードプレスブログにお問い合わせフォームを設置する方法!「50代からのワードプレスブログ構築講座」

プラグイン導入と使い方

「オヤジビジネス.com」運営者の「白石泰敏」です!

本日も「50代からのワードプレスブログ構築講座」始めたいと思います。

 

この記事では、プラグイン「Contact Form 7」でワードプレスCocoonで作ったサイトにお問い合わせページを簡単に作る方法を解説しております。

 

「Contact Form 7」とは?

Contact form7はWordPressに問い合わせページを作る際に非常に便利なプラグインでとても簡単です。

 

下の図のように本ブログのフッターにお問い合わせを設置していますのでご確認してみてください。

 

本来、自分で問い合わせページを作成する場合にはHTMLやCSSの専門的な知識が必要になりますが、「Contact form 7」とワードプレス無料テーマCocoonを合わせれば、とても簡単にお問い合わせページを作ることができます。

 

ここでは下のようなお問い合わせフォームを作ります。

 

お問い合わせフォームを作るには、まず先に、お問い合わせフォーム用の「固定ページ」を作成する必要があります。

 

お問い合わせ用の固定ページを作って行きましょう。

 

お問い合わせ用の「固定ページ」を作成する

WordPressの管理画面(ダッシュボード)の左側メニューの「固定ページ」→「新規追加」をクリックして下さい。

 

 

「新規固定ページを追加」の画面が表示されますのでタイトルを追加」のところに「お問い合わせ」と入力し「公開」をクリックして下さい。

 

 

この段階で「お問い合わせフォーム」を設置するための「固定ページ」の準備が完了しました。
「固定ページ一覧」「お問い合わせ」ページができていることを確認しておいてください。

しかしこれでは、まだあなたのサイトに「お問い合わせ」フォームは表示されません。

次に「お問い合わせフォーム」用のプラグイン「Contact form7」をワードプレスにインストールします。

 

 

「Contact form7」のインストール

プラグインのインストール方法はどのプラグインも同じです。

 

ワードプレスの「ダッシュボード」から「プラグイン」➡️「新規追加」をクリック

 

 

「プラグイン追加」の画面が表示されたら、右上の検索窓に「Contact form7」入力します。

名前を入力するとプラグインの候補が表示されますので、よく見て正しいプラグインを選びましょう

使用中のWPバージョンと互換性あり」と書かれていないものは間違ったプラグインを選んだ可能性がありますので注意

 

 

「Contact Form 7」選んだら、「今すぐインストール」をクリックします。

 

 

クリックするとインストールが始まります。
インストールが終わると「有効化」と表示されますので「有効化」ボタンをクリック。
プラグインを有効化します。

 

有効化ボタンをクリックすると自然に画面が切り替わって「プラグインを有効化しました。」と表示されます。

プラグインの欄にインストールしたプラグインの名前が表示されていれば「Contact Form 7のインストールは完了です。

 

「Contact Form 7」の設定 

先程までの作業でメニュー覧にお問い合わせ(赤枠)という項目が追加されたことを確認して下さい。

 

 

その「お問い合わせ」から「新規追加」をクリックして下さい。

 

 

「コンタクトフォームを追加」という画面が表示されますので、
①タイトルに「お問い合わせ」と入力して
②「保存」をクリックして下さい。

 

 

画面の上部に「コンタクトフォームが作成されました」と表示されたらOK。

その下のほうに「ショートコード」が現れますので、そのショートコードをコピーして下さい。

 

 

ダッシュボードメニューの固定ページ一覧」をクリックしたら、先ほど作成した「お問い合わせ」がありますので、そのタイトル下の「編集」をクリックし編集画面を開きます。

 

 

「固定ページを編集」文章を入力欄に、
①先ほどコピーした「ショートコード」を貼り付け
「更新」をクリックしてください。

 

 

画面の上部に「固定ページを更新しました」というメッセージが表示されたらOKです。

 

これで、ショートコードの作成と設置の作業は完了です。

「お問い合わせフォーム」が無事完成しました。

次は「お問い合わせ」をサイトの一番下(フッター)に表示させる設定を行います。

 

 

「お問い合わせ」をサイトのフッターに表示する

左側メニュー外観」→「メニュー」をクリックして「メニュー画面」を表示して下さい。

 

まず、「新しいメニューを作成しましょう。」をクリックして新しいメニューを作ります。

「メニュー構造」のメニュー名に「フッターメニュー」と入力して最後に「メニューを作成」をクリック

 

 

「編集するメニューを選択:」で「フッターメニュー(フッターメニュー)」を選び、「選択」をクリック

固定ページ」の中の「お問い合わせ」にチェックを入れたら、「メニューに追加」をクリック

「メニュー設定」の「フッターメニュー」とにチェックを入れ、最後に「メニューを保存」をクリックして下さい。

 

するとメニュー構造の中に「お問い合わせ」の項目が出てきますから、「お問い合わせ」の項目をカーソルでドラッグして好きな位置に移動させてください。

 

 

場所が決まったら、最後に「メニューを保存」をクリックして保存しておきましょう。

 

 

これであなたのサイトにお問い合わせフォームが設置されました。

実際に自分のブログを確認してみましょう。

サイトの一番下に「お問い合わせ」の項目が表示されていると思います。
「お問い合わせ」の文字をクリックすると下記のようなお問い合わせフォームが出てくれば完了です。

まとめ

・「Contact form 7」はワードプレス無料テーマCocoonを合わせれば、とても簡単にお問い合わせページを作ることができるプラグインです。

 

・「お問い合わせフォーム」を設置するには「固定ページ」が必要になります。

 

・その固定ページに「コンタクトフォーム」のショートコードを貼り付けると完成です。

 

・あとは「外観」の「メニュー」でフッターに配置すればOKです。

 

 

タイトルとURLをコピーしました