Help Center

Survey appearance: how do I put my questions in ‘cards’

Webdesign is slowly moving away from the full page views we were so used to. More and more you see individual ‘cards’ on web pages. Twitter is a good example of this usage of cards. You can mimic that view using our survey tool as well.

Switch to a ‘card’ design

By making some small changes to the Appearance settings in your survey you can easily put each question in a separate card.

  1. Go to the survey.
  2. Click on Settings and then on Appearance.
  3. Click on Frame.
    • Check the box next to Show frame.
    • Choose a color for the background. This will be the background color of your survey.
    • Set the border color to Transparant. You can do so by deleting the hexadecimal code that’s mentioned, or by selecting the X in the color picker.
how to select a transparant color in the survey appearance editor
  1. Click on Page.
    • Set the background color to Transparent. You can do so by deleting the hexadecimal code that’s mentioned, or by selecting the X in the color picker.
Set a transparant color for the survey page
  1. Click on Question.
    • Select a background color. This will be the color of your cards.
Set a background color for the survey questions
  1. Click on Save.

Now when you open the preview you will see the cards version of your survey.

Example of the ``Cards`` view

Switch back to the full page view

Of course if you want to keep the traditional page view, this is still possible, too.

  1. Go to the survey.
  2. Click on Settings and then on Appearance.
  3. Click on Frame.
    • Check the box next to Show frame.
    • Set a background color and border color.
Set a background and border color for the Frame
  1. Click on Page.
    • Select a background color.
Select the same background color for the page as for the questions
  1. Click on Question.
    • Select the same background color as you used for the Page.
Select the same background color for the page as for the questions
  1. Click on Save.

Now when you open the preview you will see the page version of your survey.

Example of the ``full page`` view

Leave a Reply

Your email address will not be published.