こんにちは。
インターンの疋田です。
WordPressサイトのお問い合わせフォームプラグインといえばcontact-form-7が有名ですよね。
今回は、contact-form-7を便利に使うためのカスタマイズ方法をいくつか紹介します。

確認画面を設置する

contact-form-7でちょっと辛いのが確認画面がないこと。日本人は特に確認したいという要望も強いため付けないわけにはいきません。
しかし、今後も確認画面を追加する予定はないって話も聞いたりします。
そんな時に便利なプラグインが「contact-form-7-add-confirm」です。
このプラグインを使えばcontact-form-7にも確認画面を追加することができます。

使い方は簡単。例によって公式からダウンロードしてpluginsフォルダに入れます。
管理画面から有効化するとcontact-form-7の管理画面に以下の様な「確認」と「戻って編集」ボタンが追加されます。

それを設置するだけです。それぞれのボタンを設置すると、最初は「確認」ボタンのみが表示されます。「確認」ボタンを押すと確認画面が表示され、「送信」「戻って編集」ボタンも表示されます。

お問い合わせ内容をデータベースと管理画面で管理

 TrustFormみたいにお問い合わせ内容を管理画面でも確認できるようにしたい！
そんなときに便利なのが「contact-form-DB」です。これを使うとお問合せの内容がデータベースに格納され管理画面上で管理できるようになります。

しかも、データのエクスポート機能がついており、エクセルやCSV形式で出力することができます。

フォームにバリデーションをかける 

次はバリデーションについてです。
お問合せフォーム等でよく、氏名（フリガナ）やメールアドレス（確認）て見ると思います。今回はこの２つのバリデーションについて紹介します。私はこんな感じで書いてみました。

functions.phpに以下コードを書いて下さい。

<!--?php 
/**
 * contact-form-7プラグインでメールアドレス確認
 *参考：https://plugins.trac.wordpress.org/browser/contact-form-7/trunk/modules/text.php?rev=194063#L87
 * =--> Validation filter付近
 */

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

function wpcf7_email_confirm( $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]) {
        $result['valid'] = false;
        $result['reason'][$name] = '確認用のメールアドレスが一致していません';
      }
    }
  }
  return $result;
}

/**
 * contact-form-7プラグインにて姓、名のフリガナが正しいかどうかを確認
 *
 */
add_filter('wpcf7_validate_text', 'wpcf7_validate_kana', 11, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validate_kana', 11, 2);

function wpcf7_validate_kana($result,$tag){
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim(strtr((string) $_POST[$name], "\n", ""));
  if('text' == $type || 'text*' == $type){
    if(preg_match('/(.*)-kana$/', $name, $matches)){
      if(preg_match("/^[ァ-ヾ]+$/u",$_POST[$name]) == false){
        $result['valid'] = false;
        $result['reason'][$name] = '全角カタカナで入力してください。';
      }
    }
  }
  return $result;
}

 使い方はメールアドレス確認の場合は

メールアドレス

[email* your-email]

メールアドレス (確認用）

[email* your-email-confirm]

フリガナチェックの場合は

氏名（フリガナ）

[text* your-name-kana

をcontact-form-7の管理画面で入力すれば大丈夫です。

投稿者紹介

株式会社ユニキャスト

私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

最近のエントリ

• レポート2019.10.28ユニキャストレストランを開催しました🍳
• レポート2019.08.29社内研修ワークショップ～マシュマロ・チャレンジ～
• レポート2019.08.06Computex/InnoVEX　出展者・通訳として参加してきました。
• レポート2018.06.12Computex 2018 レポート