WordPress

【Cocoon】お問い合わせフォームのカスタマイズ

Cocooncustomize

今回は、プラグインの「Contact Form 7」を使って設置したお問い合わせフォームをカスタマイズしていきます。

まだお問い合わせフォームを設置していない方はこちらの記事からどうぞ。

WordPress-Contact-Form
【Cocoon】WordPressお問い合わせフォームの設置方法 今回はWordPressでのお問い合わせフォームの設置方法について解説していきます。 お問い合わせフォームってどうやって設置する...

【Cocoon】お問い合わせフォームのカスタマイズ

今回カスタマイズするのは以下の3点です。

  • 入力必須項目にアスタリスクを付ける
  • メールアドレスの確認入力欄を作る
  • フォーム送信前の承諾確認チェックボックスを作る

それでは一つずつ見ていきましょう。

入力必須項目にアスタリスクを付ける

デフォルトでは「お名前」の後ろが(必須)となっていますが、これをアスタリスクに変更してみましょう。

下記のコードを「フォーム」のアスタリスクをつけたい項目の後ろに記述します。

<span class="asterisk">*</span>

次に下記のコードを「子テーマのCSS」に記述します。

.asterisk {
  margin-left: 0.2em;
  color: #f5637a;
}

以上で完了です。

メールアドレスの確認入力欄を作る

下記のコードを「フォーム」の「メールアドレス」「メールアドレス確認」にそれぞれ記述します。

[email* inquiry_mail]
[email* inquiry_mail_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 );

以上で完了です。

フォーム送信前の承諾確認チェックボックスを作る

フォーム」の「承諾確認」をクリック。

「チェックボックスを任意選択にする」のチェックを外す

「タグを挿入」し、必要な文言を記述します。

当サイトでは、 「※上記の内容で送信します。よろしければチェックを入れて送信してください。」

としています。

次に下記のコードを「その他の設定」に記述します。

acceptance_as_validation: on

以上で完了です。

まとめ

送信ボタンをクリックした時に、入力エラーの文言が表示されればOKです。

ABOUT ME
Keisuke
Keisuke
スペイン滞在3年目。一般企業を退職→バレンシアへ留学→マドリードで就職。WordPressとWebデザインを勉強&仕事受注中。学んだことを当ブログで発信しています。たまにスペインのことも。 訪問国は欧州20ヶ国50都市。