Survey Styling offers the ability to customize the visual design of your surveys by adjusting elements like backgrounds, fonts, buttons, and more. This level of customization helps align the survey with your brand identity while enhancing the overall respondent experience. The result is a more engaging and visually cohesive survey that can lead to higher response and completion rates.

For the business problems solved and prerequisites section, refer to the Survey Styling article.

​​Setting Up Styling in Default Mode

Within the Survey Builder, open the Styling tab to apply customizations to backgrounds, typography, buttons, and other components. Use the preview feature to ensure your design aligns with brand guidelines. Once satisfied, save and publish the survey to apply the styling changes. Let's have a look at the detailed steps:

Navigate to Sprinklr Insights and go to the Customer Feedback Management persona app and open a Survey, and go to Builder.

• Access Styling Options

  ​

  • To begin customizing your survey’s appearance, open the Survey Builder and navigate to the Styling tab located in the right-side menu.

• Survey Background

  ​

  • Background: You have the option to modify the background color of your survey by choosing a hue from the color library or by inputting a custom solid color code that aligns with your brand or design preferences.

  • Image: Upload your own image or select one from the Creative Library to customize the survey background, giving it a more personalized and visually engaging appearance.

• Header Styling

  ​

  • You can enable or disable the header using the toggle.

  • Background: You have the option to modify the background color of your survey header by choosing a hue from the color library or by inputting a custom solid color code that aligns with your brand or design preferences.

  • Image: Upload your own image or select one from the Creative Library to customize the survey background, giving it a more personalized and visually engaging appearance.

  • Title: You can enable or disable the header title as required and customize the title, adjusting the font size, text color, font style, and alignment.

  • Description: You can enable or disable the header description as required, customize the description, and adjust the font size, text color, font style, and alignment.

  • Logo Image: Add a brand logo for brand compliance.

  • Radius: You can adjust the corner radius.

  • Padding: You can slide to adjust the sides, top, and bottom.

  • Show Header On: Apply the header to all pages or only the first page using the dropdown.

• Page

  ​

  • You can change page background color or add an image.

  • You can modify border color to align with branding.

• Question Styling

  ​

  • Background and Border: You can customize question container background and border color.

  • Radius: You can adjust corner radius and spacing between questions.

  • You can modify question title background and border color.

  • Question Typography: You can adjust question title text color, font style, alignment, and font size.

  • You can toggle to enable question numbers for better readability in survey builder and respondent view.

  • You can toggle to add a question divider between questions and modify its appearance.

• Answers

  ​

  • You can customize answer typography, including font style, size, and color.

• Buttons

  ​

  • Background and Border: You can modify button background and border color.

  • Button Text: You can adjust text font size, style, and color.

  • Padding: You can adjust the padding of the buttons.

  • Radius: You can change button radius using the slider.

  • You can enable and disable Next and Back icons.

• Footer

  ​

  • You can enable or disable the footer using the toggle.

  • Background: You have the option to modify the background color of your survey footer by choosing a hue from the color library or by inputting a custom solid color code that aligns with your brand or design preferences.

  • Image: Upload your own image or select one from the Creative Library to customize the survey background, giving it a more personalized and visually engaging appearance.

  • Title: You can enable/disable the footer title as required and customize title and adjust font size, text color, font style, and alignment.

  • Description: You can enable or disable the footer description as required and customize description and adjust font size, text color, font style, and alignment.

  • Logo Image: Add a brand logo for brand compliance.

  • Radius: You can adjust the corner radius.

  • Padding: You can slide to adjust the sides, top and bottom.

  • Show Footer On: Use the dropdown to apply the footer to every page or just to the first page.

• Branding Control

  ​

  • You can manage branding visibility for content pages and special pages with the help of a toggle.

• Progress Bar

  ​

  • You can customize progress bar background and primary color.

  • Style: Choose a style for the progress bar and select the following options:

    

    • Simple rounded

    • Simple edge

    • Dashes

    • Stepper

  • Percent Label: You have the option to turn the percent label display on or off.

  • Position: You have the ability to choose the settings to modify the position of the progress bar.

Preview

You can use the Preview mode to see how your survey styling appears across different devices. Before launching publicly, conduct a test survey by sharing it internally to gather feedback on visual consistency. Based on the responses, make any necessary adjustments to ensure the styling is polished and aligned with your brand.