ZeroPlus Media > Web制作 > WordPress > ブログサイトをWordPress化しようお問い合わせ機能編

ブログサイトをWordPress化しようお問い合わせ機能編

Web制作

2022/07/20

2023/10/31

本記事は、「ブログサイトをWordPress化しよう固定ページ編」の続編の記事になります。

「ブログサイトをWordPress化しよう固定ページ編」では、ブログサイトの下層ページであるお問い合わせページを作成しました。

ブログサイトをWordPress化しようお問い合わせ機能編

本記事では、固定ページで作成したお問い合わせページに対して、WordPressのプラグインを使って実際にお問い合わせ機能を追加していきます。

準備から進めていきましょう。

この記事で身につく内容

固定ページにお問い合わせ機能を追加する方法

案件が取れなくて悩んでいるあなたへ

プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。

営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか？

またゼロからやり直さないといけないの？
本当にフリーランスになれるの？

といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK！

＼お申し込みは30秒で終わります。／

まずは無料で相談してみる

新しい一歩を、今踏み出してみませんか？

準備
- 教材のダウンロード
- ローカル環境の起動
WordPress化する
お問い合わせ機能を確認する

準備

「ブログサイトWordPress化しよう固定ページ編」同様、準備から行いましょう。

教材のダウンロード

「ブログサイトをWordPress化しよう固定ページ編」の続編になるため、前回のファイルのまま使用しても構いません。

ない方は、以下よりダウンロードを行ってください。

ダウンロード

圧縮ファイルとしてダウンロードされるので、「解凍（展開）」してファイルの中身を確認しましょう。

ダウンロードしたものを使用する方はthemes直下に入れよう

上記のダウンロードリンクよりダウンロードしたファイルを使用する方は、Localのthemes直下に配置しましょう。

ローカル環境の起動

Localの起動

「ブログサイトをWordPress化しよう基盤編」で作成したLocalの「ZPM-WP」プロジェクトを「Start site」で起動しましょう。

管理画面を表示

画像の「WP Admin」というボタンからWordPressの管理画面を表示しましょう。

WordPress化する

ここからは、エディタを開きzpm-wpを以下の項目でWordPress化していきます。

やることの確認

お問い合わせの固定ページに対してお問い合わせ機能を実装する

プラグインをインストールする

WordPressでお問い合わせ機能を実装するには、プラグインを使用する必要があります。

お問い合わせ機能を実装するためのプラグインはいくつかありますが、今回は「Contact Form 7」を使用します。

プラグイン一覧画面を開く

管理画面の左サイドバーの「プラグイン」の「新規追加」をクリックしましょう。

遷移すると、WordPressにあるプラグインが一覧として表示されます。

プラグインを検索する

今回インストールしたいプラグインは「Contact Form 7」になるので、「プラグインの検索」蘭に「Contact Form 7」と入力し検索しましょう。

インストールする

「今すぐインストール」をクリックして、終えると「有効化」と表示されるのでプラグインを有効化しましょう。

これでインストールは完了です。

インストールが完了すると、管理画面のサイドバーに「お問い合わせ」というメニューが追加されます。

お問い合わせの固定ページのHTMLをContact Form 7に移す

Contact Form 7を使ってお問い合わせ機能を実装するには、元となるHTMLが必要になるので、「ブログサイトをWordPress化しよう固定ページ編」で作成したお問い合わせの固定ページを開きましょう。

HTMLをカットする

HTMLを全て選択してカットし、更新しましょう。カットは、その部分から削除しクリップボードに保持している状態になります。

コードだと以下の部分になります。

<main class="contact">
  <form action="" class="contact-form">
    <dl class="form-body">
      <div class="form-unit">
        <dt class="form-unit-head">お名前</dt>
        <dd class="form-unit-contents">
          <input type="text" placeholder="山田 太郎" class="form-input" />
        </dd>
      </div>
      <div class="form-unit">
        <dt class="form-unit-head">性別</dt>
        <dd class="form-unit-contents">
          <ul class="form-radio-list">
            <li class="form-radio-item">
              <label for="man" class="form-label">
                <input
                  type="radio"
                  name="gender"
                  id="man"
                  class="form-radio"
                /><span class="form-label-txt">男</span>
              </label>
            </li>
            <li class="form-radio-item">
              <label for="woman" class="form-label">
                <input
                  type="radio"
                  name="gender"
                  id="woman"
                  class="form-radio"
                /><span class="form-label-txt">女</span>
              </label>
            </li>
          </ul>
        </dd>
      </div>
      <div class="form-unit">
        <dt class="form-unit-head">メールアドレス</dt>
        <dd class="form-unit-contents">
          <input
            type="email"
            placeholder="zeroplus@example.com"
            class="form-input"
          />
        </dd>
      </div>
      <div class="form-unit">
        <dt class="form-unit-head">電話番号</dt>
        <dd class="form-unit-contents">
          <input
            type="text"
            placeholder="080-0000-0000"
            class="form-input"
          />
        </dd>
      </div>
      <div class="form-unit">
        <dt class="form-unit-head">職業</dt>
        <dd class="form-unit-contents">
          <select name="job" class="form-select">
            <option value="" hidden selected>選択</option>
            <option value="公務員">公務員</option>
            <option value="経営者・役員">経営者・役員</option>
            <option value="会社員">会社員</option>
            <option value="自営業">自営業</option>
            <option value="自由業">自由業</option>
            <option value="専業主婦">専業主婦</option>
            <option value="パート・アルバイト">パート・アルバイト</option>
            <option value="学生">学生</option>
            <option value="その他">その他</option>
          </select>
        </dd>
      </div>
      <div class="form-unit">
        <dt class="form-unit-head">スキル</dt>
        <dd class="form-unit-contents">
          <ul class="form-checkbox-list">
            <li class="form-checkbox-item">
              <label for="html-css" class="form-label">
                <input
                  type="checkbox"
                  name="skill"
                  id="html-css"
                  class="form-checkbox"
                /><span class="form-label-txt">HTML, CSS</span>
              </label>
            </li>
            <li class="form-checkbox-item">
              <label for="js-jquery" class="form-label">
                <input
                  type="checkbox"
                  name="skill"
                  id="js-jquery"
                  class="form-checkbox"
                /><span class="form-label-txt">JavaScript, jQuery</span>
              </label>
            </li>
            <li class="form-checkbox-item">
              <label for="worpdress" class="form-label">
                <input
                  type="checkbox"
                  name="skill"
                  id="worpdress"
                  class="form-checkbox"
                /><span class="form-label-txt">WordPress</span>
              </label>
            </li>
            <li class="form-checkbox-item">
              <label for="else" class="form-label">
                <input
                  type="checkbox"
                  name="skill"
                  id="else"
                  class="form-checkbox"
                /><span class="form-label-txt">その他</span>
              </label>
            </li>
          </ul>
        </dd>
      </div>
      <div class="form-unit">
        <dt class="form-unit-head">お問い合わせ内容</dt>
        <dd class="form-unit-contents">
          <textarea rows="6" class="form-textarea"></textarea>
        </dd>
      </div>
    </dl>

    <input type="submit" class="form-submit" value="送信" />
  </form>
</main>

Contact Form 7のコンタクトフォームを開く

管理画面のサイドバーの「お問い合わせ」の「コンタクトフォーム」をクリックします。

コンタクトフォームを開くと、Contact Form 7でデフォルトで用意されている「コンタクトフォーム１」があるので、今回はこの「コンタクトフォーム１」を編集します。

コンタクトフォーム１にコードを貼り付ける

コンタクトフォーム１が開けたら、画面の入力欄にあるものを削除して、先ほどの固定ページでカットしたHTMLを貼り付けます。

ただ、Contact Form 7の仕様としてformタグを含める必要はないので、formタグの開始タグと終了タグは削除します。

最終的なHTMLのコード（formタグを削除）

<main class="contact">
  <dl class="form-body">
    <div class="form-unit">
      <dt class="form-unit-head">お名前</dt>
      <dd class="form-unit-contents">
        <input type="text" placeholder="山田 太郎" class="form-input" />
      </dd>
    </div>
    <div class="form-unit">
      <dt class="form-unit-head">性別</dt>
      <dd class="form-unit-contents">
        <ul class="form-radio-list">
          <li class="form-radio-item">
            <label for="man" class="form-label">
              <input
                type="radio"
                name="gender"
                id="man"
                class="form-radio"
              /><span class="form-label-txt">男</span>
            </label>
          </li>
          <li class="form-radio-item">
            <label for="woman" class="form-label">
              <input
                type="radio"
                name="gender"
                id="woman"
                class="form-radio"
              /><span class="form-label-txt">女</span>
            </label>
          </li>
        </ul>
      </dd>
    </div>
    <div class="form-unit">
      <dt class="form-unit-head">メールアドレス</dt>
      <dd class="form-unit-contents">
        <input
          type="email"
          placeholder="zeroplus@example.com"
          class="form-input"
        />
      </dd>
    </div>
    <div class="form-unit">
      <dt class="form-unit-head">電話番号</dt>
      <dd class="form-unit-contents">
        <input
          type="text"
          placeholder="080-0000-0000"
          class="form-input"
        />
      </dd>
    </div>
    <div class="form-unit">
      <dt class="form-unit-head">職業</dt>
      <dd class="form-unit-contents">
        <select name="job" class="form-select">
          <option value="" hidden selected>選択</option>
          <option value="公務員">公務員</option>
          <option value="経営者・役員">経営者・役員</option>
          <option value="会社員">会社員</option>
          <option value="自営業">自営業</option>
          <option value="自由業">自由業</option>
          <option value="専業主婦">専業主婦</option>
          <option value="パート・アルバイト">パート・アルバイト</option>
          <option value="学生">学生</option>
          <option value="その他">その他</option>
        </select>
      </dd>
    </div>
    <div class="form-unit">
      <dt class="form-unit-head">スキル</dt>
      <dd class="form-unit-contents">
        <ul class="form-checkbox-list">
          <li class="form-checkbox-item">
            <label for="html-css" class="form-label">
              <input
                type="checkbox"
                name="skill"
                id="html-css"
                class="form-checkbox"
              /><span class="form-label-txt">HTML, CSS</span>
            </label>
          </li>
          <li class="form-checkbox-item">
            <label for="js-jquery" class="form-label">
              <input
                type="checkbox"
                name="skill"
                id="js-jquery"
                class="form-checkbox"
              /><span class="form-label-txt">JavaScript, jQuery</span>
            </label>
          </li>
          <li class="form-checkbox-item">
            <label for="worpdress" class="form-label">
              <input
                type="checkbox"
                name="skill"
                id="worpdress"
                class="form-checkbox"
              /><span class="form-label-txt">WordPress</span>
            </label>
          </li>
          <li class="form-checkbox-item">
            <label for="else" class="form-label">
              <input
                type="checkbox"
                name="skill"
                id="else"
                class="form-checkbox"
              /><span class="form-label-txt">その他</span>
            </label>
          </li>
        </ul>
      </dd>
    </div>
    <div class="form-unit">
      <dt class="form-unit-head">お問い合わせ内容</dt>
      <dd class="form-unit-contents">
        <textarea rows="6" class="form-textarea"></textarea>
      </dd>
    </div>
  </dl>

  <input type="submit" class="form-submit" value="送信" />
</main>

これで、お問い合わせの固定ページのHTMLをContact Form 7に移すことができました。

Contact Form 7の書式に変更する

貼り付けたHTMLコードのinputタグやtextareaタグ部分をContact Form 7の書式に変更していきます。

HTMLのコード

<input type="text" placeholder="山田 太郎" class="form-input">

例えば、上記の名前の入力欄をContact Form 7の書式に変更すると、以下のようになります。

Contact Form 7の書式

[text* form_name class:form-input "山田 太郎"]

このように直書きで変更していくことも可能ですが、Contact Form 7のUI上から変更していくことが可能です。

HTMLのコードからContact Form 7の書式に変更するイメージ

変更する箇所一覧

変更する対象（削除するHTML）	タイプ	変更後の書式
<input type="text" placeholder="山田太郎" class="form-input">	テキスト	[text* form_name class:form-input "山田太郎"]
<ul class="form-radio-list"> <li class="form-radio-item"> <label for="man" class="form-label"> <input type="radio" name="gender" id="man" class="form-radio"><span class="form-label-txt">男</span> </label> </li> <li class="form-radio-item"> <label for="woman" class="form-label"> <input type="radio" name="gender" id="woman" class="form-radio"><span class="form-label-txt">女</span> </label> </li> </ul>	ラジオボタン	[radio form_sex class:form-radio use_label_element default:1 "男" "女"]
<input type="email" placeholder="zeroplus@example.com" class="form-input">	メールアドレス	[email* form_email class:form-input placeholder "zeroplus@example.com"]
<input type="tel" placeholder="080-0000-0000" class="form-input">	電話番号
<select name="job" class="form-select"> <option value="" hidden="" selected="">選択</option> <option value="公務員">公務員</option> <option value="経営者・役員">経営者・役員</option> <option value="会社員">会社員</option> <option value="自営業">自営業</option> <option value="自由業">自由業</option> <option value="専業主婦">専業主婦</option> <option value="パート・アルバイト">パート・アルバイト</option> <option value="学生">学生</option> <option value="その他">その他</option> </select>	ドロップダウンメニュー	[select* form_job class:form-select include_blank "公務員" "経営者・役員" "会社員" "自営業" "自由業" "専業主婦" "パート・アルバイト" "学生" "その他"]
<ul class="form-checkbox-list"> <li class="form-checkbox-item"> <label for="html-css" class="form-label"> <input type="checkbox" name="skill" id="html-css" class="form-checkbox"><span class="form-label-txt">HTML, CSS</span> </label> </li> <li class="form-checkbox-item"> <label for="js-jquery" class="form-label"> <input type="checkbox" name="skill" id="js-jquery" class="form-checkbox"><span class="form-label-txt">JavaScript, jQuery</span> </label> </li> <li class="form-checkbox-item"> <label for="worpdress" class="form-label"> <input type="checkbox" name="skill" id="worpdress" class="form-checkbox"><span class="form-label-txt">WordPress</span> </label> </li> <li class="form-checkbox-item"> <label for="else" class="form-label"> <input type="checkbox" name="skill" id="else" class="form-checkbox"><span class="form-label-txt">その他</span> </label> </li> </ul>	チェックボックス	[checkbox* form_skill class:form-checkbox use_label_element "HTML, CSS" "JavaScript, jQuery" "WordPress" "その他"]
<textarea rows="6" class="form-textarea"></textarea>	テキストエリア	[textarea form_text class:form-textarea]
<input type="submit" class="form-submit" value="送信">	送信ボタン	[submit class:form-submit "送信"]

最終的なコード

<main class="contact">
	<dl class="form-body">
	  <div class="form-unit">
	    <dt class="form-unit-head">お名前</dt>
	    <dd class="form-unit-contents">
	      [text* form_text class:form-input placeholder "山田 太郎"]
	    </dd>
	  </div>
	  <div class="form-unit">
	    <dt class="form-unit-head">性別</dt>
	    <dd class="form-unit-contents">
	     [radio form_gender class:form-radio use_label_element default:1 "男" "女"]
	    </dd>
	  </div>
	  <div class="form-unit">
	    <dt class="form-unit-head">メールアドレス</dt>
	    <dd class="form-unit-contents">
	      [email* form_email class:form-input placeholder "zeroplus@example.com"]
	    </dd>
	  </div>
	  <div class="form-unit">
	    <dt class="form-unit-head">電話番号</dt>
	    <dd class="form-unit-contents">
	      [tel* form_tel class:form-input placeholder "080-0000-0000"]
	    </dd>
	  </div>
	  <div class="form-unit">
	    <dt class="form-unit-head">職業</dt>
	    <dd class="form-unit-contents">
	      [select* form_job class:form-select include_blank "公務員" "経営者・役員" "会社員" "自営業" "自由業" "専業主婦" "パート・アルバイト" "学生" "その他"]
	    </dd>
	  </div>
	  <div class="form-unit">
	    <dt class="form-unit-head">スキル</dt>
	    <dd class="form-unit-contents">
	      [checkbox* form_skill class:form-checkbox use_label_element "HTML, CSS" "JavaScript, jQuery" "WordPress" "その他"]
	    </dd>
	  </div>
	  <div class="form-unit">
	    <dt class="form-unit-head">お問い合わせ内容</dt>
	    <dd class="form-unit-contents">
	     [textarea form_text class:form-textarea]
	    </dd>
	  </div>
	</dl>

[submit class:form-submit "送信"]

</main>

このように変更していきましょう。

ただ、このまま反映するとラジオボタンやチェックボックス部分のスタイルが変わってしまうので、以下のスタイルをmain.cssに追加しましょう。

main.cssに追加するスタイル

/* cf7 style */
.wpcf7-list-item {
  margin: 0;
}

.wpcf7-list-item:not(:first-child) {
  margin-left: 16px;
}

.wpcf7-list-item-label {
  font-weight: bold;
  margin-left: 8px;
}

input[type="radio"] {
  appearance: button;
}

input[type="checkbox"] {
  appearance: checkbox;
}

上記のCSSをmain.cssに追加します。

これで見た目も含めてContact Form 7の書式に変更することができました。

次にメールの設定をします。

Contact Form 7 メールの設定

メールタブをクリックして、お問い合わせの送信先や内容の設定などを行います。

メールの設定項目と例

項目	内容	例
送信先	お問い合わせが来た時に送信するメールアドレス先	（運営のメールアドレス）
送信元	送信元のメールアドレス
サイトのドメインのメールアドレスなど	株式会社ZeroPlus info@zero-plus.io
題名	メールの掲題	ZeroPlus お問い合わせ
追加ヘッダー	メールを返信する際に追加するメールアドレス	[form_email]
メッセージ本文	メールの本文	お問い合わせがありました。お名前： [form_name] 性別： [form_gender] メールアドレス： [form_email] 電話番号： [form_tel] 職業： [form_job] スキル： [form_skill] メッセージ本文： [form_text]