Contact Form 7を使ってみる

WordPressプラグインのContact Form 7を使って、問い合わせフォームを作成してみます。

インストール

管理画面から プラグイン > 新規追加 を選択して、検索ボックスで「Contact Form 7」と検索します。
Contact Form 7のインストールと有効化を行います。

左メニューにお問い合わせが追加されました。

使い方

デフォルトで用意されているフォームをページに表示してみます。
左メニューのお問い合わせを選択して、コンタクトフォーム1のショートコードをコピーします。

今回の場合、以下のようなショートコードになります。

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

このショートコードを固定ページに貼り付けます。
もしくはグーテンベルグを使用している場合、ブロックの選択内にある「Contact Form 7」からも選択できます。

セレクトボックスから使用するフォームを選択すればOKです。

固定ページを公開すると、以下のような内容で表示されました。

<div role="form" class="wpcf7" id="wpcf7-f6515-p6516-o1" lang="ja" dir="ltr">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/xxxxx/#wpcf7-f6515-p6516-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="6515" />
<input type="hidden" name="_wpcf7_version" value="5.4" />
<input type="hidden" name="_wpcf7_locale" value="ja" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f6515-p6516-o1" />
<input type="hidden" name="_wpcf7_container_post" value="6516" />
<input type="hidden" name="_wpcf7_posted_data_hash" value="" />
</div>
<p><label> 氏名<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> メールアドレス<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> 題名<br />
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> メッセージ本文 (任意)<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output" aria-hidden="true"></div></form></div>

カスタマイズ

先ほどはデフォルトで用意されているフォームで設置を試してみましたが、次はフォームの内容やフォーム送信後のメールの設定などをカスタマイズしてみます。
左メニューのお問い合わせから、先ほどページに追加したコンタクトフォーム1を選択します。

フォームの項目変更

フォームの項目を変更する場合、「フォーム」タブ内から変更ができます。
デフォルトのフォームだとフォームタブ内は以下のような内容になっています。

<label> 氏名
    [text* your-name] </label>

<label> メールアドレス
    [email* your-email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

このテキストエリアに項目を追加・変更することで、フォームの項目を変更できます。

例として、2番目に電話番号を追加してみます。
テキストエリア内の追加したい位置にフォーカスを当てた状態で、上部のボタンをクリックします。

今回は電話番号の入力を追加するので、電話番号のボタンをクリックしました。
テキストエリア上部のボタンをクリックすると、そのタグの生成画面が表示されます。

タグを挿入して、labelタグを他の項目と同じように設定して以下のようにしました。

<label> 氏名
    [text* your-name] </label>

<label> 電話番号
    [tel tel-489] </label>

<label> メールアドレス
    [email* your-email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

下部の保存ボタンをクリックしてから先ほどのフォームを確認すると、電話番号の項目が追加されました。

メールの内容変更

フォーム送信後のメールの内容変更は、「メール」タブから行えます。

メールの設定では、前述のフォーム項目で使用したタグ名や、プラグイン側で用意されているメールタグなどが使用できます。
メールの設定は以下の項目の変更ができます。

• 送信先
• 送信元
• 題名
• 追加ヘッダー
• メッセージ本文
• ファイル添付

追加ヘッダーにはCCやBCCの設定などが追加できます。
例えばCCを追加したい場合、以下の1行を追加します。

Cc: hogehoge@example.com

追加ヘッダーにデフォルトで入っているReply-Toは、受信したメールに返信をした際の送信先の設定になります。

ファイル添付はメールにファイルを添付する機能で、フォームの項目でファイルを設定している場合はそのファイルの添付か、サーバにアップロードされているファイルの添付を行うことができます。
フォームで添付されたファイルを使用する場合はそのメールタグを、サーバのファイルの場合はwp-contentディレクトリからの相対パスを記述すればOKです。

デフォルトだとサイト管理者へのみメールが送信されますが、問い合わせ者への自動返信メールを別途設定したい場合は最下部にある「メール (2) を使用」にチェックを入れます。

変更できる項目は上記と同じなので、自動返信用に適宜変更すればOKです。

メッセージの変更

送信完了時やエラー時のメッセージを変更する場合は「メッセージ」タブ内から変更します。
下記項目が変更できます。

• メッセージが正常に送信された
• メッセージの送信に失敗した
• 入力内容に不備が見つかった
• 送信がスパムと見なされた
• 承諾が必要な項目が承諾されていない
• 入力必須の項目が入力されていない
• ユーザー入力が最大許容文字数を超える項目がある
• ユーザー入力が最小許容文字数に満たない項目がある
• ファイルのアップロードが何らかの理由により失敗している
• アップロードされたファイルが許可されたファイル形式に適合しない
• アップロードされたファイルが大きすぎる
• ファイルのアップロードが PHP のエラーにより失敗している
• 入力された日付の形式が正しくない
• 日付が最小制約日より小さい
• 日付が最大制約日より大きい
• 入力された数値の形式が正しくない
• 数値が最小制約値より小さい
• 数値が最大制約値より大きい
• クイズに対する正しい答えが入力されなかった
• 入力されたメールアドレスの形式が正しくない
• 入力された URL の形式が正しくない
• 入力された電話番号の形式が正しくない

フォーム送信完了時は以下のようにフォーム下部にメッセージが表示されます。

エラー時は各入力項目下部にエラーが表示されるのと、フォーム下部にメッセージが表示されます。

送信後にメッセージ表示ではなく完了画面に遷移させたい場合、DOMイベントがいくつか用意されているのでそちらを使用します。
DOMイベントについて詳しくは公式のドキュメントをご確認ください。

今回はwpcf7mailsentを使用して、フォームを埋め込んでいるページ内に下記を追加します。

document.addEventListener('wpcf7mailsent', function(event) {
  location = '【遷移先URL】';
}, false );

これでフォーム送信後にページ遷移するようになりましたが、ページ遷移するまでの間に元のメッセージが表示されてしまうので、元のメッセージ部分はCSSで非表示にしておくとよさそうです。

その他の設定

最後に「その他の設定」のタブですが、WordPressにログインしているユーザーのみフォームを送信できるようにしたり、フォーム送信時にメールを送らないようにするなどの設定ができます。

詳しくは公式のドキュメントを確認ください。