https://legacy.forums.gravityhelp.com/topic/radio-buttons-separated-by-text Gravity Support Forums Topic: Radio buttons separated by text en-US Sun, 19 Apr 2026 19:58:34 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/radio-buttons-separated-by-text#post-293754 Fri, 31 May 2013 23:48:17 +0000 Kevin Flahaut 293754@https://legacy.forums.gravityhelp.com/ <p>Sure, you can do this with a little jQuery customization. Each radio button is in it's own list item with a specific class. By targeting that class and using jQuery's "insertBefore" goodness, you can insert a new list item/node into the list and add a "sub label" if you will to break up the list into more manageable sections.</p> <p>test screenshot: <a href="http://i.imgur.com/5E8Yk3x.jpg" rel="nofollow">http://i.imgur.com/5E8Yk3x.jpg</a></p> <p>I basically recreated the list from the reference site on a test form, then used a HTML field at the end of the form to add my script and CSS. (that's a nifty trick too if you haven't used it before) Of course, this script is specific to my form (ID's and classes) but you can take it and modify it to use for your form. Just update the classes and IDs appropriately.</p> <pre><code>&lt;script&gt; jQuery(&quot;&lt;li&gt;&lt;h4 class=&#39;sublabel&#39;&gt;Battery Chargers&lt;/h4&gt;&lt;/li&gt;&quot;).insertBefore(&quot;.gchoice_2_0&quot;); jQuery(&quot;&lt;li&gt;&lt;h4 class=&#39;sublabel&#39;&gt;Battery Isolators&lt;/h4&gt;&lt;/li&gt;&quot;).insertBefore(&quot;.gchoice_2_2&quot;); jQuery(&quot;&lt;li&gt;&lt;h4 class=&#39;sublabel&#39;&gt;Inverters&lt;/h4&gt;&lt;/li&gt;&quot;).insertBefore(&quot;.gchoice_2_4&quot;); jQuery(&quot;&lt;li&gt;&lt;h4 class=&#39;sublabel&#39;&gt;Isolation Protection&lt;/h4&gt;&lt;/li&gt;&quot;).insertBefore(&quot;.gchoice_2_9&quot;); jQuery(&quot;&lt;li&gt;&lt;h4 class=&#39;sublabel&#39;&gt;Optics&lt;/h4&gt;&lt;/li&gt;&quot;).insertBefore(&quot;.gchoice_2_11&quot;); jQuery(&quot;&lt;li&gt;&lt;h4 class=&#39;sublabel&#39;&gt;Marine Accessories&lt;/h4&gt;&lt;/li&gt;&quot;).insertBefore(&quot;.gchoice_2_12&quot;); &lt;/script&gt; &lt;style type=&quot;text/css&quot;&gt; h4.sublabel {color: #790000; border-bottom: 1px solid #ccc; width: 100%; padding-bottom:6px;} li#field_20_2 {margin-top: 24px;} &lt;/style&gt;</code></pre> <p>and to make it easier to see what I'm talking about, I exported the sample form and put it here for you to download, import and tinker with if you would like.</p> <p><a href="https://www.box.com/shared/static/wd3c0c9s40heterm7yu8.xml" rel="nofollow">https://www.box.com/shared/static/wd3c0c9s40heterm7yu8.xml</a></p> <p>Hope that helps out. Best of luck with it. </p> https://legacy.forums.gravityhelp.com/topic/radio-buttons-separated-by-text#post-292741 Fri, 31 May 2013 12:04:00 +0000 nelsonschmidt 292741@https://legacy.forums.gravityhelp.com/ <p>I am trying to rebuild this "complex" form. The main page has a list of 13 radio buttons grouped by type. Is there a way I can reproduce this? (The first page only allows you to select 1 option out of the 13.</p> <p><a href="http://promariner.com/online_reg.php" rel="nofollow">http://promariner.com/online_reg.php</a></p> <p>Thanks,<br /> Spencer </p>