Design a survey: style, fonts, colors and language

A survey that looks like part of your site feels more trustworthy, and visitors answer it more readily. You can change the style without any code. The survey runs separately from your site's own styling, so your theme can't break it, and the survey doesn't change anything on your site.

Start from a style

Under Design → Start from a style, pick one of the ready-made styles: Classic, Dark, Minimal, Soft & round, Bold, Elegant, Fresh or Ocean. A style sets the colors, fonts and shapes in one click. The style you use has a check mark. Once you change a color, font or shape yourself, none is marked and the editor says you have a custom style. Your logo and your own CSS stay when you switch styles.

To go back to the standard look, click Reset to the default style at the bottom of the section. It resets colors, fonts and shapes; your logo and own CSS stay.

The section shows the three main colors right away. Everything else is under More options: the other colors, fonts, shapes, size, logo and your own CSS.

Colors

Setting	What it changes
Background	The survey card.
Text	Questions, answers and other text.
Buttons	The send button, chosen answers, the progress bar and the feedback tab.
Button text	The text on buttons and on chosen answers. Under More options.
Border	The line around the card, when Border under Shape is more than none. Under More options.

Click a color square to pick a color, or type a code such as #ff4f00. If a code isn't valid, the field turns red and the survey keeps the last valid color.

Fonts and text

• Font: the font of the whole survey. Choose System font (loads instantly and looks like the visitor's device), The font of my site, one of more than 35 fonts in the list, or Another font my site loads… and type its exact name.
• Font for questions: a different font for the questions and the thank-you title, for example a serif for headings. Same as the text keeps one font.
• Text size and Question size: in pixels.
• Question weight: from Regular to Extra bold.
• Alignment: Left or Center.

Fonts from the list are delivered by Varly itself. Your visitors' browsers never contact Google or another font service, so fonts share no visitor data with a third party.

Shape, buttons and answers

• Card corners, Button corners (all the way to Pill) and Answer and field corners set how round each part is.
• Border: a line around the card, from none to 4 pixels, in the Border color.
• Shadow: None, Soft, Medium or Strong.
• Buttons: Filled or Outline.
• Answers: how answer options look before someone picks one: Outline, Tinted or Filled.

Size, motion and logo

• Width and Padding set the size of the card. On phones the survey always fits the screen.
• Animation: Slide up, Fade in, Pop or None. Visitors who asked their device for less motion never see an animation.
• Darken the page behind it: only for surveys in the middle of the screen.
• Show a progress bar when there is more than one question: on by default.
• Logo image: the address of an image that starts with https://, for example from your shop's files. Once you fill it in, you can set the Logo height.

When a survey is taller than the screen, for example with many answers on a small phone, the survey scrolls inside its card. The × to close it always stays visible.

Your own CSS

For full control, use Your own CSS under More options. Your CSS only applies inside the survey, never to the rest of your site. You can style these parts: .card, .prompt, .opt, .send, .back, .close, .bar, .done and .logo.

For your visitors' privacy, links to other files (such as url(…) or @import) are removed, so your CSS can't load fonts or images from other servers.

Language

The Language setting controls the buttons and standard texts. Choose Same as the page, English, Dutch, German, French or Spanish.

With Same as the page, Varly uses the language set in your page's code. If the page doesn't have one, it uses the browser's language. If that language isn't one of the five above, the survey uses English.

With Same as the page, buttons and standard texts follow the page, but your questions and answers stay as you wrote them. So if your questions are not in English, pick their language here.

Varly translates these standard texts for you:

• the "Next", "Back" and "Send" buttons
• the thank-you message
• "Please answer this question." and the message for an email address that isn't valid
• the "Other" answer and its placeholder
• the standard labels at the ends of a scale
• the placeholder in text boxes

Questions and answers that come from a template switch to the new language too, as long as you haven't changed them. Texts you wrote or changed yourself stay exactly as you wrote them; the editor tells you how many there are, so you can translate them yourself. For a site in more than one language, create one survey for each language. Then use Page languages under Where and for whom to show each one only on pages in that language. See Choose where and when a survey appears.

Your own texts

You can replace five standard texts. Each box shows the standard text in the survey's language in gray; leave a box empty to keep it.

• Next button: the button to go to the next question. The standard text is "Next".
• Back button: the button to go back a question. The standard text is "Back".
• Send button: the button on the last question. The standard text is "Send".
• Thank-you title: the standard text is "Thank you!".
• Thank-you text: the line below the title, up to 160 characters. The standard text is "Your answer has been sent."

After the last answer

You can give visitors something back for answering:

• Discount code (optional): shown in the thank-you message, for example THANKS10.
• Link after answering (optional): a link in the thank-you message, for example to a page with a special offer. The address must start with https://. Under Link text, set the text people click. If you leave it empty, the address itself is shown.

Without a code or link, the thank-you message disappears after about two seconds. With a code or link, it stays on the page, so the visitor can copy the code or click the link, and closes with × in the corner. A survey Inside the page keeps its thank-you message on the page in every case.

Check it in the preview

The Preview next to the editor shows the real survey, with your questions, rules, colors and language. Click through it like a visitor would. Nothing you do in the preview is sent or counted.

• Switch between Desktop and Mobile. Mobile shows the survey the way a phone shows it: across the full width at the bottom of the screen.
• Click ↺ to start the preview over from the first question.
• Questions without text are left out of the preview until you write them.
• A Feedback tab on the side survey shows the tab on the right edge of the preview. Click it to open the survey.
• A survey in the Center of the screen shows the dimmed page behind it.

With Language set to Same as the page, choose a language under Show it as on a page in to see the buttons and standard texts the way visitors on a page in that language see them. Your questions and answers stay as you wrote them in every language.

Common problems

• "Colors must look like #ff4f00". A color must be a # followed by three or six characters. Pick it with the color square instead of typing it.
• "The logo must be an image address that starts with https://". Use the full, secure address of the image file.
• The logo doesn't appear. Open the image address in your browser. If it doesn't show an image there, the survey can't show it either.
• "The thank-you link must start with https://". Use the full, secure address of the page, including https://.
• The survey looks different on your site than in the preview. With The font of my site or Another font my site loads…, the preview can't use your site's font. Check the survey on your site itself in a private window.