15078

【WordPress】コピペOK!Contact Form 7をカスタマイズ 

「Contact Form 7 をカスタマイズしたいけど、どうやっていいかわからない!」

そんな人に向けて本記事では、WordPress のプラグインである Contact Form 7 を高性能デザインにカスタマイズ!

コピペOKなので、WEB初心者やカスタマイズしたことないユーザーにとっても便利で、誰でも利用できます。

Contact Form 7をカスタマイズした完成品

Contactform7 カスタマイズ完成品

プラグインのContact Form 7をインストール

Contact Form 7と検索

WordPress のプラグインにある検索バーから”Contact form 7″と入力。

Contactform7今すぐインストール

今すぐインストールボタンをクリックし、有効化ボタンを押しましょう。

次は、Contact Form 7 で編集する画面に遷移します。

Contact Form 7で編集する画面に遷移

プラグイン Contact Form 7 設定

プラグインの一覧に、Contact Form 7 の設定ボタンをクリック。

ワードプレスのダッシュボードの左サイドバーのお問い合わせボタンでも遷移します。

コンタクトフォーム1

コンタクトフォーム1をクリックして、Contact Form 7 の編集画面で設定していきます。

Contact Form 7のフォームタブ内

<table class="inquiry">

<tr>
<th>
<span class="any">任意</span><span>会社名・媒体名</span>
</th>
<td>
[text your-company class:textsp placeholder"株式会社〇〇"]
</td>
</tr>

<tr>
<th>
<span class="any">任意</span><span>部署名</span>
</th>
<td>
[text your-busho class:textsp placeholder"営業部"]
</td>
</tr>

<tr>
<th>
<span class="haveto">必須</span><span>氏名</span>
</th>
<td>
[text* your-name class:textsp placeholder"佐藤太郎"]
</td>
</tr>

<tr>
<th>
<span class="haveto">必須</span><span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder"tarosato@gmail.com"]</td>
</tr>

<tr>
<th>
<span class="haveto">必須</span><span>メールアドレス確認</span>
</th>
<td>[email* your-email_confirm class:mailsp placeholder"tarosato@gmail.com"]</td>
</tr>

<tr>
<th>
<span class="haveto">必須</span><span>電話番号</span>
</th>
<td>
[tel* your-tel class:tel placeholder"03-1234-5678"]
</td>
</tr>

<tr>
<th>
<span class="any">任意</span><span>ご住所</span>
</th>
<td>
[text your-address class:p-locality placeholder"東京都港区六本木1-2-3"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>お問い合わせ内容詳細</span>
</th>
<td>
[textarea* your-message class:content placeholder "テキスト入力欄"]
</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]個人情報保護方針に同意します。
[submit id:formbtn "上記の内容で送信する"]

your-email_confirm を記述する際の注意点

// コンタクトフォームの編集画面
[email* your-email_confirm class:mailsp placeholder"tarosato@gmail.com"]

間違えても以下のように、ハイフンを記述してカスタマイズするのはやめましょう。

your-email-confirm

your-email_confirm の記述は、アンダーバーが正解です。

Contact Form 7のメールタブ内

このメールは、一般のお問い合わせ (ブログ.com/inquiry) から送信されました。

会社名・媒体名:[your-company]
部署名:[your-busho]
差出人: [your-name] 
Eメールアドレス: [your-email]
Eメールアドレス確認:[your-email_confirm]
電話番号:[your-tel]
ご住所:[your-address]
個人情報保護方針に同意:[acceptance-442]
お問い合わせ内容詳細:[your-message]

上記は、お問い合わせフォームから実際にメッセージがあった場合のショートコードです。

以下のような形で送信先に届きます。

このメールは、一般のお問い合わせ (ブログ.com/inquiry) から送信されました。

会社名・媒体名:株式会社〇〇
部署名:営業部
差出人: 佐藤太郎
Eメールアドレス:tarosato@gmail.com
Eメールアドレス確認:tarosato@gmail.com
電話番号:0312345678
ご住所:東京都港区六本木1-2-3
個人情報保護方針に同意:同意する
お問い合わせ内容詳細:Contact Form7のテスト配信です。
よろしくお願いいたします。

Contact Form 7のメッセージタブ内

メッセージは基本的にデフォルト設定のまま、カスタマイズせずにでも問題ないです。

しかし、ユーザーの為になるのであれば、メッセージが正常に送信された場合は、以下に返すべきでしょう。

ありがとうございます。メッセージは送信されました。3営業日以内に返信いたします。

いつまでに返信するかの旨を挿入しておけば、ユーザーにとって優しい設計になります。

Contact Form 7のその他設定内

Javascript で、

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

アラートを出力するカスタマイズもできますが、2017年末で廃止すると Contact Form 7 プラグインを作った Takayuki Miyoshi氏が謳っています。

こちらの設定は不要です。

on_sent_ok は廃止されます

Contact Form 7のページ読み込みを制限する

外観→テーマエディター→ function.php で Contact Form 7 のページ読み込みの制限をするカスタマイズです。

// function.php
function wpcf7_file_load() {
      add_filter( 'wpcf7_load_js', '__return_false' );
      add_filter( 'wpcf7_load_css', '__return_false' );
      if( is_page( 'otoiawase' ) ) {
            if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
            }
            if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
            }
      }
}
add_action( 'template_redirect', 'wpcf7_file_load' );

Contact Form 7 の特徴として、Contact Form 7 が表示されていないページも Contact Form 7 が読み込まれてしまうという現象があります。

function.php で Contact Form 7 の読み込みを制限するプログラムを記述します。

メールアドレスの記述確認

// function.php
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;
}

確認用のメールアドレスが間違っていると、”確認用のメールアドレスが一致していません” とフォームの下部に表示されるカスタマイズです。

メールエラー

英文字のスパム対策

// Contact Form 7 の textarea にひらがなが含まれなければエラーにする
add_filter('wpcf7_validate_textarea', 'wpcf7_validation_textarea_hiragana', 10, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validation_textarea_hiragana', 10, 2);

function wpcf7_validation_textarea_hiragana($result, $tag)
{
    $name = $tag['name'];
    $value = (isset($_POST[$name])) ? (string) $_POST[$name] : '';

    if ($value !== '' && !preg_match('/[ぁ-ん]/u', $value)) {
        $result['valid'] = false;
        $result['reason'] = array($name => 'この内容は送信できません。');
    }

    return $result;
}

上記の記述で、英語の文章で送られてくるスパムメールはなくなります。

CSSで外観をカスタマイズ

/*スマホサイズ*/
@media(max-width:450px) {
  .inquiry th, .inquiry td {
    display: block!important;
    width: 100%!important;
    border-top: none!important;
    -webkit-box-sizing: border-box!important;
    -moz-box-sizing: border-box!important;
    box-sizing: border-box!important;
  }
  .inquiry tr:first-child th {
    border-top: 1px solid #d7d7d7!important;
  }
  /*必須・任意のサイズ調整*/
  .inquiry .haveto, .inquiry .any {
    font-size: 10px;
  }
}

/*全体*/
/*見出し欄*/
.inquiry th {
  text-align: left;
  font-size: 14px;
  color: #444;
  padding-right: 5px;
  width: 30%;
  background: #f7f7f7;
  border: solid 1px #d7d7d7;
  vertical-align: -webkit-baseline-middle;
}

/*通常欄*/
.inquiry td {
  font-size: 13px;
  border: solid 1px #d7d7d7;
}

/*横の行とテーブル全体*/
.entry-content .inquiry tr, .entry-content table {
  border: solid 1px #d7d7d7;
}

/*必須のデザイン*/
.haveto {
  font-size: 7px;
  padding: 5px;
  background: #ff9393;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}

/*任意のデザイン*/
.any {
  font-size: 7px;
  background: #fff;
  color: #3498db;
  border-radius: 5px;
  border: 1px solid #3498db;
  margin-right: 5px;
  padding: 2px 6px 2px 5px;
  position: relative;
  bottom: 1px;
}

/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item {
  display: block;
}

/*送信ボタンのデザイン*/
#formbtn {
  display: block;
  background: #380000;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 2px;
  margin: 25px auto 0;
}

/*送信ボタンのマウスホバー時*/
#formbtn:hover {
  background: #fff;
  color: #380000;
  border: 2px solid #380000!important;
}

.wpcf7-list-item {
  display: inherit;
}

/*既存のリスト(点)を非表示*/
 .post_content ul { 
  list-style: none;
  margin: 0;
}

/*初期アラート画面の非表示*/
.screen-reader-response {
  display: none;
}

/*エラーアラートの出力*/
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-acceptance-missing {
  margin: 10px 0 12.5px 0;
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
  padding: 10px 15px;
}

/*サクセスアラートの出力*/
.wpcf7-response-output.wpcf7-mail-sent-ok {
  margin: 10px 0 12.5px 0;
  color: #3A87AD;
  background-color: #D9EDF7;
  border: 1px solid #BCE8F1;
  padding: 10px 15px;
}

ボタンデザイン

左は通常時、右はマウスホバー時。文字色と背景色がホバー時に反転するカスタマイズです。

CSS カスタマイズの /*送信ボタンのデザイン*/ と /*送信ボタンのマウスホバー時*/ 内の background: と color: を反対にして変更すれば、フォントと背景色が反転します。

配色コードの #fff;#380000; を変えれば、好きな配色に修正が可能です。

エラーアラートとサクセスアラート

Contactform7 エラー

PHP で条件分岐で記述しようと思いましたが、CSS 内で実装が出来ました。

赤枠のエラーアラートは、フォーム内の記述ミスや空白欄、チェックボックスを選択していない場合、フォーム下部へ出力するようになっています。

青枠のサクセスアラートは、メッセージの送信が完了したときに出力されます。

配色は、Bootstrap のアラート用に使うクラスを参考にしました。

エラーアラート

入力内容に問題があります。確認して再度お試しください。

メッセージを送信する前に個人情報保護方針の同意が必要です。

サクセスアラート

ありがとうございます。メッセージは送信されました。3営業日以内に返信いたします。

まとめ

Contact Form 7 のカスタマイズは、CSS や PHP さえ覚えれば、誰でもカスタマイズできます。

自分にあった Contact Form 7 を作成してみましょう。

参考記事
Contact Form 7をプロ級フォームにカスタマイズする方法
Contact Form 7で、メールアドレスの確認用入力と一致チェック機能をつける

コメント

タイトルとURLをコピーしました