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.
- Go to the survey.
- Click on Settings and then on Appearance.
- 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](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/select-transparant-color-1.png)
- 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](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/Page-transparant-background-color-1.png)
- Click on Question.
- Select a background color. This will be the color of your cards.
![Set a background color for the survey questions](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/Question-background-color-1.png)
- Click on Save.
Now when you open the preview you will see the cards version of your survey.
![Example of the ``Cards`` view](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/Cards-version-example-1.png)
Switch back to the full page view
Of course if you want to keep the traditional page view, this is still possible, too.
- Go to the survey.
- Click on Settings and then on Appearance.
- 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](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/Frame-border-color-1.png)
- Click on Page.
- Select a background color.
![Select the same background color for the page as for the questions](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/Page-background-color-1.png)
- 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](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/Question-background-color-1.png)
- Click on Save.
Now when you open the preview you will see the page version of your survey.
![Example of the ``full page`` view](https://fe-stage.checkmarket.com/wp-content/uploads/2017/01/Full-page-version-example-1.png)
Leave a Reply