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 & Appearance Editor
Your form must contain at least one question to reveal the Theme & Appearance button.
You can access the form's Theme & Appearance Editor by selecting the "Theme & Appearance" button above the left question panel.
The Theme & Appearance Editor consists of the settings panel on the left, containing all the available controls, and the Preview window, from which you can view your changes in real-time.
The settings panel is broken down into the following sections:
Global Settings
Typography
UI Elements
Custom CSS
Translations
Each of these are covered below.
Theme & Appearance Settings
Global Settings
When you open the Theme & Appearance Editor, these settings are always visible and give you quick access to commonly used defaults. It is here that you can set the "Form Experience", configure default fonts and colors, and more.
Form Experience
The "Form Experience" buttons allow you to choose between a classic form experience or a one-question-at-a-time "guided" experience. Learn more about the "Guided Mode" experience.
Colors
Use the color pickers to select default colors for different parts of your form. Learn more about what each color targets.
Fonts
Primary and Secondary Fonts can be set for your entire form. For finer control, use the Typography settings.
Question Settings
Decide whether or not to show the white background behind each question, or whether to show an asterisk for required questions.
Import Theme
On specific pricing plans, you can import a theme from your other forms.
Typography
Fonts, sizing, color, and more.
Typography gives you control over the font, size, line heights, and coloring of the text on your form. It is here that you can configure the style for each text element.
Custom Style
On specific pricing plans, you can add a custom font style and apply it to the text on your form.
To create a new style and apply it to the form:
Click "Add Custom Style +" to create a new style group.
Click on the right-most icon to configure the style.
Go back to the form editor and highlight your desired text. On the formatting bar, click the right-most down arrow and select your 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 specific pricing plans).
UI Elements
Background
In this section, you can customize your form's background. You can choose a background color, upload a background image, or embed a background video. Learn more about what video sources are supported.
Using the Overlay settings, you can also add a blur or a translucent overlay color over the background image or video.
Questions
This section controls how your question fields appear on your form. These options are also displayed in the Global Settings section for quick access.
"Has background and shadow" controls the white background around question fields.
"Required questions are indicated with an asterisk (*)" controls whether an asterisk is included at the end of any required question.
Submit Button
You can change the wording and styling of the submit button in this section.
The Submit Button section contains the ability to;
Change the text of the Submit Button.
Change the color of the Submit Button.
Toggle the “X questions to go” messaging.
Toggle the total price from being displayed in the submit button.
On specific pricing plans, you can also customize its typography settings and button shape.
Pagination Buttons
The styling options for pagination buttons differ based on the chosen "Form Experience".
Classic form
Buttons Only — This option displays a simple arrow button to move between pages.
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.
You can enable this button style by toggling on "Shows total price in the next page button."
Numbers — This option displays a row of numbers between standard arrow pagination buttons to navigate between pages.
Progress Bar — This option will display a progress bar between the two standard pagination buttons on your form.
One-at-a-time
When "One-at-a-time" is selected, the pagination buttons work slightly differently. This is what it looks like when all settings below are toggled on:
The following toggles can be set:
Include a back button — This will allow a respondent to return to previous pages.
Include progress bar — This will include a progress bar across the top of the screen.
Include page numbers — This will display the total number of pages and current page number at the top right of the form window.
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 technical knowledge of CSS; if you're new to CSS then a short course like this might help to get started. If you get stuck, just ask us in chat or at support@papeform.co. As the feature is highly custom, we are able to assist with some, but not all, inquiries.
Translations
In this section of the Theme & Appearance Editor, you can create, edit, and manage the language of your form. Just about all of the form's default messaging can be customized using Translations.
You can also create, edit, and manage all of your translations in your Account Settings. Once saved, a translation can be used across multiple forms!
To apply a translation on the form:
Navigate to Theme & Appearance → Translations and click "Edit Translations."
Select "Add Translation +" and fill in the required fields:
Translation Title — Give it a name so you can identify it later.
Translation Language — Select the language you'll be using.
Translation Language is RTL — If you select "Yes" then all messaging, questions, and answers for forms will be set to RTL.
(Optional) Depending on your chosen language, you may choose the appropriate character subsets from the font subsets dropdown.
Under "General Translations", you can replace any of the default text with your own wording.
Select "Create Translation" to save your translation. It should appear in your list of Translations.
Click "Use" to enable the translation on your form.
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 & Appearance 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 live chat or email us at support@paperform.co.
