カテゴリー別アーカイブ: ContactForm7

Contact Form7にGoogle Analyticsのコンバージョンタグを設定する方法

Contactform7にoogle Analyticsのコンバージョンタグを設定するときに、
意外とつまづいてしまったのですが、
すごくわかりやすく紹介してくれているサイトを発見しました。

簡単で完璧!WordPressの問い合わせフォームのプラグイン『Contact Form7』にGoogle Analyticsのコンバージョンタグを設定する方法 | レンタルサーバー Staff Blog

このサイトを参考にするとばっちりです!

Contactform7にサンキュー画面を!

Contactfom7は確認画面はありませんが、それについては以前記事で書きました。

Contactform7で確認用メールアドレスを実装する。

今回はサンキュー画面を実装したいと思います。

実はすごく簡単です!

まず、サンキュー画面の固定ページを作ります。
※urlがhttp://xxx.com/thankyou/だとします。

後はContactform7の設定画面の一番下にある[その他]の部分に以下のコードを入力します。

on_sent_ok: "location.replace('http://xxx.com/thankyou/');"

これで、本格的な問い合わせフォームっぽくなりましたね!

Contactform7で確認用メールアドレスを実装する。

よく、Contactform7で確認画面がないことを指摘しているのですが、
メールアドレス自体の確認が実装できればさほど問題はないですよね?

そこでfunctions.phpに以下のコードを入力

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

その後、Contactform7の設定画面にて、以下のコードを入力

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

これで確認画面は必要なくなりましたね!

Contactform7で住所を自動入力にする

以前Trustformの際にも書きましたが、 やはり住所の自動入力をContactform7で使いたいときは以下のようにします。 header内の

の直下に以下のコードを入力します。

<!-- 住所自動入力 -->
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function(){
AjaxZip3.JSONDATA="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/zipdata";
jQuery('#postcode').keyup(function(event){
AjaxZip3.zip2addr(this,'','your-pref','your-address');
})
jQuery('#postacode').keyup(function(event){
AjaxZip3.zip2addr(this,'','your-apref','your-aaddress');
})
})
//]]>
</script> 
<!-- 住所自動入力ここまで -->

もちろんsslのときは

<!-- 住所自動入力 -->
<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function(){
AjaxZip3.JSONDATA="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/zipdata";
jQuery('#postcode').keyup(function(event){
AjaxZip3.zip2addr(this,'','your-pref','your-address');
})
jQuery('#postacode').keyup(function(event){
AjaxZip3.zip2addr(this,'','your-apref','your-aaddress');
})
})
//]]>
</script> 
<!-- 住所自動入力ここまで -->

です。 後はコンタクトフォームで

ご住所 (必須) ※郵便番号を入力すると、都道府県、市区町村までは自動で入力されます。
郵便番号[[text* your-postcode id:postcode 10/]]
都道府県[[text* your-pref 10/]]
市区町村[[text* your-address]]
番地以下[[text* your-address2]]

のように指定し、メールの中には

住所 : 〒[your-postcode][your-pref][your-address][your-address2]

とコードを入れる。 すると、住所を自動入力することができるようになります!