Custom Survey CSS

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

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

File Upload – .PDF_QT1600

This contains a <input type="file"> element with class .file-upload