Contact Form 7のラジオボタンの途中で所定のHTMLを差し込みたい

  • haha taduko

    (@shimodar)


    11年、 5ヶ月前

    いつもWordPress先輩諸兄の叡智に助けられております。

    このたび、Contact Form 7の使い方でラジオボタンの途中に

    <h4>◯◯◯</h4>
<p>リード分</p>

    などといった所定のHTML要素を挟み込みながら、複数のラジオボタングループをひとつとして取り扱いという問題の解決方法がネット上でどう探しても見つからず、こちらに質問させていただきました。

    プラグイン開発者に聞くように！といわれるのも覚悟でまずはこちらに
    質問させていただいております。

    ＜具体的な実現したい内容＞
    この夏ピッタリなお子様とおでかけプラン
    ※◯はラジオボタンを意味しています。
    ※下記よりお選びください。

    ■がっつりお昼寝＋パパママは温泉プラン
    ＜リード＞日頃寝不足のお母さんお父さんも保育士帯同だから安心！
    　◯１泊２日　13,900円
    　◯２泊３日　15,900円

    ■さくらんぼ狩り＋潮干狩りプラン
    ＜リード＞午前中はさくらんぼ狩り、午後潮干狩りのあとはバター炒めとビールで決まり！
    　◯日帰り　8,800円
    　◯１泊２日　14,800円

    —————————————————————-

    以上の内容を実現しようと考えてましたが、
    いまは上記４つのプランを１つのグループとして設定する方法を見つけられず、
    現在バラバラのラジオグループをたてて、Contact Form 7の中では下記のような方法で
    逃げています。

    <h3>この夏ピッタリなお子様とおでかけプラン</h3><br /><small>※◯はラジオボタンを意味しています。<br />※下記よりお選びください。</small>
<ul>
<li><h4>■がっつりお昼寝＋パパママは温泉プラン<br /><small>日頃寝不足のお母さんお父さんも保育士帯同だから安心！</small></h4>
<li>[radio form-ohirune-plan id:form-karikariplan use_label_element "１泊２日　13,900円" "２泊３日　15,900円"]</li>
</ul>
<ul>
<li><h4>■さくらんぼ狩り＋潮干狩りプラン<small>午前中はさくらんぼ狩り、午後潮干狩りのあとはバター炒めとビールで決まり！</small></h4>
<li>[radio form-karikariplan id:form-karikariplan use_label_element "日帰り　8,800円" "１泊２日　14,800円"]</li>
</ul>

    上記のように、現在はラジオボタンのグループとして２つに別れてしまっているので、
    本来は上記四択でひとつ選択してもらいたいのですが、それぞれのプランにひとつずつチェックされてしまう仕様でしか実装することができていません。

    今の状況ですが、もしかしたらContact Form 7での実装をあきらめて、jQueryで何番目のli要素の前に◯◯というHTML要素を表示するといった方法でなんとか実現できないかも同時にしらべはじめています。

    Contact Form 7は非常に初心者でも使いやすいフォーム管理システムだと思いますので、なんとか実現を狙いたいと思っています。

    長くなりましたが、アドバイス、ヒントなんでもかまいませんので、お気づきの点、ご指摘・ご教授いただけましたら嬉しいです。

    どうぞよろしくおねがいします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 haha taduko

    (@shimodar)

    11年、 5ヶ月前

    すみません。

    自己レスです。
    いつも助けてもらってばかりなので、初心者仕込みで申し訳ないですが、
    力技で対応できた内容紹介させていただきます。

    結局、jQueryの:nth-child()を使って、n番目のlabel要素の前に.beforeでコンテンツを表示させる手法を取りました。

    <script type="text/javascript">
jQuery(function(){
	jQuery('#odekake-plan .wpcf7-list-item:nth-child(1)').each(function(){
		jQuery(this).before("<h4>■がっつりお昼寝＋パパママは温泉プラン<br /><small>日頃寝不足のお母さんお父さんも保育士帯同だから安心！</small></h4>");
	})
	jQuery('#odekake-plan .wpcf7-list-item:nth-child(4)').each(function(){
		jQuery(this).before("<h4>■さくらんぼ狩り＋潮干狩りプラン<small>午前中はさくらんぼ狩り、午後潮干狩りのあとはバター炒めとビールで決まり！</small></h4>");
	})
});
</script>

    ＜Contact Form 7側の記載はこちら↓＞

    <h3>この夏ピッタリなお子様とおでかけプラン</h3>
<small>※下記よりお選びください。</small>
<div id="odekake-plan">
[radio form-odekake-plan id:form-odekake-plan use_label_element "１泊２日　13,900円|がっつりお昼寝＋パパママは温泉プラン：１泊２日　13,900円" "２泊３日　15,900円|がっつりお昼寝＋パパママは温泉プラン：２泊３日　15,900円" "日帰り　8,800円|さくらんぼ狩り＋潮干狩りプラン：日帰り　8,800円" "１泊２日　14,800円|さくらんぼ狩り＋潮干狩りプラン：１泊２日　14,800円"]
</div>

    もっとスマートな方法があるのかもしれませんが、取り急ぎ自分の限界で辿り着いた
    解決法紹介させてもらいました。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「Contact Form 7のラジオボタンの途中で所定のHTMLを差し込みたい」には新たに返信することはできません。