A custom survey style allows you to change the look and feel of your survey.

Each survey page has a body class of .survey-page-N, where N is the page number. You can use this to style each page separately, if needed.

Within the page there are two main containers for your questions – .PDF_pageOuter refers to the overall page container, and .PDF_pageInner to the survey content (i.e. your questions).

Questions

All questions are contained within a .PDF_question element, and are always followed by a .PDF_questionDivide. Each question has an ID of pd-question-N, and the divider pd-divider-N.

A question can contain a number .qNumber, and will always contain question content .qContent.

The question content will generally contain a title .qTitle, a note .qNote, and HTML specific to the question type.

Text (single) – .PDF_QT100

The text field is a single <input type="text"> box and will have a class of .small, .medium, or .large, depending on the configuration.

Text (multi) – .PDF_QT200

The text field is a single <textarea> box and will have a class of .small, .medium, or .large, depending on the configuration.

Multiple Choice – .PDF_QT400

A single choice is represented as an unordered list of <input type="radio"> and corresponding <label> elements.

A multi-choice is represented as an unordered list of <input type="checkbox"> and corresponding <label> elements.

A single and multi choice dropdown an is represented as a <select> element as the only item of an unordered list.

Name – .PDF_QT800

Depending on the configuration of a name question, the HTML will consist of several elements containing a label and an <input type="text"> element. The input elements will have class names as follows:

.title – Title

.firstName – First name

.lastName – Last name

.suffix – Suffix

Address – .PDF_QT900

Depending on the configuration of the address question, the HTML will consist of several elements containing a label and <input type="text"> element. The country uses a <select> dropdown. The following classes are used:

.a – Address line 1

.b – Address line 2

.c – City

.d – State

.e – Zip

Date/Time – .PDF_QT1000

Depending on the configuration of a date question, the HTML will consist of several elements containing a label and <select> or <input type="text"> (for year) element. The input or select elements will have the following class names:

.mm – Month

.dd – Day

.yyyy – Year

.hh – Hour

.min – Minute

Matrix/Likert – .PDF_QT1200

The matrix contains a <table> with rows and columns that match the question. Each entry contains an <input type="checkbox"> or <input type="radio">, depending on if the question allows one or more choices per row.

Email – .PDF_QT1400

This contains a label, and <input type="text"> element with class .survey-email

Note that the type will be HTML5 email if supported by the browser.

URL – .PDF_QT1500

This contains a label, and <input type="text"> element with class .survey-url