# Bubble Style for Radio & Checkbox Elements > Give your GHL Customer Care forms, surveys, and quizzes a fresh, modern feel with the new Bubble Style for radio buttons and checkboxes. - Source: https://docs.ghlcustomercare.com/docs/sites/funnel-and-website-builder/bubble-style-for-radio-checkbox-elements - Section: Sites / Funnel & Website Builder - Reading time: 2 min - Images: 5, each explained below --- Give your GHL Customer Care 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—no coding required. --- **TABLE OF CONTENTS** - [What is Bubble Style for Radio & Checkbox Elements?](#what-is-bubble-style-for-radio-and-checkbox-elements) - [Key Benefits of Bubble Style](#key-benefits-of-bubble-style) - [Responsive Behavior](#responsive-behavior) - [Compatibility & Limitations](#compatibility-and-limitations) - [How To Setup Bubble Style](#how-to-setup-bubble-style) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **What is Bubble Style for Radio & Checkbox Elements?** Bubble Style is an eye-catching, rounded design option you can apply to any radio button or checkbox field inside GHL Customer Care’s Form, Survey, and Quiz builders. When enabled, it swaps the default square or circular markers for larger, pill-shaped “bubbles,” improving legibility and encouraging interaction. ![What is Bubble Style for Radio & Checkbox Elements? (image 1 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717439/original/d1Q3vDXRC-z-eOkYFbHiwHPohrGyMnrB6w.png) **What is Bubble Style for Radio & Checkbox Elements? (image 1 of 5)** This screenshot appears in the "What is Bubble Style for Radio & Checkbox Elements?" section of "Bubble Style for Radio & Checkbox Elements". The text alongside this image reads: Bubble Style is an eye-catching, rounded design option you can apply to any radio button or checkbox field inside GHL Customer Care’s Form, Survey, and Quiz builders. When enabled, it swaps the default square or circular markers for larger, pill-shaped “bubbles,” improving legibility and encouraging…. Immediately after, the guide continues: Fresh Bubble Design: A sleek, rounded option for radio and checkbox fields. Simple Toggle: Easily switch between Standard and Bubble from the builder’s Options tab. User-Friendly: Bubble style improves visibility and makes choices feel…. - What this covers: Bubble Style is an eye-catching, rounded design option you can apply to any radio button or checkbox field inside GHL Customer Care’s Form, Survey, and Quiz builders. When enabled, it swaps the default square or circular markers for larger, pill-shaped “bubbles,” improving legibility and encouraging interaction. - Next: Fresh Bubble Design: A sleek, rounded option for radio and checkbox fields. Simple Toggle: Easily switch between Standard and Bubble from the builder’s Options tab. User-Friendly: Bubble style improves visibility and makes choices feel more interactive. Responsive by Default: Works seamlessly across desktop and mobile devices. --- ## **Key Benefits of Bubble Style** - **Fresh Bubble Design:** A sleek, rounded option for radio and checkbox fields. - **Simple Toggle:** Easily switch between Standard and Bubble from the builder’s Options tab. - **User-Friendly:** Bubble style improves visibility and makes choices feel more interactive. - **Responsive by Default:** Works seamlessly across desktop and mobile devices. --- ## **Responsive Behavior** 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. **Tip:** Pair Bubble Style with the Spread to Column feature to perfectly align multi-choice answers across devices. --- ## **Compatibility & Limitations** • Works in Forms, Surveys, and Quizzes embedded in Funnels, Websites, or external pages via embed code. • Visual-only: it does not change submission data, conditional logic, or workflow triggers. • No migration required—existing assets retain their current styling unless you manually enable Bubble. --- ## **How To Setup Bubble Style** Apply Bubble Style in under 30 seconds: 1. Navigate to **Sites** → **Forms** (or **Surveys** / **Quizzes**) and click **Edit** on your asset. ![Step 1 of 5: Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717109/original/_yy-hCah9uwEQhqCN64G-quypKtzHmTDZA.png) **Step 1 of 5: Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on…** This screenshot accompanies step 1 of 5 in the "How To Setup Bubble Style" section of "Bubble Style for Radio & Checkbox Elements". At this point in the walkthrough you navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. The next step is to drag a Radio or Checkbox field onto the canvas, or click an existing one. - Where to go: Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. - Controls: Sites, Forms, Surveys, Quizzes, Edit, Options, Bubble - Next: Drag a Radio or Checkbox field onto the canvas, or click an existing one. Full procedure: 1. Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. <- this image 2. Drag a Radio or Checkbox field onto the canvas, or click an existing one. 3. In the right sidebar, select Options. 4. Under “Style,” choose Bubble. 5. Click Save, then Preview or Embed as usual. Your updated bubbles are live! 2. Drag a Radio or Checkbox field onto the canvas, or click an existing one. ![Step 2 of 5: Drag a Radio or Checkbox field onto the canvas, or click an existing one](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717133/original/MKTZKz6nv-rcw7e4yL8m7uEUfJ1KfU5-EQ.png) **Step 2 of 5: Drag a Radio or Checkbox field onto the canvas, or click an existing one** This screenshot accompanies step 2 of 5 in the "How To Setup Bubble Style" section of "Bubble Style for Radio & Checkbox Elements". At this point in the walkthrough you drag a Radio or Checkbox field onto the canvas, or click an existing one. The next step is to in the right sidebar, select Options. - What to click: Drag a Radio or Checkbox field onto the canvas, or click an existing one. - Controls: Sites, Forms, Surveys, Quizzes, Edit, Options, Bubble - Next: In the right sidebar, select Options. Full procedure: 1. Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. 2. Drag a Radio or Checkbox field onto the canvas, or click an existing one. <- this image 3. In the right sidebar, select Options. 4. Under “Style,” choose Bubble. 5. Click Save, then Preview or Embed as usual. Your updated bubbles are live! 3. In the right sidebar, select **Options**. ![Step 3 of 5: In the right sidebar, select Options](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717146/original/B3Qh2S4t60Z4HCv2dMkT4v3ZMhO-dz6CIw.png) **Step 3 of 5: In the right sidebar, select Options** This screenshot accompanies step 3 of 5 in the "How To Setup Bubble Style" section of "Bubble Style for Radio & Checkbox Elements". At this point in the walkthrough you in the right sidebar, select Options. For context, this section explains: Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. Drag a Radio or Checkbox field onto the canvas, or click an existing one. In the right sidebar, select Options. Under “Style,” choose Bubble. Click Save, then Preview or Embed as usual. Your updated bubbles are live! The next step is to under “Style,” choose Bubble. - Where to go: In the right sidebar, select Options. - Controls: Options, Sites, Forms, Surveys, Quizzes, Edit, Bubble - Next: Under “Style,” choose Bubble. Full procedure: 1. Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. 2. Drag a Radio or Checkbox field onto the canvas, or click an existing one. 3. In the right sidebar, select Options. <- this image 4. Under “Style,” choose Bubble. 5. Click Save, then Preview or Embed as usual. Your updated bubbles are live! 4. Under “Style,” choose **Bubble**. ![Step 4 of 5: Under “Style,” choose Bubble](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717171/original/2MUrKhAlVKC3pWYarhX6rzUVD0eDjtkmVg.png) **Step 4 of 5: Under “Style,” choose Bubble** This screenshot accompanies step 4 of 5 in the "How To Setup Bubble Style" section of "Bubble Style for Radio & Checkbox Elements". At this point in the walkthrough you under “Style,” choose Bubble. For context, this section explains: Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. Drag a Radio or Checkbox field onto the canvas, or click an existing one. In the right sidebar, select Options. Under “Style,” choose Bubble. Click Save, then Preview or Embed as usual. Your updated bubbles are live! The next step is to click Save, then Preview or Embed as usual. Your updated bubbles are live! - What to choose: Under “Style,” choose Bubble. - Controls: Bubble, Sites, Forms, Surveys, Quizzes, Edit, Options - Next: Click Save, then Preview or Embed as usual. Your updated bubbles are live! Full procedure: 1. Navigate to Sites → Forms (or Surveys / Quizzes) and click Edit on your asset. 2. Drag a Radio or Checkbox field onto the canvas, or click an existing one. 3. In the right sidebar, select Options. 4. Under “Style,” choose Bubble. <- this image 5. Click Save, then Preview or Embed as usual. Your updated bubbles are live! 5. Click Save, then Preview or Embed as usual. Your updated bubbles are live! --- ## **Frequently Asked Questions** **Q: Does Bubble Style slow down page load times?** No. It uses lightweight CSS, adding virtually zero overhead. **Q: Can I enable Bubble Style for only one option in a multi-choice list?** Bubble applies to the entire element; all choices in that Radio or Checkbox field will share the same styling. **Q: Will workflows triggered by form submissions continue to work?** Yes. Bubble styling is purely visual and does not affect data capture or workflow triggers. --- ## **Related Articles** - [Spread to Column Option in Forms & Surveys](https://docs.ghlcustomercare.com/docs/sites/forms/how-to-use-the-spread-to-column-option-in-forms-and-surveys) - [Right Sidebar Revamp in Form and Survey Builder](https://docs.ghlcustomercare.com/docs/sites/forms/right-sidebar-in-form-and-survey-builder)  - “Other” Option Now Available in Forms & Surveys [](https://docs.ghlcustomercare.com/docs/sites/forms/how-to-create-a-contact-form-in-ghl-customer-care) - [How to Create a Contact Form in GHL Customer Care](https://docs.ghlcustomercare.com/docs/sites/forms/how-to-create-a-contact-form-in-ghl-customer-care) - [Customizing Forms Inside Funnels Using the Form Builder](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/customizing-forms-inside-funnels-using-the-form-builder) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com