お問い合わせを実装出来るプラグイン、Contact Form 7は、デフォルトだとかなりシンプルです。
もう少しおしゃれにしたい、チェックボックスを設置したい、中央寄せが出来ない、CSSが効かない等あると思います。
THE THOR風お問い合わせにするカスタマイズ方法について、説明します。
コピペだけで出来ます。
はじめに
ある日、3000件を超える海外からのスパムメールが来ていました……
THE THORのお問い合わせを使っていて、reCAPTCHAv3も導入していたので、なぜだろうと思いました。
いろいろ調べたら、THE THORのお問い合わせとreCAPTCHAは相性が悪く、機能しないとのことでした。
これは、表示されていたのですが、全くダメでした。
だから、Contact Form 7のお問い合わせを導入して、THE THOR風にしていきます。
Contact Form 7のコンタクトフォームの編集
Contact Form 7をインストールして、有効化します。
使ったことがない人は、お問い合わせの新規追加を、クリックします。
使ったことがある人は、コンタクトフォーム-編集をクリックします。
①のタイトルに、お問い合わせと記入します。
②のフォームに書くことについて
[text* your-name autocomplete:name] </label><label> メールアドレス<span class=”otoiawase-required”>必須</span>
[email* your-email autocomplete:email] </label><label> 件名<span class=”otoiawase-required”>必須</span>
[text* your-subject] </label><label> お問い合わせ内容
[textarea your-message] </label>
[acceptance acceptance-???] 入力内容をご確認の上、チェックを入れて送信してください。 [/acceptance] [submit “送信”] このサイトはreCAPTCHAによって保護されており、<a class=”a_link” href=”https://policies.google.com/privacy”>プライバシーポリシー</a>と<a class=”a_link” href=”https://policies.google.com/terms”>利用規約</a>が適用されます。
otoiawase-requiredとa_linkというクラス名は、私が勝手に付けただけです。
各自好きなクラス名を、付けて下さい。
spanタグに囲まれた必須を、付けてみました。
???の部分は、人によって異なる数値が入ります。すぐ後で説明します。
チェックボックスの部分は、④の承諾確認をクリックします。
同意条件に、入力内容をご確認の上、チェックを入れて送信してください。と書きます。
チェックボックスは、必須にしたい為、チェックを外します。
タグを挿入をクリックします。
※ここの黒塗りの部分は、さっきの???の部分で、人によって異なる数値が入ります。
reCAPTCHAの部分は、このロゴを消していない人は書く必要がありません。
しかし、消している人は、原則書く必要があります。
最後に、⑤の保存をクリックします。
③のメールに書くことについて
送信先に、メールのアドレスを記入して下さい。
お問い合わせがきた場合、そこにメールが入ります。
最後に、⑤の保存をクリックします。
これで、コンタクトフォームの編集は完了です。
THE THOR風のデザインにする為の追加CSS
/* お問い合わせ */
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
.wpcf7-form-control.wpcf7-textarea
{
width: 100%;
display: block;
padding: 10px;
border-radius: 5px;
background: #f2f2f2;
border: 1px solid rgba(0,0,0,.1);
}
.wpcf7-form-control.wpcf7-submit.has-spinner {
display: block;
margin: 10px auto 0;
color: #ffffff;
background-color: #b2384e;
border-radius: 5px;
border: none;
border-bottom: solid 3px rgba(0,0,0,.25);
font-size: 1.4rem;
font-weight: 700;
overflow: hidden;
line-height: normal;
cursor: pointer;
transition: .15s;
}
.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
opacity: 0.7;
}
@media screen and (min-width: 768px) {
.wpcf7-form-control.wpcf7-submit.has-spinner {
padding: 20px 50px;
}
}
.otoiawase-required {
display: inline-block;
margin-left: 10px;
text-align: center;
padding: 0 5px;
font-size: 1.2rem;
background: #c1272d;
color: #fff;
border-radius: 5px;
}
/* リンク */
.a_link {
color: #0066ff !important;
font-weight: bold;
text-decoration: underline;
}
.a_link:hover {
opacity: 0.5 ;
text-decoration: none
}送信ボタンを、display: block;とmargin: 0 auto;で、中央寄せしています。
Contact Form 7のお問い合わせを実装する
固定ページ-新規固定ページを追加で、固定ページを開きます。
タイトルに、お問い合わせと記入します。
そして、パーマリンクは多くの人がcontactにしていると思いますが、これを機にotoiawaseにしてみました。
これで、完了です！
スパム対策
// Contact Form7のお問い合せフォーム項目にひらがなが無ければ送信不可
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;
}これを、子テーマのfunctions.phpに書いておいて下さい。
wp-content/themes/the-thor-child/functions.phpにあります。
これを書くことで、お問い合わせ内容にひらがなが1文字も入っていないと、送信不可になります。
reCAPTCHAを、お問い合わせだけに制限する場合
// reCaptcha読み込み制限
function recaptcha_limitation() {
if( ! is_page( 'otoiawase' )){
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'recaptcha_limitation', 50 );これを、子テーマのfunctions.phpに書いておいて下さい。
これを書くことで、reCAPTCHAを、お問い合わせだけに制限することが出来ます。
お問い合わせのパーマリンクがcontactの人は、otoiawaseの部分をcontactに変えて下さい。
さいごに
今日は、ありがとうございました。では、また！