Custom CSS Cheat Sheet

This will hide the submit button on both standard (classic form) and guided (one-at-a-time) modes. Since no submit button is displayed, the form cannot be submitted. Depending on your use case, this may be desirable behavior.

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

In guided (one-at-a-time) mode, the progress bar is affixed to the top edge of the page. In standard (classic form) mode, it is shown as a 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%;
}

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 & Appearance → UI Elements → Pagination Buttons.

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

Make sure to replace:

• QUESTION_ID: The ID of the question you're after.
• MESSAGE: The text content you'd like for the pagination.

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="QUESTION_ID"]) .GuidedModeInstructions__button:not(.GuidedModeInstructions__button--back) {
    display: none;
}

Replace QUESTION_ID with the ID of the question you're after.

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;
}

You may wish to modify the containers, label, and price of products in gallery view as you have additional space in that view to experiment.

.ProductGallery .Choices__choice {
    min-height: 90px !important;
}

.ProductGallery .Product__label {
    font-size: 14px !important;
}

.ProductGallery .Product__price {
    font-size: 11px !important;
}

.ProductGallery .Product__withquantity {
    width: calc(25% - 18px) !important;
}

.Product__price {
    margin-left: 10px;
    position: fixed;
    bottom: 1px;
    right: 1px;
}

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;
}

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;
}

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;	
	}
    }
}

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.

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.

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.

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;
}

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.

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

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