Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[WordPress] Contact Form 7 基本+カスタマイズ

Contact Form 7

WordPressの有名なメールフォームプラグイン Contact Form 7をご紹介します。みよし たかゆきさんが作ったプラグイン!更新をマメにして下さるので安心ですね。CAPTCHA、Akismet スパムフィルタリング、Google スプレッドシートとの連携など、他のプラグインと組み合わせて更に便利に使う事が出来る様です。

必要最小限の機能のみなので、初心者にはちょっとハードルが高いです。MW WP Formよりスキルが必要な上級者向けです。

  • 内容確認や送信完了ページが無い
  • バリデーションが付いていない
  • マニュアルを読み解くにも知識が必要
  • フォームの複製が楽
  • シンプルなフォームで良い人には使いやすい
  • スキルがある方にはカスタマイズしやすい様です
INDEX

初期設定

まずは、プラグインをインストールし、有効化します。環境よっては英語版になってしまっていると思います。[更新]の表示が出ていると思いますので、翻訳ファイルを更新して下さい。日本語になります。

Localを使用した構築では何かと英語になります。

極、基本的な使い方

[お問い合わせ] → 「コンタクトフォーム」でフォームを作成し、フォームのショートコードを固定ページ(お問い合わせのページ)に貼り付けて表示させます。

Contact Form 7
Contact Form 7

フォームの作成

新規作成で、ここまで出来上がっています。至ってシンプル。*は必須項目の印です。

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

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

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

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

[submit "送信"]

ボタンを押して、必要な物を加えて行きます。

Contact Form 7

フォームタブだけでなく、メール、メッセージも編集します。

フォームのデザインをカスタマイズする

レスポンシブ対応にしてみました。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 */
}

Contact Form 7 に機能を追加する

Contact Form 7はシンプルなメールフォームなので、欲しい機能を付けるのが、ちょっと大変です。

郵便番号から住所入力する

zipaddr-jpプラグインを使います。

デフォルト値

基本的な書き方は、[text* zip id:zip]です。フォームには、専用の挿入ボタンが無いので[テキスト]を使います。

zipaddr-jp
郵便番号  *zip
都道府県名pref
市区city
町村
( 番地+マンション 入力してもらう)
add

以下の設定の方が必須をつけやすいかも。

郵便番号 *zip
都道府県名pref
市区町村city
以下住所  *
(番地+マンション入力してもらう)
add 01

ちなみに、「デフォルト値」に入力すると、フォームの入力欄に文字を入れる事が出来ます。
[text* addr id:addr “マンション名も”]

2022/01/30追記:デフォルト値で設定しない方が良さそうです。 placeholder を使用した方が入力の妨げになりません。例:[text* addr01 placeholder”マンション名も”] 

カレンダー datepicker

MW WP Form のdatepickerが好きだったのですが代替え。

WordPressテーマ「SWELL」 の様なブロックエディタを使用しているテーマでも動くのですが、ちょっとダサいです。ブラウザによって、デザインが異なる事、Edgeの場合、翌月もその翌月も特定の日にちだけ色が付いています。画像の状態ですと、3月10日、4月10日も色が付いている状態。

カレンダー datepicker

[日付]で作成します。選択範囲を決める事が出来るので、セミナー等の予約に使ったりできます。手入力ですが、例えば、今日から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ファイル又は、カスタマイザーの一番下にある「追加CSS」に書き込むのが手軽です。

.grecaptcha-badge {
margin-bottom: 80px;
}

条件分岐

条件分岐できるプラグインがあるようです。便利そうです。

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

CAPTCHA

INDEX
閉じる