【Contact Form 7】初期設定、応用設定　テンプレート公開

基本設定【テンプレート】

※注意：変数名（[your-name]など）は、ご自身で設定してください

<p style="text-align: center;"><span style="font-size: 12pt;"><strong>●●●●●●●へのご依頼・ご相談・お問い合わせ</strong></span></p>

<span class="any">任意</span> 御社名
    [text your-office]

<span class="required">必須</span> お名前 (必須)
    [text* your-name]

<span class="required">必須</span> フリガナ (必須)
    [text* your-name-furi]

<span class="required">必須</span> メールアドレス (必須)
    [email* your-email]

<span class="required">必須</span> メールアドレス確認 (必須)
    [email* your-email_confirm]

<span class="required">必須</span> 電話番号 (必須)
    [tel* tel]

<span class="any">任意</span> お問合せのタイトル (任意)
    [text title]

<span class="required">必須</span> お問合せの内容 (必須)
    [textarea* your-message]

[submit "送信"]

CSSのソースコード【テンプレート】

外観→カスタマイズ→一番下の追加CSSに追加してください

/* contact form 7 */
/* 必須マーク */
.required{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #D80100;
	border-radius: 20px;
}

/* 任意マーク */
.any {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea,select.wpcf7-form-control.wpcf7-select {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 必須項目の入力欄を黄色にする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,select.wpcf7-form-control.wpcf7-select {
	background: #FFFFFF;
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%;
	height: 80px;
	background: #27c038;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

自動返信メール通知【テンプレート】

読者側に返信する自動メール

[your-name] 様

この度は「●●●●● お問い合わせフォーム」にお問合せ頂き、誠にありがとうございます。ご返信まで今しばらくお待ち下さい。

お問い合わせ内容
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■お客さまの情報

お名前：[your-name]
メールアドレス： [your-email]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■お問い合わせ内容

[your-message]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


----------------------------------------------------------
●●●●●（ここにサイト名を入力）
----------------------------------------------------------



-- 
このメールは ●●●●● (https://●●●●●) のお問い合わせフォームから送信されました

管理者側に返信する自動メール

下記の内容でお問い合わせがありました。

差出人: [your-name] <[your-email]>

御社名
[your-office]

お名前
[your-name]

フリガナ
[your-name-furi]

メールアドレス
[your-email]

電話番号
[tel]

お問合せのタイトル
[title]

お問合せの内容
[your-message]



-- 
このメールは ●●●●●(https://●●●●●) のお問い合わせフォームから送信されました

メールアドレスの入力ミスチェックのエラー設定【テンプレート】

１）お問い合わせフォーム設置の初期のHTMLの変更して対応

一番上のテンプレート設定した場合はこの変更はすでに完了しておりますのでphpの設定をしてください。

[email* your-email]
→ メールアドレス
[email* your-email_confirm]
→ メールアドレス確認

２）「function.php」に以下のコードを記述

//メールアドレス入力エラーチェック
function wpcf7_main_validation_filter( $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;
}

add_filter( 'wpcf7_validate_email', 'wpcf7_main_validation_filter', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_main_validation_filter', 11, 2 );