---
title: Custom CSS Cheat Sheet | Paperform Help Center | Paperform
description: We cover some examples of custom CSS to illustrate the expressiveness of styling your form with this powerful feature available on select plans.
url: "https://paperform.co/help/articles/custom-css-cheat-sheet"
type: static
generatedAt: "2026-04-04T00:42:03.149Z"
---

Custom CSS Cheat Sheet
## 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](https://paperform.co/help/articles/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 Question ID is and how to find it](https://paperform.co/help/articles/pre-filling-guide/#how-it-works).
 - At times, usage of `!important` may be necessary to override styling. Typically, however, using greater [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS).

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.

## Pagination and Submission

### Hide the submit button

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.

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

### Change progress bar position

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.

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

![Pagination buttons at top of form](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/screenshot-2024-02-26-at-7.53.26-pm.png)

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

```css
.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.

### Modify pagination button text for a specific question in guided mode

```css
.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.

![Modify pagination text for specific question](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/screenshot-2024-02-26-at-7.54.44-pm.png)

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

```css
.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.

## 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!

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

![Multiple choice options without box shadow](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/screenshot-2024-02-26-at-7.56.00-pm.png)

### Adjust products in gallery view

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.

```css
.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;
}
```

![Products in gallery with modified styling](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/screenshot-2024-02-26-at-7.55.45-pm.png)

### 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!

```css
.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

```css
[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](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/screenshot-2024-02-26-at-7.55.18-pm.png)

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

```css
@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](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/screenshot-2024-02-26-at-7.55.01-pm.png)

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

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

```css
/* 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](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/screenshot-2024-02-26-at-7.55.32-pm.png)

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

```css
.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](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/yesno_customcss.gif)

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

```css
.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](https://developer.mozilla.org/en-US/docs/Web/CSS/@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.

```css
@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

```css
.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](mailto:support@paperform.co).

### Related Articles
  [Do you have any examples of Custom CSS I can use on my forms?  Here are some examples of Custom CSS for common use cases.](/help/articles/do-you-have-any-examples-of-custom-css-i-can-use-on-my-forms/)
[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!](/help/articles/custom-css/)
[Can I customize how products are displayed?  You can display products in one of three layouts: List, Card, or Gallery.](/help/articles/how-can-i-display-the-list-of-products/)
[How can I customize the way my form looks?  You can customize the way your form looks in your Theme Settings.](/help/articles/how-can-i-customize-the-way-my-form-looks/)
[Does Paperform support HTML and CSS?  We support adding custom HTML and CSS on selected plans.](/help/articles/what-is-html-and-css/)