Styling Surveys
Help Center

FluidSurveys Help > Building Surveys or Polls > Style

Styling Surveys

The style tool allows you to:

 
VIDEO: Styling Overview
Overview of Sections in the Customize Tab
 
  • Logo: Upload, size and position your logo.
  • Colors: Set a color palette for your survey.
  • Variants: Invert your color scheme, apply the frosted glass effect to your background, or add touch rectangles to answer choices for touch screens.
  • Background: Add a background image or apply a background color.
  • Survey: Define a frame for your survey, adjust padding, corners, and apply a color.
  • Questions: Define a frame for survey questions, adjust padding, corners, and apply a color.
  • Title: Style the text of your survey title, select a font and its size and color.
  • Headings: Style the text of your surveys headings or question text, select a font and its size and color.
  • Body Text: Style the text of your surveys body or answer choice text, select a font and its size and color.

Applying and Saving Themes

Choose from five different survey themes. Use a theme as is, or use it as a starting point for a more custom survey design. You can also create and save themes.

To apply a theme:

  1. Click the style icon style icon in the sidebar.
  2. Select a theme from the them list. A message will display letting you know that your theme has been applied. Click Save to save the changes.
  3. To preview what the survey looks like, click the preview icon preview icon.
  4. Optionally, you may customize elements of the theme you’ve chosen in the Customize Tab.

To create a theme:

  1. Click the style icon style icon in the sidebar.
  2. Click + New Theme button at the bottom of the theme list.
  3. Give your theme a name.
  4. Click on the created them to apply it. You can then click the Customize tab to style your new theme.

Upload a logo for your survey. Your logo will be present on all pages.

To add a logo:

  1. Click the style icon style icon in the sidebar.
  2. Click the Customize tab and click Logo.
  3. Select Custom and upload an image file for your logo. Your image should be a square or have a width that is greater than its height. Images that have a greater height than width will become warped.
  4. Configure the Size and Position of your logo. Size determines width in pixels, height autoscales.
  5. Choose which element you’d like to align the logo to. Align it with the screen, the edge of the survey container, the edge of the question container, or question body text.
  6. Optionally make your logo sticky. Sticky logos will persist in place as the respondent scrolls and the survey will slide underneath the logo.
  7. Optionally give your logo a backdrop. Selecting Box creates an even border around your image, Survey creates a backdrop the same width as your survey, and Screen creates a backdrop the width of the screen. Configure the color, opacity, margin, padding, and corner sharpness of your backdrop. Rounded corners can only be applied to Box or Survey backdrops.
VIDEO: Adding a Logo

Applying Custom Colors

The colors section let’s you select a color palette for your survey. If you do no other customization, the colors you select here be applied in the following way:

  • Background: Background color for the whole screen
  • Foreground: Color of text.
  • Message: Color of any error messages. For example, validation errors.
  • Accent: Color of progress percent, links, selected answers, and the thumbs up icon on the thank you page.
  • Neutral: Color of unselected answer choices, text box, drop down, and button outlines, and the progress bar.

Your color palette will be available when you style each. For example, once you assign an accent color to be green, you can choose that same green accent color to your heading or title text or.

To select your color palette:

  1. Click the style icon style icon in the sidebar.
  2. Click the Customize tab and click Colors.
  3. Click on the color tile and either select your color from the color wheel or enter a hex code.
  4. Click Apply to view your changes.
  5. Click Save to save your changes. Your palette is available in each element’s color drop down menu.

To select a color and opacity for a page element:

  1. Click the style icon style icon in the sidebar.
  2. Click a page element, either Background, Survey, Questions, Title, Headings, or Body Text.
  3. Select a color from your palette in the Color drop down for the element.
  4. If you are styling a frame background color, select an opacity level using the slider. At 0 your color is totally transparent. At 1 it is completely opaque. A transparent color changes hue based on the color of the element beneath it.
  5. Click Save to save your changes.
Color Styling

Applying a Custom Background

Upload a background image or select a background color in the Background section. Setting a new background color that is different from the palette color assigned to Background will leave whatever is set to background showing through certain question answer elements like text boxes, drop downs, and radio buttons.

To change the background image or color:

  1. Click the style icon style icon in the sidebar.
  2. Click the Customize tab and click Background.
  3. To change the color, select one from your palette in the Color drop down.Select an opacity level using the slider. At 0 your color is totally transparent. At 1 it is completely opaque. A transparent color changes hue based on the color of the element beneath it, which will be whatever color is set as Background in your palette.
  4. To upload a background image, select Custom next to Image and chose your file to upload.

Styling Text

Style the following text elements in your survey:

  • Title: The title of your survey.
  • Header: Question text.
  • Body Text: Question answer text.

To style a text element:

  1. Click the style icon style icon in the sidebar.
  2. Click a text element, either Title, Header, Questions, Body Text.
  3. Select a font and size.
  4. Choose whether you want the text to be bold, italic, or underlined.
  5. Choose a color from your palette drop down.
  6. Click Save to save your changes.

Adjusting Padding, Margins, and Setting Corner Sharpness

You can adjust the padding and create rounded corners for any frame element in your survey. Frame elements include:

  • Survey
  • Questions
  • Backdrop under the Logos section

Corners

Use the Corners slider to increase or decrease the sharpness of corners. At 0 corners are completely square. At 100 corners are rounded enough to form a quarter of a circle.

Padding & Margins

Padding determines how much space exists between text and the edge of the frame. Use the padding sliders to select a horizontal and vertical padding value between 0 and 100. Padding increases as the number increases.

The Question element allows you to also set an Internal and External padding value. The Internal slider determines the spacing between your question text and answer choices. The External slider determines the spacing between questions.

The Survey element allows you to set both a vertical and horizontal Margin. These sliders set a margin around your survey. For example a large vertical margin will move your survey away from a logo placed at the top.

Setting the Width and Alignment of the Survey

The Survey section lets you set the width of your survey from 50 to 1,400 pixels using the Width slider and choose whether the frame is aligned left, right, or center.

Preview Pages or Mobile View

You can preview you style changes on different pages by selecting the page number from the page drop down in the upper right corner in the editor window. Switch between a preview of your styled survey in browser, mobile portrait, and mobile landscape using the icons in the top middle of the editor window.