Custom CSS Selectors

Introduction

Custom CSS allows you to target specific questions, containers, icons, and more to customize a form's styling to match your branding or preference.

This is not an exhaustive list of all possible classes, ID, attributes, or combinations. It should serve to illustrate many possible options and get you started on the right track.

To discover more selectors, you should familiarize yourself with your browser's developer tools and inspect the elements on the page.

Custom CSS is available on specific pricing plans.

Selectors

Universal

Selector	Target or Purpose
`.Paperform_Container`	Entire form
`.Paperform__QuestionBlock`	Container of every question group
`.Paperform__QuestionBlock--{key}`	Container for question group specified by key
`.Paperform__Question`	Every question element
`.Paperform__Question--{key}`	Question specified by key
`.LiveField__error`	Any error below any question

Replace key with desired question's pre-fill key.

Dropdown

Selector	Target or Purpose
`.Select`	Every dropdown question
`.Select--single`	Dropdown questions that allow only one answer
`.Select--multi`	Dropdown questions that allow more than one answer
`.Select-menu-outer`	Menu listing options when dropdown is focused
`.Select-option`	Individual options in open dropdown menu
`.Select-value-label`	Label of individual answer(s)
`.Select-value-icon`	Icon next to label for questions that allow multiple answers
`#react-select-{key}--list`	Dropdown menu for question specified by `key`
`#react-select-{key}--option-{index}`	Option at specified `index` (0-based) within question specified by `key`

Replace key and index with desired question's pre-fill key and position (index), respectively.

Multiple choice

Selector	Target or Purpose
`.Choices`	Every multiple choice question
`.Choices__choice`	Every option individually
`.Choices__choice--{index}`	Option by `index` (1-based)
`.Choices__label`	Option text
`[aria-checked="true"]`	Determine if option is selected

Replace key with position (index).

Product

Selector	Target or Purpose
`.Product__withquantity`	Every product individually
`.ProductCards`	Every product together
`.Product__labelwrapper`	Wrapper for label and price
`.Product__label`	Product label
`.Product__price`	Product price
`.Product__withquantity.MaterialIcon`	Icon for products in `list` appearance
`.Product__imgthumb`	Product images
`[for="ProductInput__{sku}"]`	Product image for product with `sku`
`.Product__imgthumb.MaterialIcon`	Icon to expand product images

Yes / No

Selector	Target or Purpose
`.YesNo__button`	Both buttons in question

Appointment

Selector	Target or Purpose
`.PaperCalendar`	The entire appointment container (includes controls)
`.PaperCalendar__controls`	Navigation, current month, and time zone controls
`.PaperCalendar__back`	Back button for calendar navigation
`.PaperCalendar__forward`	Forward button for calendar navigation
`.PaperCalendar__wrapper`	The entire calendar (excludes controls)
`.PaperCalendar__dayHeader`	Days listed at the top of the calendar
`.PaperCalendar__dayLabel`	All labels for days in the day header
`.PaperCalendar__daysList`	Grid of days displayed in calendar
`.PaperCalendar__day`	All days in the calendar
`.PaperCalendar__day--disabled`	All unavailable days in the calendar
`.PaperCalendar__day--outsidemonth`	Days that are outside the currently selected month
`.PaperCalendar__View--year`	Year selection view
`.PaperCalendar__yearscrollYear`	Each year entry's container
`.PaperCalendar__tzwrapper`	The entire time zone selection (includes search)
`.PaperCalendar__tzwrapper.input`	Time zone search input
`.PaperCalendar__tzscrolltz`	Each time zone entry's container
`.Appointment__time-picker`	Entire time picker (includes day)
`.Appointment__time-picker-back`	Day button within time picker
`.Appointment__time-picker-inner .Appointment__time-button`	Time buttons within time picker

Date

Selector	Target or Purpose
`.PaperDateInput-container`	Date input (excludes calendar button)
`.PaperDateInput__wrapper`	Every date input (day, month, year)
`.PaperDateInput__separator`	Separator between date inputs
`[aria-label="toggle calendar"] i`	Toggle calendar icon

Navigation, year selection, and day selection selectors from the Appointment question apply. Separator selector modifies the separator as is but does not change its content.

Time

Selector	Target or Purpose
`.PaperTime`	Time input (includes button)
`.PaperTime__time`	Time input (excludes button)
`input[name="hour"]`	Hour input (includes separator)
`input[name="minute"]`	Minute input
`.PaperTime__colon`	Time separator
`.PaperTime__button`	AM/PM button (12-hour time only)

Separator selector modifies the separator as is but does not change its content.

Scale

Selector	Target or Purpose
`.Scale__track-wrapper`	Container around scale line and its options
`.Scale__track`	Scale line through options
`.Scale__checkbox-container`	Each option's "checkbox"
`.Scale__checkbox-label-text`	Each option's label

Slider

Selector	Target or Purpose
`[data-reach-slider-range]`	Color of slider from start to current position
`.Slider__axis-label--min`	Label of minimum value
`.Slider__axis-label--max`	Label of maximum value
`div[data-reach-slider-handle]::before`	Label of current value above slider

Rank

Selector	Target or Purpose
`.Rank`	Container around rank options
`.Rank__option`	Every rank option
`.Rank__option--selected`	Every rank option when answered
`.Rank__order-selector`	Option's current rank (empty if unanswered)
`.Rank__option-label`	Every option's text label
`.Rank__option-handle`	Drag handle on each rank option

Rating

Selector	Target or Purpose
`.Rating`	Container around rating icons
`.Rating__option--icon`	Every icon
`.Rating__icon-selected`	Icon when selected
`.Rating__icon-unselected	Icon when selected or unselected

Uploads (image, file)

Selector	Target or Purpose
`.File btn-raised`	Upload button (single upload)
`.MultipleFiles .BtnV2--raised`	Upload button (multiple uploads)
`.MultipleFiles__file`	Button for uploaded file (multiple uploads)
`.MultipleFiles__file span div span`	File name and upload progress label (multiple uploads)
`.MultipleFiles__file .MaterialIcon`	Removal icon for uploaded file (multiple uploads)

Gotchas

Question group (block) keys

A question group's key is unique to its specific block of questions. It is automatically generated, cannot be modified, and does not change unless the questions are completely removed and re-added.

Question keys

The key for questions is the auto-generated pre-fill key. Custom pre-fill keys will not work.

Examples

Review our custom CSS cheat sheet for a sampling of real-world use cases with the CSS to achieve them.

Need more help?

If you're having trouble with custom CSS or if you have questions as to how it works, feel free to reach out and ask our support team.

We can help guide you onto the right path and help you understand what you might need to do in order to proceed to build the full solution out yourself. By keeping you involved in the process, you'll be empowered to create, modify, and extend your CSS in the future and ensure the solutions is scalable and sustainable in the long term.

Support is available via the chat icon in the bottom-right corner of the page, or you can email us at support@paperform.co.

Can I add a progress bar to my form?

You can add a progress bar in Theme → UI Elements → Pagination Buttons → Pagination Style → and choose Progress Bar

What can I do with custom CSS?

Custom CSS provides fine-grained control over the styling on the page, including spacing, alignment, positioning, and lots more!

Can I customize how products are displayed?

You can display products in one of three layouts: List, Card, or Gallery.

Can I fully customize the language and wording of forms, including the UI & buttons?

You can create, edit, and manage all of your translations under Account Settings → Translations. You can then apply these to forms from the Theme Settings.