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.



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.

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).


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


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


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.


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.


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


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


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


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)


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.


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