当ページのリンクには広告が含まれています。

お問い合わせフォーム【WordPressプラグイン:Contact Form 7で設置!】

お問い合わせフォーム【WordPressプラグイン:Contact Form 7で設置!】

プラグイン:Contact Fom 7で超簡単!

最速でお問い合わせフォームを作る方法はこれ!

こんにちは "osaboo"です。"@osaboo_Bot"

WordPressにプラグイン「Contact Form 7」を使った「お問い合わせフォーム」を設置する方法を初心者さん向けにご紹介します。

WordPressプラグイン:Contact Form 7

お問い合わせフォームの設置は、Contact Form 7を使えば超簡単です。

一昔前?は…プラグインを使うと遅くなる?!等の懸念が多くありましたが全然大丈夫です。
(当サイトで検証)
それなら、簡単で楽な方法がベストですよね。

注意 WordPressテーマにより向き不向きがあります!!
AFFINGER6を使っている方にはおすすめです。ちなみに、SWELLをお使いの方は「WPFome」がおすすめです。

こんな方におすすめ!

  • 「お問い合わせ」のページ(サイトに必要な固定ページ)を簡単に作りたい。
  • AFFINGER6に適したお問い合わせフォームの設置方法は?
  • そもそもお問い合わせフォームって何?

この記事でわかること!

  • お問い合わせフォームとは?
  • お問い合わせフォームの作り方:Contact Form 7
    1. Contact Form 7の導入方法
    2. お問い合わせフォーム作成・編集
  • お問い合わせフォームを固定ページに設置(基本)
  • お問い合わせフォームをメニューに設置(一般的)
  • お問い合わせフォームをウィジェットで設置(ダイレクト)
  • まとめ!

それではご覧ください!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

お問い合わせフォームとは?

Contact Form 7

ブログ用のお問い合わせフォームは、読者との直接の対話を通じてコミュニケーションを促進し、フィードバックの収集や提携の機会の発見を可能にすると同時に、読者の要望に応え、問題解決とサポートを迅速に行い、ビジネスチャンスを見逃さずに受け入れ、プライバシーを保護しながら読者の参加を奨励し、ブログのコミュニティ感を高める重要なツールです。

ちょっと難しいのでポイントを簡単に…

osaboo
osaboo
  1. 読者(個人・企業)と直接コミュニケーションがとれる
    • 「指摘・質問・提携案件」等を受け、回答することで「コミュニケーション・フィードバック・信頼性」が向上する。
  2. メールアドレスを公開しなくても済む(コミュニケーションが取れる)
    • スパム対策・プライバシー保護に有効です。
  3. ASPの提携条件に含まれる
    • ASP(Google含む)の申請審査によっては「お問い合わせフォーム」が不可欠な場合があります。

結論:お問い合わせフォームは早い段階で「サクッ」と作っておくのがベストです。

お問い合わせフォームの作り方:Contact Form 7

それでは、早速 お問い合わせフォームを作っていきましょう。

手順は以下の通りです。

  1. Contact Form 7の導入方法
  2. お問い合わせフォーム作成・編集
    • フォーム設定
    • メール設定
    • メッセージ設定
    • その他に設定

STEP1Contact Form 7の導入方法

『WordPress管理>ダッシュボード>プラグイン>新規プラグインを追加』をクリックします。

WordPress管理:プラグイン|新規プラグインを追加
yajirusi-sita-80x40

「プラグインを追加」の画面が表示されます。

プラグイン検索欄に『Contact Form 7』と入力して検索します。

プラグイン:Contact Form 7
yajirusi-sita-80x40

『Contact Form 7』を選択して以下を処理します。

❶『今すぐインストール』をクリックします。

プラグイン:Contact Form 7|今すぐインストール

❷『有効化』をクリックします。

プラグイン:Contact Form 7|有効化
yajirusi-sita-80x40

有効化が完了すると以下のようにインストール済みプラグインの欄に「Contact Form 7」が追加されます。

『自動更新を有効化』をクリックします。(任意)

インストール済みプラグイン:Contact Form 7|自動更新を有効化
yajirusi-sita-80x40

自動更新が有効になった状態です。

インストール済みプラグイン:Contact Form 7|自動更新を無効化

以上で、インストールは完了です。

STEP2お問い合わせフォーム作成・編集

インストールが完了すると自動的に「コンタクトフォーム1」だ作成されます。この「コンタクトフォーム1」は編集可能です。また、新しくオリジナルのコンタクトフォームを追加することも可能です。

それでは、見ていきましょう。

『WordPress管理>ダッシュボード>お問い合わせ>コンタクトフォーム』をクリックします。

WordPress管理:お問い合せ|コンタクトフォーム
yajirusi-sita-80x40

「コンタクトフォーム」の画面が表示されます。

コンタクトフォーム一覧から『コンタクトフォーム1』をクリックします。

コンタクトフォーム詳細-1

※ 新規追加でオリジナルのコンタクトフォームを作成することもできます。

「コンタクトフォームの編集」の画面が表示されます。

フォーム設定

デフォルトでは以下のように設定されます。

コンタクトフォーム詳細-2:フォームタブ

<label>〇〇←任意に変更

各項目の表示(ラベル)が変更できます。

  • 氏名
  • メールアドレス
  • 題名
  • メッセージ本文(任意)
  • 送信(ボタン)
yajirusi-sita-80x40

詳細は以下をご覧ください。

※ デフォルトのままで OK です。
必要に応じて編集してください。編集後は『保存』ボタンをクリックします。忘れずに!

メール設定

デフォルトでは以下のように設定されます。

コンタクトフォーム詳細-3:メールタブ

メールの設定では、CC・BCC が追加できます。

詳細は以下をご覧ください。

※ デフォルトのままで OK です。
必要に応じて編集してください。編集後は『保存』ボタンをクリックします。忘れずに!

メッセージ設定

デフォルトでは、以下のように設定されます。

コンタクトフォーム詳細-4:メッセージタブ

メッセージ内容を変更できます。

詳細は以下をご覧ください。

※ デフォルトのままで OK です。
必要に応じて編集してください。編集後は『保存』ボタンをクリックします。忘れずに!

その他に設定

デフォルトでは、以下のように設定されます。

コンタクトフォーム詳細-5:その他の設定タブ

その他の設定では、以下のような設定ができます。

  • 購読者限定モード
  • デモモード
  • メールをスキップする
  • 検証としての承諾確認
  • Flamingo の設定
  • メッセージ保存の抑制
  • JavaScript コード
yajirusi-sita-80x40

詳細は以下をご覧ください。

※ デフォルトのままで OK です。
必要に応じて編集してください。編集後は『保存』ボタンをクリックします。忘れずに!

お問い合わせフォームは、自動で作成されたままでもOKです。
あまり編集しない方が良いと思います。

お問い合わせフォームを固定ページに設置(基本)

お問い合わせ用の固定ページを用意します。

『WordPress管理>ダッシュボード>固定ページ>新規固定ページを追加』をクリックします。

WordPress管理:固定ページ|新規固定ページを追加
yajirusi-sita-80x40

空の固定ページに『お問い合わせ』等のタイトルをつけて『下書き保存』をします。

記事編集画面:固定ページ|お問い合わせ
yajirusi-sita-80x40

前章で、作成した『コンタクトフォーム1』の『ショートコード』をコピーします。

コンタクトフォーム詳細:ショートコードをコピー
yajirusi-sita-80x40

お問い合わせの固定ページを開いて『コンタクトフォーム1』の『ショートコード』をペーストし『公開』します。

記事編集画面:固定ページ|コンタクトフォーム|ショートコード

公開したら…プレビューで確認してみましょう。

以下のように表示されればOKです。

コンタクトフォーム:プレビュー

確認メールを送ってみましょう。

コンタクトフォームからテストメールを送信

コンタクトフォーム:テストメール-1

メール着信を確認

コンタクトフォーム:テストメール-2

コンタクトフォームから送ったメールが指定アドレスに届けばOKです。

以上で、お問い合わせページが完成しました。

お問い合わせフォームをメニューに設置(一般的)

お問い合わせフォーム(固定ページ)は、メニューに設置することができます。

当サイトのサンプルです。

ヘッダーメニュー:イメージ

手順は以下の通りです。

  1. 編集するメニューを選択する
  2. 「固定ページ:お問い合わせ」にチェックを入れる
  3. 『メーニューに追加』ボタンをクリックする
  4. メニューの並び順を整える
  5. 『メニューを保存』ボタンをクリックする

『WordPress管理>ダッシュボード>外観>メニュー』をクリックします。

❶〜❺を処理します。

WordPress管理:ダッシュボード|外観|メニュー

お問い合わせフォームをウィジェットで設置(ダイレクト)

お問い合わせフォームは、ウィジェットで設置することもできます。

お問い合わせフォームのショートコードを利用できるウィジェット『00_AFFINGERカスタムHTML』or『カスタムHTML』にペーストしてサイドバーやフッター等のウィジェットエリアにお問い合わせフォームをダイレクトに表示させることができます。

簡単な手順は以下の通りです。

『WordPress管理>ダッシュボード>外観>ウィジェット』をクリックします。

WordPress管理:ダッシュボード|外観|ウィジェット
yajirusi-sita-80x40

利用できるウィジェットから『00_AFFINGERカスタムHTML』or『カスタムHTML』を選択して、ウィジェット配置エリアを選んで追加します。

この記事では以下のように追加します。
『00_AFFINGERカスタムHTML』→『サイドバーウィジェット』→『ウィジェットを追加』

ウィジェット:利用できるウィジェット|00_AFFINGERカスタムHTML
yajirusi-sita-80x40

『コンタクトフォーム1』の『ショートコード』を『00_AFFINGERカスタムHTML』にペーストします。
※ タイトルは任意です。

ウィジェット:利用できるウィジェット|00_AFFINGERカスタムHTML|お問い合わせフォーム|ショートコード

※ 最後に『保存』をクリックして『完了』です。

yajirusi-sita-80x40

プレビューで確認すると、サイドバーに設置した場合は以下のように表示されます。

プレビュー:サイドバーウィジェットにお問い合せフォームダイレクト表示

ウィジェットエリアならどこにでも設置は可能です。
サイドバーとフッターが主流かと…お好み手試してみてください。

ウィジェットについて更に詳しく知りたい方はこちら

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

まとめ!お問い合わせフォーム【WordPressプラグイン:Contact Form 7で設置!】

WordPressにプラグイン「Contact Form 7」を使った「お問い合わせフォーム」を設置する方法をご紹介しました。アフィリエイトブログの運営には必須となるページです。プラグインを使ったとても簡単な方法なので 是非、トライしてください。

アフィリエイトブログを運営するために必須とされるページは3つあります。
「お問い合せ・サイトマップ・プライバシーポリシー」

プラグイン無しで作る!お問い合わせフォーム

サイトマップの作り方

プライバシーポリシーの作り方

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

-プラグイン_WordPress
-,