ContactForm7のプルダウン(Select)でグループ(optgroup)を使う

ContactForm7のプルダウンは

[select menu-469 "タイトル1" "タイトル2" "タイトル3"]

こんな感じで設定しますが、グループにしたい場合もあります。
標準ではグループに対応していません。

参考:Contact Form 7でoptgroupを使う方法 – Daily GLOCALISM

functions.php

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

※ブログに掲載する都合上、7を大文字にしています。

このコードを入れ、フォームの中は

[select menu-469 "optgroup-グループ1" "タイトル1" "タイトル2" "endoptgroup" "optgroup-グループ2" "タイトル3" "endoptgroup"]

にする。
しかし・・・・
optgroupタグで挟まれたキレイなHTMLにはならない。(残念・・・


参考:plugins – WordPress contact form 7 to show the form dropdown menus as like – WordPress Development Stack Exchange

次にこちらの回答を試してみました。
フォームは同じです。

[select menu-469 "optgroup-グループ1" "タイトル1" "タイトル2" "endoptgroup" "optgroup-グループ2" "タイトル3" "endoptgroup"]

functions.php

<?php
add_action('wp_footer', 'cf7_optlabel');
function cf7_optlabel(){
  global $post;
  $pos = strpos($post->post_content, '[contact-form-7 ');
  if( $pos === false )
    return;
?>
<script>
// contact us form - change out optgroup labels
jQuery(function() {
  // search for parent_ items
  var foundin = jQuery('option:contains("optgroup-")');
  jQuery.each(foundin, function(value) {
    var updated = jQuery(this).val().replace("optgroup-","");
    // find all following elements until endoptgroup
    jQuery(this).nextUntil('option:contains("endoptgroup")')
    .wrapAll('<optgroup label="'+ updated +'"></optgroup');
  });
  // remove placeholder options
  jQuery('option:contains("optgroup-")').remove();
  jQuery('option:contains("endoptgroup")').remove();
});
</script>
<?php
}

※ブログに掲載する都合上、7を大文字にしています。

こちらはキレイなHTMLタグになります。

と言うことで今回は下段のコードを使用しました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)