Introduction

With Paperform, you have the ability to customize the design, look, and feel of your forms through the “Theme Editor”.

In this guide, we will look at how you can change colors, fonts, form appearance and make other style changes in order to portray your brand, business, or personality.

How it works

Accessing the Theme Editor

A form's theme controls how the form will be presented.

You can access the form's ”Theme Editor” by selecting the water drop icon found in the top-right corner of the form editor.

Accessing the Theme Editor.

The “Theme Editor” is broken down into the following four sections:

  • Theme Settings
  • Typography
  • UI Elements
  • Translations

Theme Settings

Form Experience

The “Form Experience” feature allows you to choose between a standard form experience or a guided experience.

"Standard Mode" will present the form as it appears in the form editor, while "Guided Mode" will modify the behavior of the form’s pagination and allow submitters to progress through your form with a simpler approach - presenting one question at a time.

Form Experience.

Typography

“Typography” gives you control over the font, sizing, line heights, and coloring of the text on your form. It is here that you can configure the style for all your text elements.

Typography.

On Pro and Agency plans, you can add a custom font style and apply it to the text on your form.

Go to Theme → Typography → and select "Add Custom Style +".

To apply the custom font style to your text, highlight text on the form and click the arrow that shows up at the end of the options to select and apply the custom style.

Apply custom style.

We support all Google Fonts on all plans, and you can use other fonts on your forms with Custom CSS (a feature reserved for the Agency plan).

UI Elements

Background

In this section, you can change the background of your form.

Go to Theme → UI Elements → Background, and you will see options to change the background color, upload a background image, or embed a YouTube, Vimeo, Loom, or Wistia video as a background video.

You can also blur the background or add a semi-transparent overlay color when using a background image or video. This is done using the Overlay menu.

Overlay menu.

Questions

This section controls how your question fields appear on your form.

You can remove the question field’s shadows and make them transparent by toggling off “Has background and shadow”.

By default, an asterisk is included at the end of any required question. This can be disabled by toggling off "Required questions are indicated with an asterisk (*)".

Submit Button

If you would like to change the wording and the styling of the submit button, this section is where you can do so.

Submit button design.

The Submit Button section contains the ability to;

  • Change the text used for the submit button.
  • Turn on / off the “X questions to go” messaging.
  • Turn on / off the total price from being displayed in the submit button.
  • Change the button color

For Pro and Agency users:

  • The submit button typography, color, and style.

Pagination Buttons

The styling options available for your pagination buttons differ between Standard Mode and Guided Mode.

Standard Mode

We offer a variety of pagination button styles for Standard Mode - all of which can be found below:

  • Buttons Only - This option displays a simple arrow button to move between pages.

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/pagination-button-only.png

  • Buttons Only (with Total Price) - This option is similar to buttons only, except the total price of your form will be displayed alongside the arrow.

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/pagination-button-price.png

    You can enable this button style by toggling on "Shows total price in the next page button".

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/pagination-price-label.png

  • Numbers - This option displays a row of numbers between standard arrow pagination buttons to navigate between pages.

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/pagination-numbers.png

  • Progress Bar - This option will display a progress bar between the two standard pagination buttons on your form.

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/pagination-progress.png

Guided Mode

For Guided Mode, the pagination buttons work slightly differently. You'll see three options:

  • Include a back button - This will allow a respondent to move back to previous pages. By default, this option is disabled.

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/guided-pagination-back.png

  • Include progress bar - This will include a progress bar at the top of the screen. By default, this option is disabled.

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/guided-pagination-progress.png

  • Include page numbers - This will display the total number of pages and current page number to the top right of the form window. By default, this option is disabled.

    https://img.paperform.co/fetch/f_auto,w_1400/https://pf-help.netlify.app/img/guided-pagination-page-numbers.png

Custom CSS

If you have access to an Agency plan, you have the option to use Custom CSS on your forms. Custom CSS allows you to completely customize the look and feel of your forms.

CSS (Cascading Style Sheets) is used to control the appearance of just about everything on the internet. Custom CSS gives you a fine level of control over the stylization on the page, allowing you to control the coloring, spacing, sizing, and more.

Using custom CSS requires a little technical knowledge of CSS; if you're new to CSS then a short course like this might help you get started. If you get stuck, just ask us in chat or at support@papeform.co.

Translations

In this section, you can create, edit, and manage the language of your form.

Just about all of the languages that are used in the form can be customized using “Translations”. Translations can be shared among forms and can also be edited in your account settings.

You can create, edit, and manage all of your translations in your Account Settings. You can then apply these translations to forms via the “Theme Editor”.

  1. To add a translation, select "Add Translation." "Translation Title," "Translation Language," and "Translation Language is RTL" are required.

  2. (Optional) If you select "Yes" for "Translation Language is RTL", then all messaging, questions, and answers for forms will be set to RTL.

  3. (Optional) Please choose the appropriate character subsets from the font subsets dropdown if your language requires any.

  4. Edit the default language of your form in the “General Translations” section.

  5. When finished, select "Create Translation." The translation will appear in your list of Account Translations.

  6. When editing a form, you can choose a translation or edit it by going to Theme Editor → Translations and select “Use”.

    If you would like your whole form to be in a different language, you will need to type out all the content including questions and text in your form in the desired language.

Next Steps

Now that you understand the “Theme Editor” it is time for you to begin designing the look and feel of your forms.

As always, if you need any additional help, reach out to us via chat or email us at support@paperform.co.