Contact Form 7は問い合わせや申込みのフォームを簡単に作成できるWordPressのプラグインです。
とあるWordPressの案件でContact Form 7を使用した申込みフォームを作成することがあったのですが、メール設定でエラーになったり、自動返信メールにフォームの入力値が表示されなかったり、悩んだ設定がありました。
今後、Contact Form 7の使い方に悩むことがないように、基本的な使い方を覚えておくことを目的として書いた記事ですが、誰かに説明しているかのように記事にしたので何か参考になればと思います。
WordPressにContact Form 7をインストール
Contact Form 7はWordPressのプラグインなので、フォームを作成したいテーマにContact Form 7をインストールして使い始めます。
WordPressのダッシュボードからContact Form 7をインストールする場合は、ダッシュボードの「プラグイン」⇒「新規追加」と進み、「プラグインを追加」の画面にある検索窓に、Contact Form 7と入力して「今すぐインストール」のボタンでインストールします。
Contact Form 7のzipファイルをダウンロードしてインストールする場合は、WordPress.ORG 日本語のページからContact Form 7のzipファイルをダウンロードしてインストールします。
Contact Form 7：zipファイルのダウンロードページ
ダウンロードしたzipファイルは、WordPressのダッシュボードから「プラグインの追加」の画面まで進み、「プラグインのアップロード」をクリックします。
そしてファイルを選択のボタンをクリックしてダウンロードしたContact Form 7のzipファイルを解凍せずにインストールします。
Contact Form 7のインストール後はプラグインを有効にします。
Contact Form 7でフォームを作成
Contact Form 7をWordPressで有効化させると、ダッシュボードのサイドメニューにメールアイコン付きの「お問い合わせ」ボタンが追加され表示しています。
お問い合わせ項目内の「新規追加」をクリックすることで、コンタクトフォームを作成する画面に移動することができ、「コンタクトフォームを追加」の画面が表示します。
Contact Form 7の「コンタクトフォームを追加」の画面にあるフォームタブでサイトに設置するフォームのテンプレートを作成します。
上の画像で表示しているように、フォームテンプレート名を入力してから、青枠で囲われているテキスト、メールアドレス、電話番号、テキストエリアなどのボタンをクリックしてタグの設定と生成を行い、ボタン下のエディタに挿入してフォームを作成させていくのが基本的な使い方です。
フォームタグの使い方を覚えておくのがWordPressのContact Form 7の使い方のポイントになるかと思います。
フォームタグの使い方を覚える
Contact Form 7のタグはフォーム作成で使うものは「フォームタグ」と言います。
Contact Form 7のフォームタグの使い方は、フォームで使用する項目をフォームタグ生成ボタンをクリックすることで、そのフォームタグに必要な設定が表示します。
例えばテキストを選んだ場合は以下の画像のようにフォーム生成画面が表示します。
項目タイプ
WordPressに作成するフォームの入力項目を必須にしたい場合は必須項目にチェックを入れます。
名前
名前には、その項目を識別するために使用する識別名を入力。入力すると一番下のボックスのタグが、入力した名前に置き換わります。
識別名とか理解しずらいかもしれませんが、例えばyour-nameを名前に設定して作成したフォームをWordPressに設置し、問い合わせユーザーがフォームに「 なんちゃら太郎」と入力して送信した場合、なんちゃら太郎という送信データをyour-nameで識別するという意味を持つ設定なのです。
後述する「フォームタグとinputタグの関係」でもう少し覚えやすくなるかと思います。
デフォルト値
上の画像で上段のボックスはデフォルト値なし、下段はデフォルト値ありです。
デフォルト値は、予め設定しておく値を入力します。「このテキストを項目のプレースホルダとして使用する」にチェックを入れると、デフォルト値のボックスに入力した内容がフォームでの入力ボックスにも表示されるので、入力ヒントのような使い方ができます。
ID属性 クラス属性
ID属性とクラス属性は、任意のID名とクラス名を入力しておくと、設置したフォームをデザインするときなどに便利です。フォームをWordPressに設置してからソースコードで確認ができます。
上記説明した中から、名前だけ設定したテキストタグを例にしますが、テキストタグを生成すると[text your-name]がエディタに挿入されます。
<label>名前
[text your-name]</label>挿入された[text your-name]にはHTMLのlabel要素も組み合わせた使い方をしています。label要素でフォームタグを囲むと、Contact Form 7のフォームタグが出力するinputタグにラベル付けをする使い方ができます。
名前という文字でラベル付けした実際の表示は次の画像です。
Contact Form 7でのフォームタグの使い方を簡単に説明しましたが、フォームタグとinputタグの関係を覚えてみると「Contact Form 7の使い方」は理解しやすくなります。
フォームタグとinputタグの関係
WordPressのContact Form 7でフォームタグは、HTMLのinputタグに変換されてから、実際にフォームとして表示します。
以下はContact Form 7のテキストタグを選択し、名前、id属性、クラス属性、デフォルト値を設定してタグ生成したフォームタグと、変換されたinputタグです。
[text your-name id:namae class:contact-name placeholder "フルネーム"]
↓inputタグに変換されてフォームが表示
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text contact-name" id="namae" aria-invalid="false" placeholder="フルネーム">
Contact Form 7のフォームタグとinputタグを照らし合わせながら、最も重要で覚えておきたいのは「名前」のフォームタグ「your-name」の部分が、inputタグに変換されたときには「name=”your-name”」になるという関係です。
名前
名前はContact Form 7のフォームタグで見た場合は、your-nameの部分です。タグ生成のとき名前に入力したものが使われます。
inputタグに変換されるとyour-nameはname=”your-name”で出力されます。
inputタグのnameはname属性と言い、name属性があるとinputタグの入力項目に入力された内容、例えば「なんちゃら太郎」という名前の入力、送信が行われ「なんちゃら太郎」をサンクスメールで自動返信したいとき、name属性の値に設定した名前(your-name)を識別名にして自動返信メールを設定することができます。
フォームから送信された、なんちゃら太郎という値にネームプレートを付けて、そのネームプレートを目印に取り出すみたいなイメージです。
このフォームタグの名前とinputタグの関係はとても重要で、使い方を間違えるとフォームで送信された内容をサンクスメールで飛ばす場合などには、表示されなくなります。
例えばContact Form 7で個人名と会社名を入力してもらうtextタグに以下のような識別名を設定したフォームタグをlabel要素内に挿入したとします。
<label>名前
[text your-name]</label>
<label>会社名
[text your-name]</label>
この場合、名前と会社名の2つの名前をyour-name一つで識別しようとしているのでフォームタグの使い方を間違えています。返信メールで名前と会社名を表示したとしても会社名が2つ表示されてしまいます。
<label>名前
[text your-name]</label>
<label>会社名
[text your-company]</label>
正しい使い方は、Contact Form 7のフォームタグを生成するときに、入力項目一つに対して、それ専用の名前を設定する使い方が必要です。
私はフォームタグとinputタグの関係を忘れていて、一時間以内で終わる作業を倍以上かけてしまいました..。なのでContact Form 7 の使い方において、フォームタグとinputタグの関係は覚えておくべきことだと考えるようにしています。
WordPressにフォームを設置
Contact Form 7のフォームタグを生成して作成したフォームテンプレートはWordPressのフォームを使用したいページに設置します。
例えばWordPressの固定ページにContact Form 7のフォームを設置する場合は、固定ページを新規作成し、固定ページのタイトルにフォーム名を入力。
そしてContact Form 7のフォームタブで、フォームテンプレート名の下に表示されているショートコードをコピーして固定ページにペーストします。
すると作成したWordPressの固定ページにContact Form 7で作成したフォームを設置できます。
Contact Form 7でメール送信を設定
Contact Form 7のメールタブではフォームから送られてくる入力内容をメール送信する設定をします。
メール送信の設定は2つあり、「メール」と「メール(2)」に設定が分かれています。
- 「メール」はWordPressに設置したフォームから問い合わせがあった内容を受け取る自分へ送信するメール。
- 「メール(2)」は、自動返信メール、サンクスメールに使われることが多いです。お問い合わせしてくれた方に送信するメールです。
メールの使い方
Contact Form 7で以下のフォームを作成したとしましょう。
<p>個人様は氏名をご入力ください</p>
<label>氏名
[text your-name]</label>
<p>企業様は会社名と担当者様名をご入力ください</p>
<label>会社名
[text your-company]</label>
<label>担当者様氏名
[text your-name2]</label>
<p>個人様・企業様どちらもご入力ください</p>
<label>連絡先
[tel* your-tel]</label>
<label>メールアドレス
[email* your-email] </label>
[submit "送信"]
このフォームを元にメールの使い方を説明します。
まず、Contact Form 7のメールタブに進み、送信先にフォームからの送信内容を受け取りたい自分のメールアドレスを設定します。
次にメールの題名です。自分がフォームの内容をメールで受け取るときに何に対してのメールが届いたのか分かるような題名しておきます。
そして、メッセージ本文の使い方です。
お問い合わせの方がどんな内容をフォームに入力したのか確認をできるようにしたいので、メッセージ本文には、Contact Form 7のフォームタブで生成したフォームタグをメールタグにして内容を受け取れるようにします。
メールタグの使い方はContact Form 7のメールタブ説明文のところを参考にします。
説明文で「これらのメールタグを利用できます」に続いてショートコードみたいのが表示していると思いますが、これがContact Form 7のメールタグです。
これらのメールタグは、作成したフォームタグと関連して表示されています。
<p>個人様は氏名をご入力ください</p>
<label>氏名
[text your-name]</label>
<p>企業様は会社名と担当者様名をご入力ください</p>
<label>会社名
[text your-company]</label>
<label>担当者様氏名
[text your-name2]</label>
<p>個人様・企業様どちらもご入力ください</p>
<label>連絡先
[tel* your-tel]</label>
<label>メールアドレス
[email* your-email] </label>
[submit "送信"]
例えば今回の例では氏名にtext your-nameを、会社名にtext your-company、その他諸々の名前を生成したフォームタグでフォームを作成していますので、メールタグでも同じタグ名を利用してメールを設定していく簡単な使い方ができます。
ただし、メールタグを書く場合には、タグ内のtextとかemailとかtelの部分は省いて書きます。
例えば[text your-name]ではなく、textを省いて[your-name]と書く使い方をメールタグでします。以下のメールタグがメールのメッセージ本文に設定したものです。
差出人: [your-name] <[your-email]>
氏名：[your-name]
会社名：[your-company]
ご担当者様：[your-name2]
ご連絡先：[your-tel]
メールアドレス：[your-email]
このメールは [_site_title] ([_site_url]) のお問い合わせ「会員申し込み」フォームから送信されました
これでWordPressにContact Form 7のフォームを設置して送信されたフォームの情報は、送信先に指定したメールアドレスに送信されます。
もし、追加ヘッダーがエラーになってしまう場合には、Contact Form 7のフォームタブで使用している[email your-email]を[email* your-email]に修正するとエラーが消えます。
Contact Form 7はメール送信できるようにするためには、メールアドレスの項目を必須にしないといけないようですね。
メール(2)の使い方
続いてContact Form 7のメール(2)の使い方です。
メールの下にメール(2)が表示されているので、チェックボックスにチェックを入れて設定項目を展開します。
自動返信メールをお問い合わせいただいた方に送信する場合を例にしてメール(2)の使い方を説明します。
この度はお申込みをいただき、誠にありがとうございます。
お申込み内容を受信後、
1～2営業日中に改めてご返信させていただきます。
▼お問合せされた内容はこちら
---------------------------------------------
氏名：[your-name]
会社名：[your-company]
ご担当者様：[your-name2]
ご連絡先：[your-tel]
メールアドレス：[your-email]
---------------------------------------------
※このメールは自動で返信しております。
Contact Form 7 のメール(2)のメッセージ本文に、どんな返信内容にするかを記入してから、お問い合わせしてくれた内容が確認できるように、メールタグを設定します。
メールのときと同じく、フォームタグをメールタグにして設定します。
これでメール(2)の送信先に使用している[your-email]が、フォームで入力されたお問い合わせの方のメールアドレスを識別し、自動でメールが返信されます。
お問い合わせフォームからメールを受け取る
WordPressのContact Form 7の使い方、最後は問題なくフォームが機能してメールが送信出来るか確認です。
本番環境なら下書き状態でもメールが送信できます。
シワ寄せ株式会社のコンタクト三郎太さんがお問い合わせフォームを入力しています。
あっ、なんかメール届きました、確認してみましょう。
シワ寄せ株式会社のコンタクト三郎太さんが、会員申込みしたいようですね。
まったく..シワ寄せさんも物好きね…
このとき送信されたメールはContact Form 7のメールで設定した自分へのメールです。
これと同時にコンタクト三郎太さんには自動返信メールが飛んでいます。
良かった、ちゃんと申し込み出来てたんやね。じゃ1〜2日返信を待つか。
このとき送信されたメールはContact Form 7のメール(2)で設定した自動返信メールです。
このようにWordPressでContact Form 7の使い方を覚えると、何かしらのサイトで必要とするフォームとメール送信を簡単に行うことが出来ます。
重要なのは、WordPressに設置するContact Form 7のフォーム作成時に、フォームタグとメールタグを同じ名前で使えているか。メールの追加ヘッダーがエラーになる場合は、フォームのemailタグは必須になっているのか。です。
長い記事になってしまいましたが以上です。
※記事内で登場した「なんちゃら太郎」「コンタクト三郎太」「シワ寄せ株式会社」は架空です。
