MENU
  • プロフィール
  • サービス
    • 初回の無料相談
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ
  • お問合せ

    カテゴリー

    • デザインの整え方
    • WordPress入門
    • 無料ブログ活用・移行
    • ホームページの育て方
    • 実績・お客様の声
    • 自分らしい働き方・起業ノート
    • 技術ブログ

    タグ

    ChatGPTHTML/CSSSWELLおすすめWPプラグインアメブロエックスサーバーサーチコンソールセキュリティデザイン見本初回無料相談制作実績単発レッスン技術ブログへ移動継続レッスン

    アーカイブ

    • 2025年7月
    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPressレッスン
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. WordPress入門
    3. Contact Form 7|WordPressでかんたんお問い合わせフォーム

    Contact Form 7|WordPressでかんたんお問い合わせフォーム

    2025 7/16
    WordPress入門
    2025-07-30

    こんにちは。
    今日は、WordPressで「お問い合わせフォーム」を作る方法をご紹介します。

    今日の記事は動画で流れをご紹介しています。
    よろしければこちらもご覧ください。

    YouTube
    【初心者向け】Contact Form 7でお問い合わせフォームを簡単設置! \初心者さんでも安心!/ WordPressサイトにお問い合わせフォームを設置したい方へ向けて、人気のプラグイン「Contact Form 7」の使い方をわかりやすく解説しました。✅ ...
    目次

    どうしてお問い合わせフォームが必要なの?

    ホームページを作るときに、ぜひ設置しておきたいのが「お問い合わせフォーム」です。

    お客さまからの連絡窓口

    なぜかというと、ホームページを見てくれた方が、

    • サービスに申し込みたいとき
    • 気になることを質問したいとき
    • 詳しく話を聞いてみたいとき

    に、すぐに連絡できる窓口になるからです。

    たとえば、
    「相談をお願いしたい」お申し込みや
    「この講座はいつから受けられますか?」といったお問い合わせは、
    フォームがあればスムーズにやりとりを始めることができます😊

    メールアドレスをそのまま公開するのは不安…

    とくに、お仕事でホームページを使っている場合は、
    特定商取引法やプライバシーポリシーのページにも、
    「連絡できる手段」が必要とされています。

    でも、メールアドレスをそのまま公開すると、
    スパム(迷惑メール)がたくさん届いてしまうことも…。

    フォームを設置すれば、メールアドレスを公開せずに安全にやりとりができるので、安心です。

    今回は、無料で使える人気のプラグイン「Contact Form 7(コンタクトフォーム・セブン)」を使って、
    かんたんにフォームを作る方法をお伝えします!

    Contact Form 7ってなに?

    Contact Form 7(CF7)は、
    WordPressでよく使われている
    お問い合わせフォーム専用のプラグイン(追加機能)です。

    こんなところが便利✨

    • 無料で使える
    • 日本語に対応している
    • とてもシンプルで軽い
    • カスタマイズもしやすい

    WordPressを初めてさわる人でも、迷わず設置できるのでおすすめです!

    ほかのフォームプラグインとの違いについて

    WordPressには、お問い合わせフォームを作るためのプラグインがいくつかあります。
    よく使われているのは、たとえば次の3つです:

    プラグイン名特徴
    Contact Form 7シンプル・軽量。HTMLタグベースでカスタマイズしやすい。
    Snow Monkey Forms日本製テーマと相性◎
    ブロックエディタで作れるのでデザインが反映しやすい
    また、確認画面を間にいれることもできる。
    WPFormsドラッグ&ドロップでUI直感的。海外製のため、英語メイン。

    この記事では、もっともベーシックで情報も多く、無料で使いやすい
    Contact Form 7 を使ったフォームの作り方をご紹介しています。

    それぞれメリットがあるので、
    「直感的にフォームを作りたい」「日本語対応がしっかりしているものがいい」など、
    ご自身の好みに合わせて選ぶのも◎ですよ😊

    Contact Form 7をインストールしよう

    まずは、プラグインを入れましょう。

    1. WordPressの管理画面(ダッシュボード)にログイン
    2. 左のメニューから「プラグイン」>「新規追加」をクリック
    3. 検索窓に「Contact Form 7」と入力
    4. 出てきたものの中から、「今すぐインストール」→「有効化」
    Screenshot

    これで準備完了です✨

    フォームを作成してみよう

    有効化ができたら、左メニューに「お問い合わせ」という項目が出てきます。
    そこをクリックすると、すでに1つフォームが作られています。

    そのまま使ってもOKですが、内容を確認・調整しておくと安心です。

    Screenshot

    初期状態で、以下の4つの項目があらかじめ用意されています:
     - お名前(your-name)
     - メールアドレス(your-email)
     - 題名(your-subject)
     - メッセージ本文(your-message)

    必要に応じてフォームを編集したら、「保存」をクリックします。

    フォームを保存すると、画面上部にショートコードが表示されます(例:[contact-form-7 id="1234" title="コンタクトフォーム 1"])。
    このショートコードをコピーしておきましょう。

    Screenshot

    入力項目の説明

    用途タグ(例)ポイント
    名前(テキスト)[text* your-name]「*」をつけると必須項目になります
    メールアドレス[email* your-email]自動返信メールの送信先になります
    電話番号[tel your-tel]数字のみ入力可能。ハイフン可
    メッセージ本文[textarea your-message]複数行のテキスト入力
    チェックボックス[checkbox your-service use_label_element "Aコース" "Bコース"]複数選択可。use_label_elementで整列可能
    ドロップダウン[select your-plan "プランA" "プランB"]1つだけ選択する形式
    ラジオボタン[radio your-gender "男性" "女性"]1つのみ選択可能
    同意チェック[acceptance your-consent] 同意する送信前に確認させる際に便利

    ラベル(表示名)とタグの組み合わせは以下のように書きます:
     <label>お名前 [text* your-name]</label>

    必須項目には「*」を忘れずに

    フォーム編集前にバックアップを取っておくと安心です

    フォームをページに表示しよう

    フォームを作っただけでは、ホームページにはまだ表示されません。

    ここでは、「お問い合わせ」というページを作って、
    その中にフォームを表示してみましょう。

    1. WordPressの左メニュー「固定ページ」>「新規追加」
    2. ページのタイトルに「お問い合わせ」と入力
    3. 本文エリアに、Contact Form 7のショートコードを貼りつける

     例:
       [contact-form-7 id="123" title="コンタクトフォーム 1"]  

    このショートコードは、「お問い合わせ > フォーム一覧」からもコピーできます!

    Screenshot
    1. ページを公開したら完了です🎉

    自動返信メールと管理者メールの設定

    フォームからメッセージが届いたときに、

    • お客さまにも「お問い合わせありがとうございます」と自動返信
    • 自分(管理者)にも内容の通知

    が届くように設定しておきましょう。

    1. 「お問い合わせ > フォーム一覧」で、使っているフォームを編集
    2. 「メール」タブをクリック

    管理者宛メールの設定

    Screenshot

    【主な項目】

    項目名入力例補足
    送信先(To)your-address@example.com管理者(あなた)のメールアドレスを入力
    送信元(From)[your-name] <[your-email]>お客様の名前とメールがFromに表示されます
    件名(Subject)【お問い合わせ】[your-subject]
    追加ヘッダーReply-To: [your-email]管理者がそのまま返信できるようになります

    件名

    【HP】お問い合わせ受付のお知らせ

    メール本文

    HPから問い合わせがありました。
    ※このメールはシステムからの自動返信です
    
    ———————————————-
    ■お名前
    [your-name]
    ■メールアドレス
    [your-email]
    ■タイトル
    [your-title]
    ■お問い合わせ内容
    [your-message]
    ———————————————-

    入力された内容をメール内で表示させる場合、フォームで使っている項目と「同じ名前」をメール内にも使う必要があります。
    たとえば [your-name] や [your-message] のようなタグを使います。

    お客さま宛の自動送信メール

    1. 画面を下にスクロールして、「メール(2)」のチェックを ON にする
       → これが自動返信メールの設定欄です

    設定項目

    項目名入力例補足
    送信先(To)[your-email]フォームで入力されたメールアドレス宛に送信されます
    送信元(From)あなたのサイト名 <info@example.com>「example.com」はご自身のドメインに合わせて変更
    件名(Subject)【自動返信】お問い合わせありがとうございます自動返信用に分かりやすく
    追加ヘッダーReply-To: [your-email]任意。お客様から返信しやすくなる

    件名

    お問い合わせありがとうございました。

    本文

    ※このメールはシステムからの自動返信です
    
    [your-name] 様
    
    この度はお問い合わせありがとうございました。
    
    送信いただきました内容を確認の上、1〜2営業日内にご連絡差し上げます。
    なお送信いただいた内容は、以下のとおりです。
    
    ———————————————-
    ■お名前
    [your-name]
    ■メールアドレス
    [your-email]
    ■タイトル
    [your-subject]
    ■お問い合わせ内容
    [your-message]
    ———————————————-
    
    以上、よろしくお願い致します。
    
    [_site_title]
    
    名前
    Email: info@XXX.co.jp
    Web: https://XXX.co.jp

    メール本文中に [your-○○] などのタグを入れると、フォームの入力内容が差し込まれます

    [your-email] のように、お客様が入力した値を使うことで自動で内容を反映できます。
    フォームの項目名とタグ名が一致していないと、うまく動作しないことがあるので注意くださいね。

    スパム対策やメール送信エラーについて(補足)

    今回は、次のような設定をあらかじめ行っています:

    • reCAPTCHA(リキャプチャ):ロボットによるスパム送信を防ぐしくみ
    • SMTPプラグイン:メールがちゃんと届くようにするための設定

    お問い合わせフォームは「表示できたら完成!」と思いがちですが、
    これらの設定をしておかないと、メールが届かなかったり、迷惑メールが大量に来てしまうこともあります。

    ですので、初めてフォームを設置される方は、フォームを作ると同時に、これらの設定も一緒に行うのがおすすめです✨

    • Google reCAPTHCAをContact Form7に設定する方法(公式)

    ↓別のお問い合わせフォームですが、reCaptchaの設定方法を記述しています。

    あわせて読みたい
    Snow Monkey Formsでお問合せフォームを作成する WordPressにSnow Monekey Formsでお問合せフォームを設置しました。 Snow Monkey Formsは、有料テーマSnow Monkeyに合わせて作られたプラグインですが、シンプルな機能…

    まとめ

    今回は、Contact Form 7を使って、
    WordPressにお問い合わせフォームを作る方法をご紹介しました。

    お問い合わせフォームは、
    「連絡手段」としてだけでなく、
    お客さまとの信頼関係をつくる入口でもあります。
    見る人にとっては「相談しやすい」という安心感にもつながります。

    ホームページを作るときは、ぜひ最初にフォームも用意してみてくださいね😊

    🧩「フォーム、ちゃんと動いてるか不安…」

    自動返信メールや、項目の整え方など、意外とつまづきがちなフォーム設定。
    ご自身で頑張ってみてもうまくいかないときは、単発レッスンで一緒に解決してみませんか?

    • Contact Form 7の設定確認
    • 改行や見た目の調整
    • メールが届かない時のチェックポイント など

    👉 単発レッスン(45分/Zoom対応)

    WordPress入門
    よかったらシェアしてね!
    中谷恵美
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    趣味は、文房具、ゲーム(RPGとモンハン)、手芸(刺繍、洋裁)。最近は作曲やアレンジも勉強中。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にピラティスを始めたが、果たして続くのか。
    詳しいプロフィールを見る
    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・美容サロン・弁護士・デザイナー・心理カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      無料ブログ活用・移行
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      無料ブログ活用・移行
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      無料ブログ活用・移行
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      無料ブログ活用・移行
    • 大人かわいいブログヘッダーの作り方
      2022-11-09
      デザインの整え方
    目次