The styling of the form is determined by the page on which you will place it. Are you going to place it on a webpage in Spotler? Your web template in Spotler already offers styling options for forms, allowing you to adjust them to the style of your template. If you are going to be placing the form externally (for example, on your website), you will also have to style your form externally.
The layout of a form or survey is determined by the style of the webpage. To do this, a style sheet (CSS) is used. The CSS must be available on all webpages the form will be integrated in.
This article will explain the commonly used classes. This will help you to quickly adjust the layout of the form to your wishes or requirements.
When formatting the form, you must consider how the form will be generated. A form that consists of tables is less flexible than a form generated without tables. If you insert a form on a Spotler webpage, it will be generated with tables by default.
Styling of form elements
Forms have various elements that can be styled:
- General layout
- Multiple-choice questions
- Input fields
- Question settings
- Error messages
- Summaries
- Image as button
General lay-out
There are a couple of important classes for the general layout of a form:
| Name | Clarification |
| .mpFormtable | General form layout, such as the width |
| .mpQuestiontable | The table around the question |
| .mpTwoColumnLayout | If the setting "As question and answer side by side" is selected |
| .mponeColumnlayout | If the setting "As question and answer underneath each other" is selected |
| .mpHighlight | Styling of the focus of a question |
| .submitCell | The settings for padding and alignment of the Send button |
| .submitCell input | The layout of the Send button in the form |
Multiple-choice questions
There are various types of multiple-choice questions, such as: checkbox and radio button questions, but also matrix questions.
Layout of checkbox and radio button questions
| Name | Clarification |
| .mpFormLabel | The text of the question |
| .mpMultipleLabel | The label behind the checkbox or radio button |
| .mpFormfield input.mpOtherCustominput [type="text"] |
Other, namely: field |
Layout of matrix questions
| Name | Clarification |
| .mpMatrix | The table around the matrix question |
| .mpMatrixLabel | The text of the question |
| .mpFormLabel | The proposition |
| .mpFormdescription4 | The options above the radio buttons in case of rating scale 4 |
| .mpFormdescription5 | The options above the radio buttons in case of rating scale 5 |
| .mpFormdescription10 | The options above the radio buttons in case of rating scale 10 |
| .mpFormAnswer | Text that you will type in the radio button cell |
| .mpradioButtonTable | The table around the radio button or checkbox answers |
Layout of drop-down questions
| Name | Clarification |
| .mpFormLabel | The text of the question |
| .mpFormfield select | The drop-down |
| .mpFormfield option | The option in the drop-down |
Input fields
| Name | Clarification |
| .mpFormLabel | The text of the question |
| .mpFormField | The layout surrounding the answering options |
| .mpFormfield input[type="text"] | The typed answer |
Layout of text input multiple lines
| Name | Clarification |
| .mpFormLabel | The text of the question |
| .mpFormField textarea | The layout surrounding the answering options |
| .mpFormfield input[type="text"] | The typed answer |
Layout of date question
| Name | Clarification |
| .mpDateField | Styling of the date input field |
| .mpDatefield.mpDD | Specific styling of the Day field |
| .mpDatefield.mpMM | Specific styling of the Month field |
| .mpDatefield.mpYYYY | Specific styling of the Year field |
Question settings
The questions themselves can also have specific settings. A question can be mandatory, have a sub label and/or help text. These elements can be styled too.
Layout of mandatory questions
If a question is mandatory, an asterisk (*) will appear at the end of the question. You can format this asterisk using the following class:
| Name | Clarification |
| .mandatorySign | Styling of the asterisk (*) |
Layout of help text
If you want an explanatory text with your question, you can activate the help text function. An icon will appear behind the question. If you move your cursor across this icon, a help text will appear. You can format this icon and its positioning with:
| Name | Clarification |
| .formHelpText | Styling of the help text icon |
Layout of sub label
A sub label is an explanatory text that will appear underneath the input field, for example, with an email address or date input field.
| Name | Clarification |
| .sublabel | Styling of the sub label |
Error messages
If a respondent enters a question incorrectly, or forgets to complete it if it's mandatory, an error message will appear.
| Name | Clarification |
| .mpErrorSummary | Error message at the top of the form |
| .mpErrorSummary ul | A summary of the questions that aren't valid |
| .error | The table surrounding the question that triggers an error |
| .mpErrorRow | The error message underneath the question |
Summaries
If a form or survey is completed, the respondent is directed to a Thank you page. On this page, the respondent is generally thanked for completing the form. But it is also the ideal place to display a summary of the respondent's answers. A distinction is made between textual summaries and graphical summaries (an overview of what other respondents have answered).
| Name | Clarification |
| .formResultlabel | The summary of the question |
| .formResultvalue | The completed value (the answer to the question) |
For multiple-choice questions where one answer can be chosen, if a summary has been placed for all respondents, it is possible to graphically show how the answer of the respondent compares to the answers of the other respondents.
| Name | Clarification |
| td.pollQuestion | The layout of the question |
| td.pollitem | The item number |
| td.pollAnswerHighLight | The chosen option |
| td.pollAnswer | Choice option |
| td.pollVisual | The colored bar |
| td.pollCellLeft | Number of times the answer was chosen, in percentage in relation to the total |
| td.pollCellRight | The empty space to the right of the percentage |
| td.pollCell0Pct | The color of the bar if this answer has not been chosen |
| td.pollCell100Pct | The color of the bar when the answer was chosen 100% of the time |
| tr.PollAnswerHighLight | The color of the bar if the respondent has chosen this answer |
| td.pollPercentage | The layout of the percentage represented textually |
| .mpFormResultChildLabel | The proposition in the matrix question |
Image as button
Each form has a Send button and, if forms have multiple pages, also a Previous and Next button. These buttons can be styled through CSS.
| Name | Clarification |
| .submitButton | The Send button |
| .nextPageButton | The Next page button |
| .previousPageButton | The Previous page button |
It is also possible to use an image for these buttons. These options are already included in the CSS code, but in between the comment tags so that they are not active.
/* Send/next/previous button as image
.submitButton{
background-image:url(‘’);
width:100px;
height:35px;
}
.nextPageButton{
background-image:url(‘’);
width:100px;
height:35px;
}
.previousPageButton{
background-image:url(‘’);
width:100px;
height:25px;
}
*/
Even with the use of this code, the image can be formatted quite specifically. First, you have to make sure that the image of the send button is available online. You can add this URL to background-image:url('). Next, you have the possibility to indicate how wide and how high the image is, and whether to include a border or background color.
Don't forget to remove the comment tags and don't put any text on the buttons in the form. Otherwise, the text will overlap the background image.