Contact Form 7 よくあるカスタマイズ
•
77 likes•99,867 views
WordBench京都 2013年1月13日 （2015年7月27日 Contact Form 7 の表記を正しく修正しました）
Recommended
More Related Content
What's hot
What's hot (20)
More from Cherry Pie Web
Recently uploaded
Recently uploaded (9)
Contact Form 7 よくあるカスタマイズ
- 1. 2013/01/13 WordBench京都 Cherry Pie Web 川井昌彦 Contact Form 7の よくあるカスタマイズ
- 2. 2 自己紹介 ●川井昌彦（かわいまさひこ） @sakuragi_kei 東京の制作会社で24年間勤めた後、 京都府舞鶴市に帰郷してフリーランスで活動中 実は、DTPのほうが経験が長い （このスライドも InDesign で作っています） 実は、MovableTypeのほうが経験が長い 小桜インコ・シロハラインコ・黒い柴犬のパパ Cherry Pie Web http://www.cherrypieweb.com
- 3. 3 Contact Form 7 について
- 5. 5 メールフォームの流れ チェック、送信部分は、HTMLだけでは作れない 入力 • Formタグ、 Inputタグなどで 構成 • HTMLのみで 作れる チェック • 入力値の チェック • プログラミング が必要 送信 • メール本文構築、 メールサーバー との通信 • プログラミング が必要
- 14. 14 ⑴テキスト で囲んでデフォルト値を指定します [text text1 デフォルト値] watermarkオプション → 透かし文字になります [text text2 watermark 入力の説明]
- 15. 15 ⑵チェックボックス・ラジオボタン defaultオプションで、何個目かを指定します チェックボックスは、複数指定できます ラジオボタンは、複数指定できません [checkbox your-check2 default:2_4 a b c d e]
- 16. 16 ⑶セレクトメニュー defaultオプションで、何個目かを指定します 複数指定したいときは multipleオプションをつけます [select your-select1 multiple default:2_4 a b c d e] 初期値を空にするときは、 include_blankオプションをつけます [select your-select2 include_blank a b c d e] （注意）表示は「…」ですが、 送信される値は null になります！
- 17. 17 セレクトメニュー・ラジオボタン・ チェックボックスで、表示文字と 送信される値を異なる値にする 値を | で区切る [select your-select option1|value1 option2|value2 option3|value3] 書き出されるHTMLは、 | より前の文字になっていますが、 メールに埋め込まれる値は、 | より後の文字になります ※送信される値は送信時にプラグインが置き換えるので、 ユーザーに知られることがありません。 わかりにくい
- 18. 18 テキストフィールドへ値を渡す フォームへGETパラメータで渡す 1. フォームで値を渡したい部分に名前をつけます pお名前 (必須)br / [text* your-name] /p p題名br / [text your-subject] /p 2. フォームへのリンクに GETパラメーターを仕込みます a href=/wp/?page_id=nyourname=名前subject=題名フォームへ/a （フォームとパラメータの名前は違うものにしたほうが、後でデバッグしやすいです） わかりにくい
- 19. 19 3. functions.php に、 フォームの内容に応じて下記のように記述します function my_tag_filter($tag){ if ( ! is_array( $tag ) ) return $tag; if(isset($_GET['yourname'])){ $name = $tag['name']; ←ここは変えちゃダメ！ if($name == 'your-name') $tag['values'] = (array) $_GET['yourname']; } if(isset($_GET['subject'])){ $name = $tag['name']; if($name == 'your-subject') $tag['values'] = (array) $_GET['subject']; } return $tag; } add_filter('wpcf7_form_tag', 'my_tag_filter', 11);
- 20. 20 しかし！ これだと、IEで日本語のパラメータが 文字化けしてしまいます！！ → フォームへのリンクで、urlencode関数を使います a href=/wp/?page_id=xxx yourname=?php echo urlencode('名前'); ? subject=?php echo urlencode('題名'); ?フォームへ/a （読みやすいように改行しています）
- 21. 21 投稿やページに入れる時はショートコードを使います functions.php でショートコードを定義 function urlencode_text_shortcode($attr) { extract(shortcode_atts(array( 'val' = '', ), $attr)); return urlencode($val); } add_shortcode('urlencode_text', 'urlencode_text_shortcode'); 投稿やページでは、 a href=/wp/?page_id=xxx yourname=[urlencode_text val='名前'] subject=[urlencode_text val='題名']フォームへ/a 他のブラウザだと問題がみつからないので、 IEでのテストは必ずやりましょう！
- 22. 22 IME（日本語入力）の 自動切り替えをする フォーム設定画面でタグにclassを指定し、 CSSでIMEのモードを指定する 1. フォームでclass指定します pお名前br / [text your-name class:name] /p pメールアドレスbr / [email your-email class:email] /p pメッセージ本文br / [textarea your-message class:message] /p 書いてない
- 23. 23 2. style.cssでIMEのモードを指定します form.wpcf7-form .email { ime-mode: inactive; ←IME OFF } form.wpcf7-form .name, form.wpcf7-form .message { ime-mode: active; ←IME ON }
- 24. 24 送信ボタンを画像にする ⑴ CSSで画像にする フォーム指定時に、送信ボタンにclassをつけます [submit class:imgsubmit] style.cssで背景画像として設定します input.imgsubmit { border: none; width: 100px; ←画像の幅 height: 30px; ←画像の高さ background: url(送信ボタンの画像のURL) left top no-repeat; text-indent: -9999px; ←ボタンのテキストを非表示にする } （読みやすいように改行しています） 書いてない書いてない
- 25. 25 ⑵自前の送信ボタンにする input type=image value=送信 src=ボタン画像のURL class=wpcf7-form-control wpcf7-submit / （読みやすいように改行しています） ・ボタン画像のURLは、絶対URLか、ルートディレクトリからのパス ・class=wpcf7-form-control wpcf7-submit をつけないと、 メール送信時にローディング画像が表示されません マウスオーバーさせたいなら、こんな感じです input type=image value=送信 class=wpcf7-form-control src=通常のボタン画像のURL onmouseover=this.src='マウスオーバー時のボタン画像のURL' onmouseout=this.src='通常のボタン画像のURL' class=wpcf7-form-control wpcf7-submit / （読みやすいように改行しています）
- 27. 27 1. Contact Form 7 のフォームに id を設定します p郵便番号br / [text zip1] - [text zip2 id:zip]/p p住所br / [text address] /p 2. フォームに onKeyupイベントを追加するため、 JavaScriptを作成します （テーマディレクトリ）/js/jquery.wpcf7.ajaxzip3.js $(function(){ $(#zip).keyup(function(event){ AjaxZip3.zip2addr(zip1,zip2,address,address); }) }) ※AjaxZip3の書式 AjaxZip3.zip2addr(〒上3桁, 〒下4桁, 都道府県, 市区町村, 町域大字, 丁目番地 );
- 28. 28 3. functions.php で読み込みます function cf7_ajaxzip3() { wp_enqueue_script( 'ajaxzip3', 'http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js', array('jquery')); wp_enqueue_script( 'wpcf7-ajaxzip3', get_stylesheet_directory_uri().'/js/jquery.wpcf7.ajaxzip3.js', array('ajaxzip3')); } add_action('wp_print_scripts', 'cf7_ajaxzip3'); （読みやすいように改行しています） wp_enqueue_script を使うと、 bodyの閉じタグの直前にスクリプトが出力されます。
- 29. 29 ※jQueryは、読み込み直しましょう。 WordPressにはjQueryが組み込まれていますが、noConfrictが含められていて、関 数をカプセル化しないと使えない仕様になっていて使いづらいです。 また、下記の形で読み込んだほうが、一般的に高速で動作します。 function load_cdn() { if ( !is_admin() ) { wp_deregister_script('jquery'); wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), '1.7.2' ); } } add_action('init', 'load_cdn'); （jQueryのバージョンは、新しいものに置き換えていただいても良いと思います）
- 31. 31 1. フォームに確認用のタグを追加します pメールアドレスbr / [email* your-email] /p pメールアドレス (確認用）br / [email* your-email_confirm] /p 確認用メールアドレスの名前は、 メールアドレスの名前に、 _confirm を付け足したものになります
- 32. 32 2. functions.phpに以下を書きます （参考サイトに載っているコードの丸写しでOK） ?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; } ?
- 34. 34 そしてもし、 「Google Analyticsで フォーム送信をトラッキングしたいから」 と言われても・・・ （つまり、「送信完了ページへの移動」を 「フォーム送信完了」としたいということ）
- 36. 36 Google Analyticsで 送信完了イベントを取得する方法 _trackPageviewを使う ●フォーム送信を Google Analytics でトラッキングする http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/ （注意） 上記のページに書いてある方法は「同期式」トラッキングコード使用時のものですが、 最近はほとんど「非同期式」です。 非同期式の場合の説明もあるのですが、わかりづらいので注意してください。 書いてある
- 37. 37 管理画面のフォーム設定ページの一番下に「その他の設 定」の項目があるので、そこに以下の行を挿入します on_sent_ok: _gaq.push(['_trackPageview', 'complete.html']); ※書式 _gaq.push(['_trackPageview', '仮想ページ名']); 仮想ページ名は、実際に存在しなくても構いません。 ページへのリンクとして認識されるので、 目標値（コンバージョン）に設定できます。 _trackEventを使って、フォーム送信をイベントとしてとらえることもできます。 イベントも目標値として設定できるらしいです。 また、仮想ページを目標値にすると、ウェブマスターツールでクロールエラーが記録され ることがあるらしい（検索パフォーマンスには影響がない）です。
- 39. 39 ⑴送信完了後、完了ページへ飛ばす 1. 固定ページなどで完了ページを作ります 2. フォーム設定の「その他の設定」に、下記のように記述し ます on_sent_ok: location = '完了ページのURL'; 先ほど出てきた「on_sent_ok」は、送信完了後に、 そのあとに記述したJavaScriptを実行します
- 41. 41 ●送信完了後、フォーム部分を非表示にして メッセージだけ表示する 1. フォーム設定画面で、全体をdivタグで囲みます div class=form-wrapper pお名前br / [text your-name]/p pメールアドレスbr / [email your-mail]/p p[submit 送信] /div 2. style.cssに下記のように記述します .sent .form-wrapper { display: none; } フォームが送信されると、Contact Form 7プラグインによって、 formタグに .sentというクラスがつけられるので、 送信完了後にdivで囲んだ部分が非表示になります
- 42. 42 ●送信完了後、別のテキストや画像を表示する （さきほどの応用です） 1. フォーム設定画面で、全体をdivタグで囲みます さらに、送信後に表示したいものを、divで囲んで記述します pお名前br / [text your-name]/p pメールアドレスbr / [email your-mail]/p p[submit 送信] div class=complete-display pこちらのページもご覧くださいbr / a href=/hoge.htmlimg src=/img/sample.jpg/a/p /div 2. style.cssに下記のように記述します .wpcf7-form .complete-display { display: none; } .wpcf7-form.sent .complete-display { display: block; }
- 43. 43 ●メッセージの表示位置を変える 1. フォーム設定画面で、メッセージを表示したい位置に [response] を記述します [response] pお名前br / [text your-name]/p pメールアドレスbr / [email your-mail]/p p[submit 送信] div class=complete-display pこちらのページもご覧くださいbr / a href=/hoge.htmlimg src=/img/sample.jpg/a/p /div これだと、フォームよりもメッセージが上に表示されます
- 45. 45 JavaScriptで、送信ボタンを押す前に 確認フェーズを「割り込ませる」 ●wordpressのcontact form 7で確認画面を出す 手軽なライブラリ http://aulta.jp/library/wordpress/contactForm7Confirm.html JavaScriptをアップロードして、設定部分を修正し、 header.php とかで読み込ませるだけ これなら、なんとかできそうかも？
- 46. 46 1. フォームに class=title をつけます 囲まれた部分がタイトルとして認識され、エラー表示の時に使われます 送信ボタンは、任意のクラスで囲みます pspan class=title本文/spanbr / [text your-text] /p pspan class=titleメールアドレス/spanbr / [email* your-mail] /p pspan class=titleメールアドレス（確認用）/spanbr / [email* your-mail_confirm] /p p class=submit-btninput type=image value=送信 src=/wp/wp- content/themes/wbkyoto2013_1/img/btn_submit.jpg class=wpcf7-form- control wpcf7-submit //p
- 47. 47 2. ダウンロードしたファイルを解凍し、JSファイルを開き、設定をフォームに合わせて書 き換えます path : フォームがある投稿／ページのパス（カンマで区切って複数可） button : areaClassName : 送信ボタンを囲ったクラス confirm : 確認ボタンのHTML rewrite : 戻るボタンのHTML 'path' : ['/wp/inquiry/'], 'button' : { 'areaClassName' : 'submit-btn', 'confirm' : 'input class=button-confirm type=button value=確認へ /', 'rewrite' : 'input class=button-rewrite type=button value=書き直す /' } フォームによってボタンを変えたいときは、このブロックを複製してください ※投稿の場合、パーマリンク設定が「投稿名」でないと動作しません （ '/wp/?p=1' と指定しても動作しない）
- 48. 48 （送信ボタンを画像にした場合） CSSで送信ボタンを画像にした場合は、styles.css に指定を追加します .submit-btn input { border: none; width: 100px; ←画像の幅 height: 30px; ←画像の高さ background: url(送信ボタンの画像のURL) left top no-repeat; text-indent: -9999px; ←ボタンのテキストを非表示にする } .submit-btn input.button-confirm { /* 確認ボタン */ background: url(確認ボタンの画像のURL) left top no-repeat; } .submit-btn input.button-rewrite { /* 戻るボタン */ background: url(戻るボタンの画像のURL) left top no-repeat; }
- 49. 49 送信ボタンを、input type=image ...で画像にした場合は、 スクリプト冒頭の設定で、「確認」ボタン、「戻る」ボタンを、 input type=image ...で指定します 'button' : { 'areaClassName' : 'submit-btn', 'confirm' : 'input class=button-confirm type=image src=/wp/wp- content/themes/wbkyoto2013_1/img/btn_confirm.jpg value=確認へ /', 'rewrite' : 'input class=button-rewrite type=image src=/wp/wp- content/themes/wbkyoto2013_1/img/btn_back.jpg value=書き直す /'
- 50. 50 3. ダウンロードしたCSSファイルと、先ほど修正したjSファイルをアップロードします （テーマディレクトリの下に、jsディレクトリを作ってアップするのがおすすめ） 4. CSSファイルとJSファイルを、テンプレートで読み込みます （page.php, single.php など） ?php wp_enqueue_script('wpcf7-confirm', get_stylesheet_directory_uri().'/js/ contact-form7-confirm.js', array('jquery'), '0.0.1'); wp_enqueue_style( 'wpcf7-confirm-style', get_stylesheet_directory_uri() ().'/js/contact-form7-confirm.css', array('twentytwelve-style') ); ? ?php get_header(); ?
- 53. 53 1. 冒頭の設定部分に、確認用メールアドレスチェック時の エラーメッセージを追加します email : { match : /^[A-Za-z0-9]+[w-]+@[w.-]+.w{2,}$/, before : '', after : 'を確認してください。' }, email_confirm : { before : '', after : 'が合っていません。' } 直前の } の後に、カンマを追加するのを忘れないように！
- 54. 54 2. メールアドレスの形式をチェックする部分を探し、 その続きに追加で、 「確認用メールアドレス整合チェック」を組み込みます if (child.hasClass('wpcf7-text')){ if (child.hasClass('wpcf7-validates-as-required') child.val(). length == 0){ error.append(jQuery('li').text(option.validates.required.before + title.replace('必須', '') + option.validates.required.after)); jQuery(this).parents('tr').addClass('error'); } else if (child.hasClass('wpcf7-validates-as-email') ( ! child. val().match(option.validates.email.match))){ error.append(jQuery('li').text(option.validates.email.before + title.replace('必須', '') + option.validates.email.after)); jQuery(this).parents('tr').addClass('error'); （この続きに・・・）
- 55. 55 } else if (child.hasClass('wpcf7-validates-as-email')) { var email_conf_name = 'span.'+child.attr('name')+'_confirm input'; if ( jQuery(email_conf_name)[0] ) { if (jQuery.trim( child.val()) != jQuery.trim(jQuery(email_conf_name).val())) { error.append(jQuery('li').text(option.validates.email.before + title.replace('必須', '') + option.validates.email_confirm.after)); jQuery(this).parents('tr').addClass('error'); } } } 【解説】 子要素に class=wpcf7-validates-as-email をもつ要素のname属性を取得し、 それに _confirm を追加したname属性を持つ要素を探します 見つかった場合、それぞれの値を比較し、異なっていればエラーメッセージを設定します この作業をした場合は、functions.php への追加記述は不要です
- 60. 60 ⑷Honeypot ←おすすめ！ スパムメール自動送信システムの動作を、逆に利用したス パム対策 スパムメール自動送信システムは、全てのフィールドに何か しらの入力を行うようになっている そこで、非表示のダミーフィールドを作って、 そこに何か入力されていたら、メールを送信しない 「Contact Form 7 Honeypot」プラグイン
- 64. 64 WordPressで使う メールサーバーを指定する 強制的に他のメールサーバーを指定するプラグイン ・WP Mail SMTP ・Cimy Swift SMTP 設定項目が多少違うが、普通に使う分にはどちらでもOK メーラーソフトに設定するのと同じような項目を設定する ことで、他のサーバーからメールを送ることができる
- 66. 66 1. スクリプト jquery.disableDoubleSubmit.js をダウンロードします 2. 新規に下記のJavaScriptファイルを作成し、適当な名前を付けて保存します （例として、disableDoubleSubmit_init.js という名前を付けて保存します） (function() { $(function(){ $(form).disableDoubleSubmit(1000); }); })(jQuery); form と指定すると、全てのformタグに対して有効になります form#mailform1 などと、idを指定することもできます 1000 は、再度送信ボタンが押せるようになるまでの時間（ミリ秒）です サーバーが遅くて送信処理に時間がかかるときは、長く設定してください 3. 上記の2ファイルをテーマディレクトリのjsディレクトリにアップロードします （テーマディレクトリの下に、jsディレクトリを作ってアップするのがおすすめ）
- 67. 67 4. functions.php で読み込みます function cf7_disableDoubleSubmit() { wp_enqueue_script('disableDoubleSubmit', get_stylesheet_directory_uri().'/js/jquery.disableDoubleSubmit.js', array('jquery')); wp_enqueue_script('disableDoubleSubmit_init', get_stylesheet_directory_uri().'/js/disableDoubleSubmit_init.js', array('disableDoubleSubmit')); } add_action('wp_print_scripts', 'cf7_disableDoubleSubmit'); （読みやすいように改行しています）