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.
3 min read631 words6 explained imagesUpdated Mon, 21 Jul, 2025 at 3:17 PM
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
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
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)What this shows The mobile progress bar adds a dynamic fill line to multi-step surveys and quizzes when viewed on mobile devices.What this showsIllustrates the "What Is the Mobile Progress Bar for Surveys & Quizzes?" section of "Progress Bar for Surveys & Quizzes on Mobile".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….Image 1 of 6What to fill inThe 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 stepVisual 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)What this shows In your sub‑account side navigation bar, click Sites In the top navigation ribbon, select Surveys or QuizzesWhat this showsIllustrates the "Step 1: Navigate to Surveys or Quizzes" section of "Progress Bar for Surveys & Quizzes on Mobile".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.Image 2 of 6What to chooseIn your sub‑account side navigation bar, click Sites In the top navigation ribbon, select Surveys or Quizzes
Fields in this part of the guideIn your sub‑account side navigation bar, click SitesIn the top navigation ribbon, select Surveys or Quizzes
Buttons and menus referencedSitesSurveysQuizzes
Next stepIf 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 cornerAll 2 steps in this procedure
In your sub‑account side navigation bar, click Sites
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)What this shows 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…What this showsIllustrates the "Step 2: Open the Quiz or Survey" section of "Progress Bar for Surveys & Quizzes on Mobile".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.Image 3 of 6What to clickIf 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
Buttons and menus referenced3 DotsEdit+ Add Survey+ Add Quiz
Next stepClick Styles & Options at the top‑right of the builderAll 2 steps in this procedure
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 3: Open Styles & Options
Click Styles & Options at the top‑right of the builder
Step 3: Open Styles & Options (image 4 of 6)What this shows Click Styles & Options at the top‑right of the builderWhat this showsIllustrates the "Step 3: Open Styles & Options" section of "Progress Bar for Surveys & Quizzes on Mobile".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.Image 4 of 6What to clickClick Styles & Options at the top‑right of the builder
Buttons and menus referencedStyles & Options
Next stepScroll 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)What this shows Scroll down to and expand the Footer Section Use the device selector drop-down next to Footer to choose Phone.What this showsIllustrates the "Step 4: Toggle On Progress Bar" section of "Progress Bar for Surveys & Quizzes on Mobile".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.Image 5 of 6What to chooseScroll 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
Buttons and menus referencedFooterPhoneEnable Progress Bar
Next stepSet 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 changesAll 3 steps in this procedure
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 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)What this shows Set Step Text Color, Progress Bar Fill, and Progress Bar Inactive colors to match your brand Once branding is fully set, click the blue…What this showsIllustrates the "Step 6: Customise Colors" section of "Progress Bar for Surveys & Quizzes on Mobile".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.Image 6 of 6What to fill inSet 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
Buttons and menus referencedStep Text ColorProgress Bar FillProgress Bar InactiveSave
Next stepMatch the progress bar to your brand using three flexible color pickers. Each color picker accepts HEX values for precise branding.All 2 steps in this procedure
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
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.
