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.
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.
The “Theme Editor” is broken down into the following four sections:
Theme Settings provides quick access to commonly used theme defaults. It is here that you can set default fonts and colors, as well as configure the “Form Experience”.
“Theme Settings” also provides a visual representation of how your form will appear with the current stylization settings.
On Pro and Agency plans, you can import a theme from your other forms or randomize the current theme.
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.
“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.
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.
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).
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.
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 (*)".
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 email@example.com.
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”.
To add a translation, select "Add Translation." "Translation Title," "Translation Language," and "Translation Language is RTL" are required.
(Optional) If you select "Yes" for "Translation Language is RTL", then all messaging, questions, and answers for forms will be set to RTL.
(Optional) Please choose the appropriate character subsets from the font subsets dropdown if your language requires any.
Edit the default language of your form in the “General Translations” section.
When finished, select "Create Translation." The translation will appear in your list of Account Translations.
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.
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 firstname.lastname@example.org.