Más contenido relacionado
La actualidad más candente (20)
Más de Cherry Pie Web (10)
Contact Form 7 よくあるカスタマイズ
- 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);
- 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の閉じタグの直前にスクリプトが出力されます。
- 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;
}
?
- 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=書き直す /'
- 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 への追加記述は不要です
- 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');
(読みやすいように改行しています)