HOME » WORDPRESS » 【Contact Form 7】お問い合わせフォームを簡単実装する実務の話。

【Contact Form 7】お問い合わせフォームを簡単実装する実務の話。

2018.9.30 2018.7.1

WORDPRESS

コーポレートサイトを作るときに必ず求められるのが「お問い合わせフォーム」ですが、フロントエンドの人がPHPでプログラムを組むのはとても大変なこと。簡易的なメールフォームなら、Wordpressの「Contact Form 7」でサクッと簡単実装しちゃいましょう。

1 この記事でつくるメールフォーム
2 情的HTMLをWordpressで表示できるようにする
3 Contact Form 7をダウンロード
4 フォームのテンプレートをつくる
- 4.1 メニューからパーツを選んでフォームタグを生成する
- 4.2 サンプルで生成したフォームタグ
5 HTMLとフォームタグを組み合わせる
6 メールの設定をする
- 6.1 お問い合わせメール送信先（管理者宛）の設定
- 6.2 自動返信メールの設定
7 お問い合わせフォームを表示する
- 7.1 固定ページで表示する場合
- 7.2 トップページに表示したい場合など

この記事でつくるメールフォーム

例があるとわかりやすいと思うので、今回は下のようなシンプルなメールフォームをつくってみます！

完成イメージ

HTMLコード

<div class="contact-form">
  <div class="row">
    <div class="head">
      <p>お名前</p>
      <span class="required">必須</span>
    </div&gt;
    <div class="body">
      <input class="input" type="text" placeholder="お名前" required>
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>ふりがな</p>
      <span class="required">必須</span>
    </div>
    <div class="body">
      <input class="input" type="text" placeholder="ふりがな" required>
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>電話番号</p>
      <span class="required">必須</span>
    </div>
    <div class="body">
      <input class="input" type="tel"　placeholder="電話番号" required>
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>メールアドレス</p>
      <span class="required">必須</span>
    </div>
    <div class="body">
      <input class="input" type="email" placeholder="メールアドレス" required>
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>お問い合わせ内容</p>
    </div>
    <div class="body">
      <textarea class="textarea" placeholder="お問い合わせ内容"></textarea>
    </div>
  </div>  
  <div class="submit-btn">
    <input class="submit" type="submit" value="送信">
  </div>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>メールアドレス</p>

</div>

</div>

<p>お問い合わせ内容</p>

</div>

</div>

</div>

情的HTMLをWordpressで表示できるようにする

まずはhtmlファイルをphpファイルに変換します。いわゆるワードプレス化ですね。とは言え、Contact Form 7でお問い合わせフォームを設置することだけが目的ならそんなに厳密にやらなくても大丈夫。サイトがきちんと表示される所までやればOKです！初めての方はこの記事▼が参考になるかも。

【初心者コーダー向け】7日間でつくるWordpressオリジナルテーマ PART1

http://fiels-web.com/2018/03/23/wordpress_original_theme_lesson01/

HTMLで作成された既存のウェブサイトをオリジナルのテーマ(テンプレート)にする手順。専門的な難しい用語は使わず、できるだけシンプルにわかりやすく説明した記事です。デザイナーやコーダーの方々が初めてWordpress構築の依頼を受けたときに役立ちますように！まず...

Contact Form 7をダウンロード

ダッシュボードの「プラグイン」から「新規追加」→「Contact Form 7」で検索してダウンロード、有効化をします。すると、ダッシュボードに「お問い合わせ」というメニューが追加されるので開いてみましょう。デフォルトで「コンタクトフォーム１」というものができていると思いますが、このデフォルトのコンタクトフォーム１は使わないので削除してOK◎

contact_form_7

フォームのテンプレートをつくる

新規追加で新しくフォームを作りましょう。まずはフォーム名をContact Formなどお好みの名前で設定して、下の画像のような自動的につくられるテンプレートは一旦全て消してしまいます。

メニューからパーツを選んでフォームタグを生成する

つくりたいフォームに合わせてパーツを選び、名前やデフォルト値、任意のクラス名などを入れて「タグを挿入」をクリックします。プレーンテキストなら「テキスト」のボタンを、電話番号なら「電話番号」のボタンを選んでパーツを生成します。見たままに操作すれば良いので簡単ですよね！

フォームタグ生成画面の解説

▼プレーンテキストのinputをつくる画面。各項目の説明は下の表を参照してください。テキスト以外のフォームタグをつくるときも大体同じなので割愛しますね〜。ちなみに、送信ボタンのタグを生成するときは、「ラベル」という項目に送信ボタンのテキスト（例：送信）を入力します。
フォームタグ生成画面

項目タイプ: チェックを入れると必須項目になり、”required”のコードが出力されるようになります。

名前: text-***など、自動的に出てくるのでそのまま使ってOK。ただし他のパーツと被らないように。

デフォルト値: 「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、placeholderの値として反映されます。

Akismet: スパム対策のプラグインAkismetと連携するときにチェックを入れます。

ID属性: 項目に任意のID名を追加できます。

class属性: 項目に任意のclass名を追加できます。例では”input”というクラス名をつけています。

生成されるフォームタグの解説

各項目を入力して「タグを挿入」すると、下の画像▼のようなフォームタグが出来上がります。ちなみに、一度つくると編集できないので変更したい時はつくり直してくださいね！
フォームタグ解説

サンプルで生成したフォームタグ

サンプルのメールフォームでは、下の画像のように6つのフォームタグを生成しました。ここで作成した「text-***」や「email-***」という名前は、次のメール設定でメールタグとして使うので必ず別々の番号や名前で登録するようにしてくださいね！

フォームテンプレート作成画面

HTMLとフォームタグを組み合わせる

フォームタグが完成したら、それぞれのタグをHTMLに組み込んでいきます。私はいつもSublime Textで編集してからワードプレスの方にコピペするようにしてます。その方がバックアップもとれて安心。下の画像のようにコードを貼り付けて、最後に「保存」をしたら見た目は完成です！

フォームテンプレート作成画面

HTMLにフォームタグを組み込んだコード

<div class="contact-form">
  <div class="row">
    <div class="head">
      <p>お名前</p>
      <span class="required">必須</span>
    </div>
    <div class="body">
      [text* text-842 class:input placeholder "お名前"]
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>ふりがな</p>
      <span class="required">必須</span>
    </div>
    <div class="body">
      [text* text-843 class:input placeholder "ふりがな"]
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>電話番号</p>
      <span class="required">必須</span>
    </div>
    <div class="body">
      [tel* tel-766 class:input placeholder "電話番号"]
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>メールアドレス</p>
      <span class="required">必須</span>
    </div>
    <div class="body">
      [email* email-854 class:input "メールアドレス"]
    </div>
  </div>
  <div class="row">
    <div class="head">
      <p>お問い合わせ内容</p>
    </div>
    <div class="body">
      [textarea textarea-995 class:textarea placeholder "お問い合わせ内容"]
    </div>
  </div>  
  <div class="submit_btn">
    [submit class:submit "送信"]
  </div>
</div>

</div>

[text* text-842 class:input placeholder "お名前"]

</div>

</div>

[text* text-843 class:input placeholder "ふりがな"]

</div>

</div>

[tel* tel-766 class:input placeholder "電話番号"]

</div>

<p>メールアドレス</p>

</div>

[email* email-854 class:input "メールアドレス"]

</div>

<p>お問い合わせ内容</p>

</div>

[textarea textarea-995 class:textarea placeholder "お問い合わせ内容"]

</div>

[submit class:submit "送信"]

</div>

サンプルフォームのCSS

@charset "UTF-8";
* {
	box-sizing: border-box;
}
/* form */
.contact-form {
	width: 550px;
	margin: 0 auto;
	padding: 40px 30px 30px;
	border: 1px solid #9c9c9c;
}
.contact-form .row {
	display: table;
	position: relative;
	width: 100%;
	padding-bottom: 16px;
}
.contact-form .row + .row {
	border-top: 1px solid #cfcfcf;
	padding-top: 16px;
}
.contact-form .row .head {
	position: relative;
	display: table-cell;
	width: 170px;
}
.contact-form .row .head p {
	display: inline-block;
	margin: 0; 
	font-size: 0.9em;
	color: #333;
}
.contact-form .row .head .required {
	display: inline-block;
	padding: 2px 4px 1px 3px;
	border: 1px solid #ff0000;
	border-radius: 2px;
    font-size: 11px;
    color: #ff0000;
}
.contact-form .row .body {
	display: table-cell;
}
.contact-form　.row　.input {
	position: relative;
	width: 230px;
	padding: 10px 10px 8px;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
    　　　　　　　　background: #fff;
    　　　　　　　　font-family: inherit;
    　　　　　　　　font-size: 13px;
	vertical-align: top;
}
.contact-form　.row　.textarea {
	width: 300px;
	height: 150px;
	padding: 10px 10px 8px;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
    　　　　　　　　background: #fff;
    　　　　　　　　font-family: inherit;
    　　　　　　　　font-size: 13px;
	vertical-align: top;
}
.contact-form　.submit_btn {
	margin-top: 22px;
	text-align: center;
}
.contact-form　.submit {
	width: 200px;
	height: 42px;
	line-height: 40px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 2px solid #071d3e;
	border-radius: 6px;
	background: #094bab;
	font-size: 16px;
	color: #fff;
}
.contact-form　.submit:hover {
	opacity: 0.8;
}

@charset "UTF-8";

* {

box-sizing: border-box;

}

/* form */

.contact-form {

width: 550px;

margin: 0 auto;

padding: 40px 30px 30px;

border: 1px solid #9c9c9c;

}

.contact-form .row {

display: table;

position: relative;

width: 100%;

padding-bottom: 16px;

}

.contact-form .row + .row {

border-top: 1px solid #cfcfcf;

padding-top: 16px;

}

.contact-form .row .head {

position: relative;

display: table-cell;

width: 170px;

}

.contact-form .row .head p {

display: inline-block;

margin: 0;

font-size: 0.9em;

color: #333;

}

.contact-form .row .head .required {

display: inline-block;

padding: 2px 4px 1px 3px;

border: 1px solid #ff0000;

border-radius: 2px;

font-size: 11px;

color: #ff0000;

}

.contact-form .row .body {

display: table-cell;

}

.contact-form　.row　.input {

position: relative;

width: 230px;

padding: 10px 10px 8px;

border: 1px solid #cfcfcf;

border-radius: 4px;

　　　　　　　　background: #fff;

　　　　　　　　font-family: inherit;

　　　　　　　　font-size: 13px;

vertical-align: top;

}

.contact-form　.row　.textarea {

width: 300px;

height: 150px;

padding: 10px 10px 8px;

border: 1px solid #cfcfcf;

border-radius: 4px;

　　　　　　　　background: #fff;

　　　　　　　　font-family: inherit;

　　　　　　　　font-size: 13px;

vertical-align: top;

}

.contact-form　.submit_btn {

margin-top: 22px;

text-align: center;

}

.contact-form　.submit {

width: 200px;

height: 42px;

line-height: 40px;

border-top: 0;

border-left: 0;

border-right: 0;

border-bottom: 2px solid #071d3e;

border-radius: 6px;

background: #094bab;

font-size: 16px;

color: #fff;

}

.contact-form　.submit:hover {

opacity: 0.8;

}

メールの設定をする

お問い合わせフォームからのメールの送信先や内容、自動返信メールの設定をします。ここのメール設定画面では、下の画像のように[ フォームタグの名前 ]という形でメールタグを使用すると、フォームに入力された値をメール内容などに反映することができます。

メールタグ解説

お問い合わせメール送信先（管理者宛）の設定

「送信先」はお問い合わせを受け付ける「管理者」のメールアドレス。送信元はサイト名・お問い合わせ用のメールアドレスなどで設定。ここのアドレスは、ワードプレスを設置しているサイトのドメインと同じものを入力しないとエラーが出ますが、エラーが出ている状態でも問題なく送信できます。題名やメッセージ本文はお好きなように変更してくださいね〜。

メール設定画面

自動返信メールの設定

お問い合わせをしてくれた人へ、お問い合わせ内容の確認として送る自動返信メールを設定したい時は、「メール(2)」という部分を使います。こちらも内容はお好きなように変更できます。ここで注意したいのは、送信先に設定するメールタグ[email-***]は、フォームテンプレート作成時に入力必須項目(*)にしていないと「不正なメールボックス構文が使用されています。」というエラーが出ます。メールアドレスは必ず入力されていないと自動返信メールの送信先がわからないので、当たり前といえば当たり前ですね。。

メール2設定画面

お問い合わせフォームを表示する

固定ページで表示する場合

「お問い合わせ」の固定ページ▼をつくってショートコードをコピペするだけなのでとっても簡単です。

固定ページ新規追加画面

ショートコードは、フォーム一覧画面▼やフォーム編集画面の上部に表示されています。

contact_form_7

トップページに表示したい場合など

LPのようなペライチのサイトでコンタクトフォームをつかう場合は、home.phpやfront-page.phpなどに直接書き込んだ方が早いですね。フォームを表示したい場所に下のように記述すればOKです！

<section class="contact">
	<?php echo do_shortcode('[contact-form-7 id="280" title="contact form"]'); ?>
</section><!-- end.contact -->

<?php echo do_shortcode('[contact-form-7 id="280" title="contact form"]'); ?>

</section>

はい、これで完成！あとはテスト送信して問題なく送れるか、表示されてるかをチェックしましょう～。文字化けしてしまうときは、その箇所をダブルクオテーション” “で囲むと直ったりしますよ！

▼こちらの記事も参考になります（外部リンク）

WordPressにフォームを簡単に設置できるプラグイン「Contact Form 7」の使い方｜fe...

https://ferret-plus.com/8560

WordPressで企業ホームページやメディアサイトを作成するとき、お問い合わせフォームの存在は欠かせません。WordPressのプラグインの「Contact Form 7」を活用すれば、簡単にお問い合わせフォームを作成・設定できます。

【Contact Form 7】文字化けを防ぐ方法 | dtbtu.net

https://dtbtu.net/wordpress-contact-form

ワードプレスのお問い合わせフォーム作成のためのプラグイン、コンタクトフォーム7の文字化けへの対処方法を、画像を用いて解説します。