With surv.app you can create advanced multi-page surveys in Markdown and style them with custom HTML/CSS. When Google Forms feels too simplistic or rigid, surv.app will do just right.
A survey in surv.app is just a Markdown document which can also contain valid HTML blocks. We provide some syntax extensions for asking questions, skip logic, and displaying previous answers.
There are two types of questions in a survey: open and closed questions. Open-ended questions are followed by a text input field. Closed questions offer a choice from two or more predefined options.
Closed questions are more common because they are easier to answer and faster to analyze. Here is an example:
How old are you?
? age_group
- 0-18
- 19-35
- 36-55
- 56 or older
And the result:
How old are you?
age_group = ?
A line starting with a question mark denotes a response block. After the ? you should define a variable - an alphanumeric name by which the response will be stored. Next comes a list of options as a standard Markdown list.
For open-ended questions we do not provide a list of options to pick from. There should be one paragraph which becomes a placeholder for text input. Here is an example in Markdown:
How old are you?
? age
Number of complete years
And the result:
How old are you?
age = ?
Pages are used to split a long survey into multiple screens. Displaying questions one by one is also considered a good practice for mobile surveys. In surv.app a horizontal rule (--- or ***) serves as a page separator. A minimal survey should have at least two pages: the first (main) page with questions and the final "Thank you" page.
You have to provide a Next button on each page. Pressing a Markdown link with a plus sign (+) in place of the URL address will advance to the next page. A link with a minus sign (-) will return you to the previous page.
Here is an example:
How old are you?
? age_group
- 0-18
- 19-35
- 36-55
- 56 or older
[Submit](+)
---
Thank you!
[Go back](-)
Conditions allow you to skip a question or the whole page based on previous answers. Another common case is to hide the Next button until we get a valid answer. Both of these tasks are solved by conditional expressions in JavaScript preceded by @.
Conditions can be attached to individual paragraphs, response blocks and page separators (to skip the whole page if the condition is false).
How old are you? (required question)
? age_group
- 0-18
- 19-35
- 36-55
- 56 or older
@ age_group
[Submit](+)
---
@ age_group == "0-18"
Hello, youngling!
@ age_group != "0-18"
Hello, oldie!
[Go back](-)
[Next](+)
@ age_group != "0-18"
---
Some questions for oldies
[Next](+)
---
The End
Previously given answer can be displayed with { variable_name } syntax. Same as conditions, these are fully functional JavaScript expressions, so you can dynamically generate questions and response options.
How old are you?
? age
Number of complete years
@ age > 8 && age < 99
[Submit](+)
---
You are {age} years old.
When you got to school?
? school_year
- In { new Date().getFullYear() - age + 6 }
- In { new Date().getFullYear() - age + 7 }
- In { new Date().getFullYear() - age + 8 }
Response parameters affect the looks and behavior of answer lists and input fields.
By default a closed question accepts a single choice only. With max parameter you can set the maximum number of options for a respondent to pick. Combine max with min to set the minimum number of options.
What are your favourite colors? Pick at least two colors.
? fav_color max=4 min=2
- Red
- Blue
- Green
- Yellow
Add shuffle parameter to randomize the order of answers. That helps to reduce choice order effects in a survey.
What is your favourite color?
? fav_color shuffle
- Red
- Blue
- Green
- Yellow
Text fields don't support line breaks by default. You can enable multi-line input by specifiying the number of rows.
Please describe your perfect holiday:
? holiday_desc rows=4
Write here...
Configure text field for numeric input with min and max parameters.
How old are you?
? age min=1 max=99
Age
Response blocks are styled with input, single or multiple class depending on the response type. Picked answers are marked with checked class.
To override the default CSS class specify the class parameter.
<style>
.nps li {
display: inline-block;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 5px;
width: 1.6em;
text-align: center;
line-height: 1.6em;
margin: 0.2em;
}
.nps .checked {
border-color: red;
color: red;
}
</style>
How likely are you to recommend us on a scale from 0 to 10?
? nps_score class="nps"
- 0
- 1
- 2
...
- 10
How likely are you to recommend us on a scale from 0 to 10?
That's all for now.