{"id":1713,"date":"2026-03-28T08:55:12","date_gmt":"2026-03-28T08:55:12","guid":{"rendered":"https:\/\/onesystemcrm.com\/help\/?post_type=docs&#038;p=1713"},"modified":"2026-03-28T08:55:12","modified_gmt":"2026-03-28T08:55:12","password":"","slug":"bubble-style-for-radio-checkbox-elements","status":"publish","type":"docs","link":"https:\/\/onesystemcrm.com\/help\/docs\/bubble-style-for-radio-checkbox-elements\/","title":{"rendered":"Bubble Style for Radio &#038; Checkbox Elements"},"content":{"rendered":"<p>Give your OneSystemCRM forms, surveys, and quizzes a fresh, modern feel with the new Bubble Style for radio buttons and checkboxes. This update lets you toggle between classic and rounded-bubble choices in seconds\u2014no coding required.<\/p>\n<h1 id=\"What-is-Bubble-Style-for-Radio-&amp;-Checkbox-Elements?\" class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-1b6dca44-6446-41dd-83d3-7171e4645098\"><strong dir=\"ltr\">What is Bubble Style for Radio &amp; Checkbox Elements?<\/strong><\/h1>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-b27ab524-3e5d-4edd-8d94-f8c7ec2876b0\">Bubble Style is an eye-catching, rounded design option you can apply to any radio button or checkbox field inside OneSystemCRM Form, Survey, and Quiz builders. When enabled, it swaps the default square or circular markers for larger, pill-shaped \u201cbubbles,\u201d improving legibility and encouraging interaction.<\/p>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-b27ab524-3e5d-4edd-8d94-f8c7ec2876b0\"><img decoding=\"async\" class=\"fr-fil fr-dib fr-bordered fw-lightbox-img\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/155054717439\/original\/d1Q3vDXRC-z-eOkYFbHiwHPohrGyMnrB6w.png?1758922935\" data-attachment=\"[object Object]\" data-id=\"155054717439\" data-index=\"0\" \/><\/p>\n<hr \/>\n<h2 id=\"Key-Benefits-of-Bubble-Style\" dir=\"ltr\"><strong>Key Benefits of Bubble Style<\/strong><\/h2>\n<ul>\n<li dir=\"ltr\"><strong>Fresh Bubble Design:\u00a0<\/strong>A sleek, rounded option for radio and checkbox fields.<\/li>\n<li dir=\"ltr\"><strong>Simple Toggle:<\/strong> Easily switch between Standard and Bubble from the builder\u2019s Options tab.<\/li>\n<li dir=\"ltr\"><strong>User-Friendly:\u00a0<\/strong>Bubble style improves visibility and makes choices feel more interactive.<\/li>\n<li dir=\"ltr\"><strong>Responsive by Default:\u00a0<\/strong>Works seamlessly across desktop and mobile devices.<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"Responsive-Behavior\" class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-a32dea4a-5d4b-493b-a0cc-a2a8d09a727d\"><strong dir=\"ltr\">Responsive Behavior<\/strong><\/h2>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-49290496-7af0-4150-92bc-3cec9c7015cd\">Bubble Style is 100 % responsive by default. The bubbles resize fluidly, ensuring precise tap targets on phones, tablets, and large screens without additional CSS tweaks.<strong dir=\"ltr\">Tip:\u00a0<\/strong>Pair Bubble Style with the Spread to Column feature to perfectly align multi-choice answers across devices.<\/p>\n<hr \/>\n<h2 id=\"Compatibility-&amp;-Limitations\" dir=\"ltr\"><strong>Compatibility &amp; Limitations<\/strong><\/h2>\n<p class=\"ql-block\" data-block-id=\"block-e26733e0-027b-4ca2-89c2-bc13edcf4ed5\">\u2022 Works in Forms, Surveys, and Quizzes embedded in Funnels, Websites, or external pages via embed code.<\/p>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-5fe47dbc-8a7f-4ba8-8908-1217b9a0c083\">\u2022 Visual-only: it does not change submission data, conditional logic, or workflow triggers.<\/p>\n<p class=\"ql-block\" data-block-id=\"block-8762dd7a-d983-4194-becb-387ac46eaed6\">\u2022 No migration required\u2014existing assets retain their current styling unless you manually enable Bubble.<\/p>\n<hr \/>\n<h2 id=\"How-To-Setup-Bubble-Style\" class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-796fe4dc-1456-49aa-b068-d287320baa67\"><strong dir=\"ltr\">How To Setup Bubble Style<\/strong><\/h2>\n<p class=\"ql-block\" data-block-id=\"block-52a4af3e-3c77-43a2-9011-59f7a463bd0d\">Apply Bubble Style in under 30 seconds:<\/p>\n<ol>\n<li dir=\"ltr\">Navigate to\u00a0<strong>Sites<\/strong>\u00a0\u2192\u00a0<strong>Forms<\/strong>\u00a0(or\u00a0<strong>Surveys<\/strong>\u00a0\/\u00a0<strong>Quizzes<\/strong>) and click\u00a0<strong>Edit<\/strong>\u00a0on your asset.\n<p><img decoding=\"async\" class=\"fr-fil fr-dib fr-bordered fw-lightbox-img\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/155054717109\/original\/_yy-hCah9uwEQhqCN64G-quypKtzHmTDZA.png?1758921754\" data-attachment=\"[object Object]\" data-id=\"155054717109\" data-index=\"1\" \/><\/li>\n<li dir=\"ltr\">Drag a Radio or Checkbox field onto the canvas, or click an existing one.\n<p><img decoding=\"async\" class=\"fr-fil fr-dib fr-bordered fw-lightbox-img\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/155054717133\/original\/MKTZKz6nv-rcw7e4yL8m7uEUfJ1KfU5-EQ.png?1758921901\" data-attachment=\"[object Object]\" data-id=\"155054717133\" data-index=\"2\" \/><\/li>\n<li dir=\"ltr\">In the right sidebar, select\u00a0<strong>Options<\/strong>.\n<p><img decoding=\"async\" class=\"fr-fil fr-dib fr-bordered fw-lightbox-img\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/155054717146\/original\/B3Qh2S4t60Z4HCv2dMkT4v3ZMhO-dz6CIw.png?1758921938\" data-attachment=\"[object Object]\" data-id=\"155054717146\" data-index=\"3\" \/><\/li>\n<li dir=\"ltr\">Under \u201cStyle,\u201d choose\u00a0<strong>Bubble<\/strong>.\n<p><img decoding=\"async\" class=\"fr-fil fr-dib fr-bordered fw-lightbox-img\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/155054717171\/original\/2MUrKhAlVKC3pWYarhX6rzUVD0eDjtkmVg.png?1758921988\" data-attachment=\"[object Object]\" data-id=\"155054717171\" data-index=\"4\" \/><\/li>\n<li>Click Save, then Preview or Embed as usual. Your updated bubbles are live!<\/li>\n<\/ol>\n<hr \/>\n<h2 id=\"Frequently-Asked-Questions\" class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-bb22bb0d-ab5a-43b4-83db-dab220b27deb\"><strong>Frequently Asked Questions<\/strong><\/h2>\n<p class=\"ql-block\" data-block-id=\"block-1a2da2bb-eddb-4998-b391-2a253ea5c672\"><strong>Q: Does Bubble Style slow down page load times?<\/strong><\/p>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-1a7edc53-e10c-4726-ba93-c3b670adbb3e\">No. It uses lightweight CSS, adding virtually zero overhead.<\/p>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-1a7edc53-e10c-4726-ba93-c3b670adbb3e\"><strong dir=\"ltr\">Q: Can I enable Bubble Style for only one option in a multi-choice list?<\/strong><\/p>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-75056d34-2e3b-4e8c-b7ae-da0b0fdbe21d\">Bubble applies to the entire element; all choices in that Radio or Checkbox field will share the same styling.<\/p>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-75056d34-2e3b-4e8c-b7ae-da0b0fdbe21d\"><strong><span dir=\"ltr\">Q: Will workflows triggered by form submissions continue to work?<\/span><\/strong><\/p>\n<p class=\"ql-block\" dir=\"ltr\" data-block-id=\"block-90f11463-7315-426d-8224-4b0ab4c6f803\">Yes. Bubble styling is purely visual and does not affect data capture or workflow triggers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Give your OneSystemCRM forms, surveys, and quizzes a fresh, modern feel with the new Bubble Style for radio buttons and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[86],"doc_tag":[],"class_list":["post-1713","docs","type-docs","status-publish","hentry","doc_category-funnels-and-websites"],"year_month":"2026-09","word_count":369,"total_views":"37","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"usamasaeed219","author_nicename":"usamasaeed219","author_url":"https:\/\/onesystemcrm.com\/help\/author\/usamasaeed219\/"},"doc_category_info":[{"term_name":"Funnels and Websites","term_url":"https:\/\/onesystemcrm.com\/help\/docs-category\/funnels-and-websites\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/comments?post=1713"}],"version-history":[{"count":1,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1713\/revisions"}],"predecessor-version":[{"id":1714,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1713\/revisions\/1714"}],"wp:attachment":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/media?parent=1713"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_category?post=1713"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_tag?post=1713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}