# Progress Bar for Surveys & Quizzes on Mobile > Add a Progress Bar to your Quizzes and Surveys in GHL Customer Care to reduce drop-offs and increase completions. Customize the colors to match your branding. - Source: https://docs.ghlcustomercare.com/docs/sites/surveys/progress-bar-for-surveys-quizzes-on-mobile - Section: Sites / Surveys - Reading time: 3 min - Images: 6, each explained below - Modified on Mon, 21 Jul, 2025 at 3:17 PM --- A sleek, mobile-only progress bar now lets your respondents see exactly where they are in multi-step Surveys and Quizzes. By adding a visual indicator, you reduce abandonment and keep users moving toward the finish line, all while matching your brand’s colors --- **TABLE OF CONTENTS** - [What Is the Mobile Progress Bar for Surveys & Quizzes?](#what-is-the-mobile-progress-bar-for-surveys-and-quizzes) - [Key Benefits of the Mobile Progress Bar](#key-benefits-of-the-mobile-progress-bar) - [How to Set Up the Mobile Progress Bar](#how-to-set-up-the-mobile-progress-bar) - [Customize Progress Bar Colors](#customize-progress-bar-colors) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **What Is the Mobile Progress Bar for Surveys & Quizzes?** The mobile progress bar adds a dynamic fill line to multi-step surveys and quizzes when viewed on mobile devices. It stays hidden on desktop and single-step forms, keeping the interface clean while delivering clarity where it matters most. This helps increase form completion rates by giving users visibility into where they are and how much is left to go. ![What Is the Mobile Progress Bar for Surveys & Quizzes? (image 1 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050191577/original/K12J_PgqgoX_NaaTH_s9xxLXSsoQsltC8w.png) **What Is the Mobile Progress Bar for Surveys & Quizzes? (image 1 of 6)** This screenshot appears in the "What Is the Mobile Progress Bar for Surveys & Quizzes?" section of "Progress Bar for Surveys & Quizzes on Mobile". The text alongside this image reads: The mobile progress bar adds a dynamic fill line to multi-step surveys and quizzes when viewed on mobile devices. It stays hidden on desktop and single-step forms, keeping the interface clean while delivering clarity where it matters most. This helps increase form completion rates by giving users…. Immediately after, the guide continues: Visual Guidance: Shows respondents how many steps remain, lowering drop-off Brand Consistency: Pick custom colors for step text, progress fill, and inactive segments to match your branding Seamless Integration: Fully compatible with both…. - What to fill in: The mobile progress bar adds a dynamic fill line to multi-step surveys and quizzes when viewed on mobile devices. It stays hidden on desktop and single-step forms, keeping the interface clean while delivering clarity where it matters most. This helps increase form completion rates by giving users visibility into where they are and how much is left to go. - Next: Visual Guidance: Shows respondents how many steps remain, lowering drop-off Brand Consistency: Pick custom colors for step text, progress fill, and inactive segments to match your branding Seamless Integration: Fully compatible with both Stick to card and Stick to page footers Higher Completion Rates: Clear progress feedback encourages users to finish your form --- ## **Key Benefits of the Mobile Progress Bar** - **Visual Guidance:** Shows respondents how many steps remain, lowering drop-off - **Brand Consistency:** Pick custom colors for step text, progress fill, and inactive segments to match your branding - **Seamless Integration:** Fully compatible with both Stick to card and Stick to page footers - **Higher Completion Rates:** Clear progress feedback encourages users to finish your form --- ## **How to Set Up the Mobile Progress Bar** Follow these steps to quickly activate the mobile progress bar and start improving form completions. The steps are the same for both quizzes and surveys. #### #### **Step 1:** Navigate to Surveys or Quizzes - In your sub‑account side navigation bar, click **Sites**  - In the top navigation ribbon, select **Surveys** or **Quizzes** ![Step 1: Navigate to Surveys or Quizzes (image 2 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050187143/original/74wpMnMAGdZ6bjzVXj3fUDSlU7FjQgT76A.png) **Step 1: Navigate to Surveys or Quizzes (image 2 of 6)** This screenshot appears in the "Step 1: Navigate to Surveys or Quizzes" section of "Progress Bar for Surveys & Quizzes on Mobile". The text alongside this image reads: In your sub‑account side navigation bar, click Sites In the top navigation ribbon, select Surveys or Quizzes. This part of the guide covers 2 fields, listed below. Immediately after, the guide continues: If editing a current quiz or survey, click the 3 Dots icon next to the form/survey and click Edit To create a new quiz/survey, click the blue + Add Survey or + Add Quiz button in the upper right corner. - What to choose: In your sub‑account side navigation bar, click Sites In the top navigation ribbon, select Surveys or Quizzes - Fields: In your sub‑account side navigation bar, click Sites, In the top navigation ribbon, select Surveys or Quizzes - Controls: Sites, Surveys, Quizzes - Next: If editing a current quiz or survey, click the 3 Dots icon next to the form/survey and click Edit To create a new quiz/survey, click the blue + Add Survey or + Add Quiz button in the upper right corner Full procedure: 1. In your sub‑account side navigation bar, click Sites 2. In the top navigation ribbon, select Surveys or Quizzes #### **Step 2:** Open the Quiz or Survey - If editing a current quiz or survey, click the **3 Dots** icon next to the form/survey and click **Edit** - To create a new quiz/survey, click the blue **\+ Add Survey** or **\+ Add Quiz** button in the upper right corner ![Step 2: Open the Quiz or Survey (image 3 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050187247/original/cqsaabAyLTfkQvhCmCUiE856T2Kkd2bRig.png) **Step 2: Open the Quiz or Survey (image 3 of 6)** This screenshot appears in the "Step 2: Open the Quiz or Survey" section of "Progress Bar for Surveys & Quizzes on Mobile". The text alongside this image reads: If editing a current quiz or survey, click the 3 Dots icon next to the form/survey and click Edit To create a new quiz/survey, click the blue + Add Survey or + Add Quiz button in the upper right corner. Immediately after, the guide continues: Click Styles & Options at the top‑right of the builder. - What to click: If editing a current quiz or survey, click the 3 Dots icon next to the form/survey and click Edit To create a new quiz/survey, click the blue + Add Survey or + Add Quiz button in the upper right corner - Controls: 3 Dots, Edit, + Add Survey, + Add Quiz - Next: Click Styles & Options at the top‑right of the builder Full procedure: 1. If editing a current quiz or survey, click the 3 Dots icon next to the form/survey and click Edit 2. To create a new quiz/survey, click the blue + Add Survey or + Add Quiz button in the upper right corner #### **Step 3:** Open Styles & Options - Click **Styles & Options** at the top‑right of the builder ![Step 3: Open Styles & Options (image 4 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050187362/original/yB9RN5o7oa8Na4UjgzJDYUQa1mihOT73xw.png) **Step 3: Open Styles & Options (image 4 of 6)** This screenshot appears in the "Step 3: Open Styles & Options" section of "Progress Bar for Surveys & Quizzes on Mobile". The text alongside this image reads: Click Styles & Options at the top‑right of the builder. Immediately after, the guide continues: Scroll down to and expand the Footer Section Use the device selector drop-down next to Footer to choose Phone. You will not be able to enable Progress bar when in desktop mode Toggle Enable Progress Bar on. - What to click: Click Styles & Options at the top‑right of the builder - Controls: Styles & Options - Next: Scroll down to and expand the Footer Section Use the device selector drop-down next to Footer to choose Phone. You will not be able to enable Progress bar when in desktop mode Toggle Enable Progress Bar on #### **Step 4:** Toggle On Progress Bar - Scroll down to and expand the **Footer** Section - Use the device selector drop-down next to Footer to choose **Phone**. You will not be able to enable Progress bar when in desktop mode -  Toggle **Enable Progress Bar** on ![Step 4: Toggle On Progress Bar (image 5 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050190903/original/fhzHUrF9hX3CmjNbytMfirzHCe0qOrppzA.png) **Step 4: Toggle On Progress Bar (image 5 of 6)** This screenshot appears in the "Step 4: Toggle On Progress Bar" section of "Progress Bar for Surveys & Quizzes on Mobile". The text alongside this image reads: Scroll down to and expand the Footer Section Use the device selector drop-down next to Footer to choose Phone. You will not be able to enable Progress bar when in desktop mode Toggle Enable Progress Bar on. Immediately after, the guide continues: Set Step Text Color, Progress Bar Fill, and Progress Bar Inactive colors to match your brand Once branding is fully set, click the blue Save button to save your changes. - What to choose: Scroll down to and expand the Footer Section Use the device selector drop-down next to Footer to choose Phone. You will not be able to enable Progress bar when in desktop mode Toggle Enable Progress Bar on - Controls: Footer, Phone, Enable Progress Bar - Next: Set Step Text Color, Progress Bar Fill, and Progress Bar Inactive colors to match your brand Once branding is fully set, click the blue Save button to save your changes Full procedure: 1. Scroll down to and expand the Footer Section 2. Use the device selector drop-down next to Footer to choose Phone. You will not be able to enable Progress bar when in desktop mode 3. Toggle Enable Progress Bar on #### **Step 6:** Customise Colors - Set **Step Text Color**, **Progress Bar Fill**, and **Progress Bar Inactive** colors to match your brand - Once branding is fully set, click the blue **Save** button to save your changes ![Step 6: Customise Colors (image 6 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050190955/original/F3HjPSQvEdTUeu3EQSB28yDeMD_0jJwdRw.png) **Step 6: Customise Colors (image 6 of 6)** This screenshot appears in the "Step 6: Customise Colors" section of "Progress Bar for Surveys & Quizzes on Mobile". The text alongside this image reads: Set Step Text Color, Progress Bar Fill, and Progress Bar Inactive colors to match your brand Once branding is fully set, click the blue Save button to save your changes. Immediately after, the guide continues: Match the progress bar to your brand using three flexible color pickers. Each color picker accepts HEX values for precise branding. - What to fill in: Set Step Text Color, Progress Bar Fill, and Progress Bar Inactive colors to match your brand Once branding is fully set, click the blue Save button to save your changes - Controls: Step Text Color, Progress Bar Fill, Progress Bar Inactive, Save - Next: Match the progress bar to your brand using three flexible color pickers. Each color picker accepts HEX values for precise branding. Full procedure: 1. Set Step Text Color, Progress Bar Fill, and Progress Bar Inactive colors to match your brand 2. Once branding is fully set, click the blue Save button to save your changes --- ## **Customize Progress Bar Colors** Match the progress bar to your brand using three flexible color pickers. Each color picker accepts HEX values for precise branding. - **Step Text Color:** controls the step number label (ex. “1 of 3”) - **Progress Bar Fill:** sets the filled portion of the bar - **Progress Bar Inactive:** defines the unfilled segment. --- ## **Frequently Asked Questions** **Q: Does the progress bar appear on desktop?** No. It is mobile‑only; desktop users will see the standard indicators. **Q: Why is the Enable Progress Bar toggle in grayed-out in Footer settings?** Switch the builder’s device selector to Phone first. While in desktop mode, the toggle is not selectable. **Q: What if my survey or quiz has only one step?** The progress bar is automatically hidden on single step surveys and quizzes because there is no progress to show. **Q: Does the progress bar work with both "Stick to Card" and "Stick to Page" footer types?**  Yes. It aligns seamlessly with both Stick to card and Stick to page footers. **Q: Will my existing multi‑step surveys and quizzes automatically show the progress bar?** No. The feature is off by default and must be activated individually in each survey and quiz. --- ## **Related Articles** - How to Create a Stylized Survey - [New Footer in Surveys](https://docs.ghlcustomercare.com/docs/sites/surveys/new-footer-in-surveys) - [Mobile Editor for Forms, Surveys, and Quizzes](https://docs.ghlcustomercare.com/docs/sites/forms/mobile-editor-for-forms-surveys-and-quizzes) - [Quiz Builder Guide](https://docs.ghlcustomercare.com/docs/sites/quizzes/quiz-builder-guide) - [Analytics for Forms and Surveys](https://docs.ghlcustomercare.com/docs/sites/forms/analytics-for-forms-and-surveys) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com