Contact Form 7でoptgroupを使う方法

Pocket

まとめます。
Contact form 7で、通常通り「ドロップダウン・メニュー」を作る。optgroupを以下のように指定する。

optgroup-Title 1
item 1
item 2
item 3
endoptgroup
optgroup-Title 2
item 4
item 5
endoptgroup

例えば都道府県の場合は以下

【選択して下さい】
optgroup-北海道・東北地方
 北海道
 青森県
 岩手県
 宮城県
 秋田県
 山形県
 福島県
endoptgroup
optgroup-関東地方
 茨城県
 栃木県
 群馬県
 埼玉県
 千葉県
 東京都
 神奈川県
endoptgroup
optgroup-中部地方
 新潟県
 富山県
 石川県
 福井県
 山梨県
 長野県
 岐阜県
 静岡県
 愛知県
endoptgroup
optgroup-近畿地方
 三重県
 滋賀県
 京都府
 大阪府
 兵庫県
 奈良県
 和歌山県
endoptgroup
optgroup-中国地方
 鳥取県
 島根県
 岡山県
 広島県
 山口県
endoptgroup
optgroup-四国地方
 徳島県
 香川県
 愛媛県
 高知県
endoptgroup
optgroup-九州・沖縄地方
 福岡県
 佐賀県
 長崎県
 熊本県
 大分県
 宮崎県
 鹿児島県
 沖縄県
endoptgroup

contact form 7 のショートコードがあるpostにだけ、footerにjavascriptを仕込む。

add_action('wp_footer', 'cf7_optlabel');
function cf7_optlabel(){
    global $post;
    $pos = strpos($post->post_content, '[contact-form-7 ');
    if( $pos === false )
        return;
?>
<script>
$(function() {
		//Search for optgroup- items
    	var foundin = $('option:contains("optgroup-")');
    		$.each(foundin, function(value) {
    			//remove optgroup prefix
    			var updated = $(this).val().replace("optgroup-","");
    			//replace items with optgroup tag
    			var replaced = $(this).replaceWith('<optgroup label="'+ updated +'">');
    		});
    	var foundin2 = $('option:contains("endoptgroup")');
    		$.each(foundin2, function(value) {
    			//replace items with </optgroup> tag
    			var replaced = $(this).replaceWith('</optgroup>');
    	});
	});
</script>
<?php
/**/
} // function cf7_optlabel

結果:
toiawase
参照: http://wordpress.org/support/topic/how-to-add-optgroup-in-a-drop-down-menu

Comments on this post

  1. Lenglemetz said on 2017年4月21日 at 7:54 PM

    Hi,
    I can not apply your script can you give me directions?
    When I add it in wp-footer, it displays the text

    • ykawato said on 2017年4月22日 at 8:12 PM

      You have to insert this in Contact Form 7’s dropdown options.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL