WordPressの有名なメールフォームプラグイン Contact Form 7をご紹介します。みよし たかゆきさんが作ったプラグイン！更新をマメにして下さるので安心ですね。CAPTCHA、Akismet スパムフィルタリング、Google スプレッドシートとの連携など、他のプラグインと組み合わせて更に便利に使う事が出来きます。
必要最小限の機能のみなので、初心者にはちょっとハードルが高いです。MW WP Formよりスキルが必要な上級者向けです。
- 内容確認や送信完了ページが無い
- バリデーションが付いていない
- マニュアルを読み解くにも知識が必要
- フォームの複製が楽
- シンプルなフォームで良い人には使いやすい
- スキルがある方にはカスタマイズしやすい様です
初期設定
まずは、プラグインをインストールし、有効化します。環境よっては英語版になってしまっていると思います。[更新]の表示が出ていると思いますので、翻訳ファイルを更新して下さい。日本語になります。
Localを使用した構築では何かと英語になります。
極、基本的な使い方
[お問い合わせ] → 「コンタクトフォーム」でフォームを作成し、フォームのショートコードを固定ページ（お問い合わせのページ）に貼り付けて表示させます。
フォームの作成
新規作成で、ここまで出来上がっています。至ってシンプル。＊は必須項目の印です。
<label> 氏名
[text* your-name] </label>
<label> メールアドレス
[email* your-email] </label>
<label> 題名
[text* your-subject] </label>
<label> メッセージ本文 (任意)
[textarea your-message] </label>
[submit "送信"]ボタンを押して、必要な物を加えて行きます。
フォームタブだけでなく、メール、メッセージも編集します。
フォームのデザインをカスタマイズする
レスポンシブ対応にしてみました。SCSSはあまりキレイではないのですが、コピペでとりあえず使える状態だと思います。
<div class="form7">
<table>
<tr>
<th>お名前<span class="form7-require">必須</span></th>
<td>[text* your-name] </td>
</tr>
・
・
・
$hover:#8a8a8a;
$point:#b90504;
.form7 .form7-require {
background-color: $point;
border-radius: 5px;
color: #fff;
float: right;
font-size: 11px;
padding: .2em .4em;
}
.form7 table {
margin: 0 0 1em;
table-layout: fixed;
border-collapse: collapse;
border: #ddd solid 1px;
font-size: 100%;
width: 100%;
textarea,input {
width: 100%;
}
}
.form7 table th,
.form7 table td {
border: #ddd solid 1px;
font-size: 100%;
font-weight: normal;
padding: 1.2em;
text-align: left;
vertical-align: top;
}
.form7 table th {
background-color: #f5f5f5;
width: 30%;
}
.form7 table td {background-color: #fff;}
@media screen and ( max-width: 970px ) {
.form7 table,
.form7 table tbody,
.form7 table tr,
.form7 table th,
.form7 table td {
display: block;
width: auto;
}
.form7 table {
border-right: none;
border-bottom: none;
border-left: none;
}
.form7 table th {
border-top: none;
padding: .5em 1em;
}
.form7 table td {
border-top: none;
}
}メッセージボックス部分のデザイン
フォームの下に表示されるメッセージの枠の色は下記の部分なので、子テーマのCSSで書き換えます。もちろん色だけでなく、デザイン全体を変える事も出来ます。
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* Green */
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* Red */
}
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; /* Orange */
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; /* Yellow */
}メッセージボックスを好きな位置に表示する
コンタクトフォームの編集のフォームの中の好きな位置に[response]と加えます。
[response]
お名前：[text* your-name]
メールアドレス：[email* your-email]
・
・
[response]Contact Form 7 に機能を追加する
Contact Form 7はシンプルなメールフォームなので、欲しい機能を付けるのが、ちょっと大変です。
郵便番号から住所入力する
zipaddr-jpプラグインを使う方法
基本的な書き方は、[text* zip id:zip]です。フォームには、専用の挿入ボタンが無いので[テキスト]を使います。
| 郵便番号 * | zip |
| 都道府県名 | pref |
| 市区 | city |
| 町村 （ 番地＋マンション 入力してもらう） | add |
以下の設定の方が必須をつけやすいかも。
| 郵便番号 * | zip |
| 都道府県名 | pref |
| 市区町村 | city |
| 以下住所 * （番地＋マンション入力してもらう） | add 01 |
ちなみに、「デフォルト値」に入力すると、フォームの入力欄に文字を入れる事が出来ます。
[text* addr id:addr “マンション名も”]
2022/01/30追記：デフォルト値で設定しない方が良さそうです。 placeholder を使用した方が入力の妨げになりません。例：[text* addr01 placeholder”マンション名も”]
プラグインを使用しない方法
YubinBangoという無料のライブラリを使用して、3ステップで実装できます。
カレンダー datepicker
MW WP Form のdatepickerが好きだったのですが代替え。
WordPressテーマ「SWELL」 の様なブロックエディタを使用しているテーマでも動くのですが、ちょっとダサいです。ブラウザによって、デザインが異なる事、Edgeの場合、翌月もその翌月も特定の日にちだけ色が付いています。画像の状態ですと、3月10日、4月10日も色が付いている状態。
[日付]で作成します。選択範囲を決める事が出来るので、セミナー等の予約に使ったりできます。手入力ですが、例えば、今日から32日後からしか選択できない様にする事も出来ます。[date date-901 min:+32days]また、[date date-901 min:+1week]なら1週間という感じです。
placeholderは使えない模様です。固くなに yyy/mm/ddのまま。いろいろ解決できていない問題があります。どうすれば良いのでしょう？ご存じの方はご一報頂けると有り難いです。
私自身は試していませんが、プラグインもあるようです。賛否両論で微妙。
メールアドレスのバリデーション
メールアドレスの確認用を設置する場合は、_confirmを付けます。しかし、これだけではメールの形式のバリデーション（@が無いとか、.comが無いとか）だけで、全てが一致するかどうかは確認できないので、function.phpへの追記が必要です。
[email* your-email]
[email* your-email_confirm] add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_extend', 11, 2 );
function wpcf7_validate_email_filter_extend( $result, $tag ) {
$type = $tag['type'];
$name = $tag['name'];
$_POST[$name] = trim( strtr( (string) $_POST[$name], "n", " " ) );
if ( 'email' == $type || 'email*' == $type ) {
if (preg_match('/(.*)_confirm$/', $name, $matches)){
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"一致していません");
} else {
$result['valid'] = false;
$result['reason'][$name] = '一致していません';
}
}
}
}
return $result;
}reCAPTCHAの設置
追加プラグイン無しで設置出来ます。[お問い合わせ] →[インテグレーション]ページの下の方にあります。サイトキーとシークレットキーの入手が必要です。(無料）
Keyの入手方法
記事の「GoogleでKeyを入手する」の章をご確認下さい。
非表示にする
「ページの上へ」のボタンと重なってしまう事があります。CSSファイル又は、カスタマイザーの一番下にある「追加CSS」に書き込むのが手軽です。
.grecaptcha-badge { visibility: hidden; }メールをデータベースに残す（Contact Form 7 Database Addon）
データベースに残すとは、簡単に言うと、「メールをダッシュボードから読める様にする」と言ったところです。ちなみに、MW WP Form にも同様の機能があります。
サーバーに何かが起きてエラーになり、送信が完了しなかったメールも残る様です。設定は不要です。インストールして有効化するだけです。メニューに「コンタクトフォーム」が追加されます。
より便利に利用するエクステンションが多数ありますが、有料です。結構なお値段します。参考まで。
条件分岐
条件分岐できるプラグインがあるようです。便利そうです。
コメント ※ハンドルネームでお願いします