Introduction

This reference presents some common operations in customizing your forms using custom CSS. These are not all the available options. Custom CSS allows you to arbitrarily style your form, with few exceptions. The greater your experience with CSS, the more you'll find that you can modify to fit your unique brand or preferences.

Some helpful tips in getting started:

  • Review our documentation on custom CSS selectors to familiarize yourself with how you might target certain questions, groups, or other elements on the form. There are many selectors presented but it is not an exhaustive list.
  • Some selectors require that you understand what a pre-fill key is and how to find it.
  • At times, usage of !important may be necessary to override styling. Typically, however, using greater specificity will help you target the right element(s) and avoid overuse of !important, which can be tricky to debug if there's multiple instances of it across your CSS.
  • Consult outside resources as necessary. Mozilla maintains excellent CSS documentation.

The examples provided are a starting point. You do not need to use exactly the same CSS and can experiment to achieve your desired appearance.

Examples

Pagination and Submission

Hide the submit button

This will hide the submit button on both standard guided modes. Since there is no submit button displayed, the form will be unable to be submitted. Depending on your use case, this may be desirable behavior.

.submit,
.GuidedModeInstructions__container--submit {
    display: none;
}

Change progress bar position

In guided mode, the progress bar is affixed to the top edge of the page. In standard mode, it is shown as floating pagination near the bottom of the visible part of the page. If you want to modify this for standard mode (e.g. to be near the top), you can use this CSS as a starting point.

.Pagination {
    top: 5%;
    bottom: 80%;
}

Pagination buttons at top of form

Disable back button

In standard mode, the back button is always visible if there are multiple pages. If you wish to remove the back button, you can apply some CSS to override it.

.Pagination__btn--previous {
    visibility: hidden;
    pointer-events: none;
}

In guided mode, the back button is off by default and may be enabled (or disabled if you enabled it previously) in Theme → UI Elements → Pagination Buttons.

Modify pagination button text for a specific question in guided mode

.editor:has(.GuidedModeEditor__view-positioner--enabled .LiveField[data-key="PREFILL_KEY"]) .GuidedModeInstructions__button:not(.GuidedModeInstructions__button--back)::before {
    content: "MESSAGE";
}

Make sure to replace:

  • PREFILL_KEY: The pre-fill key of the question you're after
  • MESSAGE: The text content you'd like for the pagination

Modify pagination text for specific question

Hide forward pagination when a specific question is visible in guided mode

You may wish to hide the forward pagination button if a specific question is visible in guided mode. For example, perhaps you don't want the respondent to continue with the form if they reach a certain point and you want them to go back and answer differently.

.editor:has(.GuidedModeEditor__view-positioner--enabled .LiveField[data-key="PREFILL_KEY"]) .GuidedModeInstructions__button:not(.GuidedModeInstructions__button--back) {
    display: none;
}

Replace PREFILL_KEY with the pre-fill key of the question you're after.

Fields

Remove box shadow

By default, items such as multiple-choice options and yes/no buttons have a shadow applied around their buttons, know as a box shadow. If you prefer a flat look, that's possible!

.btn-raised, .btn-raised:hover, .btn-raised:focus {
	box-shadow: none;
}

Multiple choice options without box shadow

Hide sold out products

Sold out products remain visible on a product question but are visibly indicated to be sold out. If you wish to remove sold out products from view entirely, you can!

.Product__withquantity--soldout {
    display: none;
}

Modify slider colors

You may modify numerous aspects of a slider independently, in the order in which they appear in the example CSS:

  • Color of slider up to current position
  • Minimum value label
  • Maximum value label
  • Current answer's label
[data-reach-slider-range] {
    background: green;
}

.Slider__axis-label--min {
    color: green;
}

.Slider__axis-label--max {
    color: green;
}

div[data-reach-slider-handle]::before {
    color: green;
}

Modified label colors for slider question

Show time slots to the side for appointments

You may show available time slots to the side of the calendar instead of presenting a new view with just the time slots.

@media screen and (min-width: 700px) {
    .Appointment__wrapper {
        display: flex;
	padding-top: 20px;
		
	.PaperCalendar {
            margin-top: 0;
	}

	.PaperCalendar, 
        .PaperCalendar__dayWrapper, 
        .PaperCalendar__wrapper, 
        .PaperCalendar__yearWrapper {
	    height: 100%;
	}

	.Appointment__time-button.Appointment__time-picker-back {
	    display: none;	
	}

	.Appointment__time-picker--minutes-view {
	    flex: 4;
	    margin-top: 0;
	    padding-left: 8px;
	    display: block !important;	
	}

	.Appointment__day-wrapper--minutes-view {
	    flex: 8;
	    display: block !important;	
	}
    }
}

Appointment time slots displayed to right side of calendar

Maintain consistent color for text question's bottom border

A text question has a bottom border that changes based on whether it is focused. To avoid the changing color and maintain a consistent color regardless of focus, you can use this CSS.

input[id^="field-text"] {
    border-bottom: 1px solid #50B472 !important;
}

Modify the line width, line style, and color as desired.

Add currency symbol to slider labels

Slider labels may only be numbers by default. This example CSS adds a currency symbol – $ – and some green for fun.

/* Selectors for slider field's min label, max label, and value */
.Slider__axis-label--min, 
.Slider__axis-label--max, 
[data-reach-slider-handle]:before {
    color: #006600 !important;
}

/* Prepend string to the axis labels */
.Slider__axis-label--min:before, 
.Slider__axis-label--max:before {
    content: "$" !important;
}

/* Prepends a string to the slider value */ 
[data-reach-slider-handle]:before {
    content: "$" attr(aria-valuenow);
}

You may insert whichever symbol you need in the two instances of content.

Currency symbol prepended to slider question labels

Modify multiple aspects of yes / no questions

You can combine what we've learned to alter box shadow, borders, padding, hover behavior, and colors to make questions look and feel uniquely yours.

.YesNo {
    display: flex;
    justify-content: space-between;
}

.YesNo .YesNo__button {
    width: 49.5%;
    padding: 1em 2em;
}

.YesNo__button,
.YesNo__button:hover,
.YesNo__button:focus,
.YesNo__button.btn-raised.btn-primary {
    box-shadow: none;
    -webkit-font-smoothing: subpixel-antialiased;
    border: 1px solid rgba(230, 230, 230, .8);
}

.YesNo div.btn-raised.btn-primary:first-child,
.YesNo div.btn-raised.btn-default:first-child:hover {
    background: #4FB19D;
    color: white;
}

.YesNo div.btn-raised.btn-primary:last-child,
.YesNo div.btn-raised.btn-default:last-child:hover {
    background: #DC785A;
    color: white;
}

A couple notes:

  • The first-child references the "yes" option.
  • The last-child references the "no" option.

Modified color, border, spacing, and hover behavior of yes/no question

Miscellaneous

Allow background to completely cover form

When setting a custom background, there is some small space at the top of the form that the background is not applied to. However, you can remove that padding to provide a continuous background across the entirety of the form.

.Paperform__Container {
    padding-top: 0 !important;
}

Use a custom font

If you have your font that you'd like to use, custom CSS allows you to load it into the form using @font-face. The font must be uploaded somewhere publicly-accessible by URL alone. It must be a direct link to the font file. For example, some services that allow uploads link to a page that contains the file rather than the direct file itself.

💡 TIP
In a pinch, you can upload the font using one of your own forms that has a file upload question. The URL for the upload in your submission data can be used as a direct link to that file.

@font-face { 
    font-family: "FONT_NAME"; 
    src: url("FONT_URL") format("FONT_FORMAT"); 
    font-weight: 400; 
    font-style: normal;
}

h1.__header-one > * { 
    font-family: "FONT_NAME"; 
    direction: ltr; 
    font-weight: 400; 
    font-style: normal; 
    text-decoration: none;
} 

Make sure you replace a few items above:

  • FONT_NAME: Name of your font (e.g. Source Code Pro)
  • FONT_URL: URL to your font file
  • FONT_FORMAT: Specify the font's format (e.g. woff)

Then, you can apply it similarly to how it was applied in to the H1 above. You may use it as the value for font-family just like any built-in font.

Font size inside dropdown

.LiveField__answer .Select-option {
    font-size: {value} !important;
}

Replace {value} with desired value (e.g. 10px).

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