Applying Custom CSS to Your Survey
Help Center

FluidSurveys Help > Building Surveys or Polls > Style

Applying Custom CSS to Your Survey

Use advanced CSS features to completely style a survey, or to make small, custom styling changes like removing the “thumbs up” icon that displays on the survey completion page.

You should only use Custom CSS and the template grabber if you are familiar with CSS and HTML. We do not offer support for issues with custom CSS.

To add Custom CSS:

  1. Select your survey.
  2. Click the Style icon style icon on the lefthand sidebar.
  3. Click Advanced.
  4. Enter your custom CSS where the form says /*Enter custom css here*/.
VIDEO: Modifying CSS
Using CSS to Hide the Thumb Icon

To hide the “thumbs up” icon that displays by default on the survey completion page, add the following CSS to the custom CSS form:

#survey .survey-icon.thanks {
    display: none;
}

Defining Extra Classes to Style Questions

Extra class is a field available in the Display Options of most question types. Extra classes can be used as selectors in either custom CSS or javascript questions.

To define and create an extra class:

  1. Select your survey.
  2. Click the Style icon style icon on the lefthand sidebar.
  3. Click Advanced.
  4. Define your class where the form says /Enter custom css here/.
  5. Click Save.
  6. Click the Edit icon edit icon image to return to the editor.
  7. Select a question you want to add the class to.
  8. Click Display and click None next to Extra Classes:
  9. Type your class name.
  10. Click Save.
  11. Click the preview icon preview icon to preview your style changes.

custom CSS for extra class added

Using the Template Grabber

The template grabber allows you to copy the branding of a web page and apply it on your survey by specifying a particular div or table id where you would like your survey to be positioned. This feature makes it easy to incorporate a survey into an existing website template.

  1. Select your survey.
  2. Click the style icon style icon on the lefthand sidebar.
  3. Click Advanced.
  4. Select the Template Grabber tab.
  5. In the Page URL field, enter the URL of the site you are grabbing from.
  6. In the Target id field, enter the id for the div or table where you would want your survey to be positioned on the site. For many sites this will be main.

If you have a multi-language survey you will need to repeat this process for each added language and grab the template from the appropriate language version of your site.

Use inspect element to find the id of the div or table where you want your survey to be positioned on the page.
VIDEO: Template Grabber