こんにちは "osaboo"
です。"@osaboo_Bot"
Contact Form 7の使い方｜初心者でもできるお問い合わせフォームの作り方【画像つき解説】
WordPressにプラグイン「Contact Form 7」を使った「お問い合わせフォーム」を設置する方法を初心者さん向けにご紹介します。
QuestionContact Form 7（コンタクトフォーム セブン）ってどうなの？
「WordPressにお問い合わせフォームを設置したいけど、どうすればいいの？」
そんな方におすすめなのが、無料で使えるプラグイン「Contact Form 7（コンタクトフォーム セブン）」です。
一昔前？は…プラグインを使うと遅くなる？！等の懸念が多くありましたが全然大丈夫です。
（当サイトで検証）
それなら、簡単で楽な方法がベストですよね。
この記事では、Contact Form 7のインストールからフォーム作成・設置方法までを画像つきでやさしく解説していきます。
「とにかくカンタンにお問い合わせページを作りたい！」という初心者さんは、この記事を見ながら進めれば大丈夫！おしゃれでしっかり機能するフォームを完成させましょう！
注意 WordPressテーマにより向き不向きがあります！！
AFFINGER6を使っている方にはおすすめです。ちなみに、SWELLをお使いの方は「WPFome」がおすすめです。
こんな方におすすめ！
- WordPress初心者で、お問い合わせフォームを作りたい
- プラグイン「Contact Form 7」の使い方がよくわからない
- HTMLやコードに自信がなくてもフォームを作りたい
- シンプルで使いやすいお問い合わせフォームを設置したい
- 実際の画面を見ながら手順を確認したい
この記事でわかること！
- Contact Form 7のインストールと有効化の方法
- お問い合わせフォームの作成手順（画像つきでわかりやすく解説）
- 作ったフォームを固定ページや投稿・メニューに設置する方法
- 送信完了メッセージやボタンの文言を変更する方法
それではご覧ください。
目次 "Contents"
Contact Form 7とは？
Contact Form 7（コンタクトフォーム セブン）は、WordPressでお問い合わせフォームを作るための定番プラグインです。
無料で使えるのに、必要な機能がしっかりそろっており、世界中のユーザーに長く愛されています。
主な特徴はこちら
- 完全無料で利用できる
- 軽量でサイトの表示スピードを邪魔しない
- シンプルなフォームならすぐに作れる
- HTMLやショートコードで柔軟にカスタマイズできる
- reCAPTCHA（スパム防止機能）も設定可能
「複雑な機能はいらないから、問い合わせページだけサクッと作りたい！」という方には、ぴったりのプラグインです。
他のプラグインとの違いは？
最近では「WPForms」や「Fluent Forms」などのビジュアル操作できるフォーム作成ツールも人気ですが…
Contact Form 7はとにかく軽くてシンプル、WordPressに慣れてきた方にもカスタマイズしやすいのが強みです。
Contact Form 7の導入方法
まずは、Contact Form 7をインストールして有効化しましょう。この作業は3分ほどで完了します！
手順は次の通りです。
- WordPress管理画面に『ログイン』します。
- 『プラグイン → プラグインを追加』をクリックします。
- 検索ボックスに『Contact Form 7』と入力します。
- 『今すぐインストール』をクリックします。
- インストールが完了したら『有効化』をクリックします。
- 「プラグイン」画面で『自動更新を有効化する』をクリックします。
Contact Form 7のインストールと有効化
WordPress管理画面のダッシュボードからプラグインを新規に追加します。
Menu『WordPress管理＞ダッシュボード＞プラグイン＞プラグインを追加』をクリックします。
「プラグインを追加」画面で「プラグインの検索」窓に『Contact Form 7』と入力します。
検索結果から、「Contact Form 7」を選択します。
プラグインのカード領域にある『今すぐインストール』→『有効化』ボタンの順にクリックします。
有効化が完了すると以下のようにインストール済みプラグインの欄に「Contact Form 7」が追加されます。
『自動更新を有効化』をクリックします。（任意）
自動更新が有効になった状態です。
インストールと有効化が完了すると、 WordPress管理画面のダッシュボードに『お問い合わせ』というタブメニューが追加されます。
お問い合わせフォームを作成する方法
プラグインを有効化すると、最初からサンプルのフォームが1つ用意されています。
まずはそのフォームをベースに、必要に応じてカスタマイズしてみましょう。
STEP1
フォーム一覧を開く
Menu『WordPress管理＞ダッシュボード＞お問い合わせ＞コンタクトフォーム』をクリックします。
「コンタクトフォーム」画面が表示されます。
コンタクトフォーム一覧から『コンタクトフォーム1』をクリックします。
STEP2
フォームの内容を確認・編集する
「コンタクトフォームの編集」画面が開き、最初から用意されている「コンタクトフォーム1」の内容を確認・編集できるようになります。
フォーム設定
デフォルトでは以下のように設定されます。
フォームの構成がHTML風のコードで表示されます。
デフォルトで表示されるラベルは以下のようになります。
各項目のラベルを変更できます。
ラベルを変更したい場合は、<label>〇〇← 〇〇を任意に変更できます。
| デフォルトのラベル | ラベルの変更例（英文） |
|---|---|
| 氏名 | Name |
| メールアドレス | Email Address |
| 題名 | Subject |
| メッセ字本文（任意） | Message (optional) |
| 送信 | Send |
詳しくはこちらをご覧ください：フォームのテンプレートを編集する
メール設定
デフォルトでは以下のように設定されます。
メールの設定では、CC・BCC が追加できます。
詳しくはこちらをご覧ください：メールのセットアップ
メッセージ設定
デフォルトでは、以下のように設定されます。
メッセージの内容を変更できます。
詳しくはこちらをご覧ください：メッセージを編集する
その他の設定
デフォルトでは、以下のように設定されます。
その他の設定では、以下のような設定ができます。
- 購読者限定モード
- デモモード
- メールをスキップする
- 検証としての承諾確認
- Flamingo の設定
- メッセージ保存の抑制
- JavaScript コード
詳しくはこちらをご覧ください：その他の機能
補足
お問い合わせフォームは、自動で作成されたままでもOKです。
あまり編集しない方が良いと思います。
お問い合わせフォームを固定ページに設置（基本）
この章では、Contact Form 7で作成した「お問い合わせフォーム」を固定ページに設置する（埋め込む）方法をご紹介します。
Contact Form 7では、ショートコードを使って簡単に固定ページへ設置できます。
手順は次の通りです。
- Contact Form 7で作成した「お問い合わせ」フォームのショートコードをコピーします。
- お問い合わせ用の固定ページを新規に追加します。
- お問い合わせ用の固定ページにショートコードをペーストします。
- お問い合わせ用の固定ページを公開します。
- Contact Form 7で作成した「お問い合わせ」フォームのショートコードをコピーします。
Menu『WordPress管理＞ダッシュボード＞お問い合わせ＞コンタクトフォーム』をクリックします。
前章で、作成した「コンタクトフォーム1」の『ショートコード』をコピーします。
- お問い合わせ用の固定ページを新規に追加します。
お問い合わせ用の固定ページを用意します。
Menu『WordPress管理＞ダッシュボード＞固定ページ＞固定ページを追加』をクリックします。
固定ページのエディター画面が表示されます。
空の固定ページにタイトルに名前を入力します
この記事では『お問い合わせ』と入力します。
- お問い合わせ用の固定ページにショートコードをペーストします。
ブロック挿入ツールを切り替え『ショートコード』ブロックを挿入します。
ブロック挿入ツールの切り替えが、わかりにくい方はクリックしてご覧ください。
『ショートコード』をクリックします。
Contact Form 7で作成した「お問い合わせ」フォームのショートコードをペースト（赤矢印部）します。
- お問い合わせ用の固定ページを公開します。
右上の『公開x2』をクリックします。
以下のように表示されればOKです。
確認メールを送ってみよう！
フォームの設定と設置が終わったら、実際にお問い合わせを送信して、メールが正しく届くかを確認しましょう。
コンタクトフォームからテストメールを送信
メール着信を確認
お問い合わせフォームをメニューに設置（一般的）
お問い合わせフォーム（固定ページ）は、メニューに設置することができます。
よく見かけるパターンなので簡単にご紹介します。（当サイトでも採用しています）
手順は次の通りです。
- 編集するメニューを選択する
- 「固定ページ：お問い合わせ」にチェックを入れる
- 『メーニューに追加』ボタンをクリックする
- メニューの並び順を整える
- 『メニューを保存』ボタンをクリックする
Menu『WordPress管理＞ダッシュボード＞外観＞メニュー』をクリックします。
❶〜❺を処理します。
お問い合わせフォームをウィジェットで設置（ダイレクト）
お問い合わせフォームは、ウィジェットで設置することもできます。
お問い合わせフォームのショートコードを利用できるウィジェット『00_AFFINGERカスタムHTML』or『カスタムHTML』にペーストしてサイドバーやフッター等のウィジェットエリアにお問い合わせフォームをダイレクトに表示させることができます。
簡単な手順は以下の通りです。
Menu『WordPress管理＞ダッシュボード＞外観＞ウィジェット』をクリックします。
利用できるウィジェットから『00_AFFINGERカスタムHTML』or『カスタムHTML』を選択して、ウィジェット配置エリアを選んで追加します。
この記事では以下のように追加します。
『00_AFFINGERカスタムHTML』→『サイドバーウィジェット』→『ウィジェットを追加』
『コンタクトフォーム1』の『ショートコード』を『00_AFFINGERカスタムHTML』にペーストします。
（タイトルは任意です）
プレビューで確認すると、サイドバーに設置した場合は以下のように表示されます。
まとめ！Contact Form 7の使い方｜初心者でもできるお問い合わせフォームの作り方【画像つき解説】
AFFINGER6でWordPressにプラグイン「Contact Form 7」を使った「お問い合わせフォーム」を設置する方法をご紹介しました。アフィリエイトブログの運営には必須となるページです。プラグインを使ったとても簡単な方法なので …ぜひトライしてください。この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／