Adjust the design

In the Design workspace you give your form the look of your brand: colours, font, corners, background and more. A live preview shows every change at once. The article is for everyone who wants to match the form to their website.

Requirements

• You need the right to edit forms.
• Themes, colours, fonts (including uploaded ones and Google Fonts), background and transitions are available in Funnelforms Free and Funnelforms Pro.
• Your styles, Take from a website and Custom CSS are Pro only.
• Custom CSS can only be published if your WordPress user has the right to use unfiltered HTML.

Where to find it

Funnelforms → Forms → open a form → Design (in the top bar). The settings are on the left, the Live preview on the right.

Features at a glance

• Twelve themes as a starting point: Funnelforms, Like the website, Corporate, Dark, Lavender, Green, Orange, Elegant, Pink, Tech, Red and Pastel
• Your styles (Pro only): save your own designs and apply them to other forms
• Take from a website (Pro only): take colours and font from a website
• Colours for accent, text, background and borders, plus More colours
• Fonts: bundled ones, your own files and Google Fonts
• Sizes, spacing, borders, shadow, background (gradient or image) and transitions
• Custom CSS (Pro only)
• A Hard to read notice when the contrast is too low

Step by step

Choose a theme and colours

1. Open the Design workspace.
2. Under Theme, click a theme. It replaces the colours, font and corners of the form, and the preview on the right updates. The theme Like the website takes the font and text colour of your website and has no background of its own.
3. If needed, change Accent colour, Text, Background and Borders. Below, the note "Based on … with your changes." appears.
4. Open More colours to colour questions, hints, buttons, answers, icons and the progress bar individually. Empty fields follow the colours above.

Take colours and font from your website (Pro only)

1. Click Take from a website.
2. Enter the Address of the website. If "https://" is missing, the editor adds it.
3. Tick "This is my website, or I may use its colours and fonts."
4. Click Load colours and font.
5. For Accent colour, Text and Background, choose a colour that was found or Keep. For Font, choose a font that was found or Keep the current font.
6. Check the small preview and click Apply.

Change the font

1. Under Font, choose a font from the list, for example Font of the website, Montserrat, Poppins or System font.
2. For a font of your own, click Upload font and choose a file (ttf, otf, woff or woff2).
3. For a Google font, click Google Fonts, search for the name or filter by Style, and click the font. It is downloaded to your website once and then appears in the list.
4. Under Fonts and sizes you choose separate fonts for Font of questions and headings and Font of answers and inputs, the font sizes (also for phones) and the line height.

Save and reuse a style (Pro only)

1. Click Save as style.
2. Enter a Name of the style and click Save style.
3. In other forms you find it under Your styles. A click applies it, the cross deletes it (Delete style …).

Set the background

1. Open the section Background.
2. Turn on Background as gradient, choose one of the gradients, or set Second background colour and Direction.
3. With Choose image pick a Background image from the media library. You can then set Colour over the image, Image size (Fill the form, Show whole image, Original size) and Image position.

How it works

How do visitors see the form?

• The form sits on a card. The bottom bar holds Back, the progress with "Step … of …" and Next; when one of the buttons is hidden, the progress takes its place. When the buttons sit together, for example with Full width, the progress moves above them.
• If the form has a solid background, the bottom bar stays at the bottom of the screen on phones.
• A step change slides in the direction visitors move.
• On dark forms the browser draws its own controls, such as the date picker and check boxes, dark as well.
• Outlines of inputs and answer tiles reach a contrast of at least 3:1 against the background. For this Funnelforms derives the outline colour from your Borders colour and mixes it towards the text colour only as far as needed.
• Required fields carry a red star, in the contact step too. On the first step with a required field, "Fields marked with * are required." appears once.

What do the other sections change?

• Corners rounds the card and, derived from it, the input fields. Corners of buttons rounds buttons separately.
• Spacing and sizes: space between answers, inner spacing, height of buttons, size of icons and images in answers.
• Borders and shadow: border width, Border style (Solid, Dashed, Dotted, None), a border around the whole form and the Shadow (Soft, Medium, Strong or Custom).
• Alignment, progress and transition: alignment of questions, arrangement of the buttons (for example Back left, next right or Full width), the progress bar with percentage and the Transition between steps (for example Fade in or Rise up). Visitors who turned off animations on their device see no transition.

Why does "Hard to read" appear?

The editor checks the ratio of text and background colour, for example for buttons, questions and hints. If it is below 4.5:1, it names the place concerned. Aim for at least 4.5:1 so everyone can read the form.

Where do fonts come from, and what do visitors see?

Fonts are hosted on your website. Visitors load nothing from other servers. The server of your website downloads a Google font from Google once when you choose it; visitors then load it from your website and nothing from Google. Check that the license of an uploaded font allows use on websites. Uploaded font files may be at most 2 MB.

What happens when I take colours from a website?

Your website loads the given page and its stylesheets once and reads colours and fonts from them. Nothing is stored, and nothing about you or your visitors is sent. At most 30 imports per user and hour are possible. A Google font that was found is downloaded to your website when you apply it; another font that your website does not host is seen by visitors only on pages that load it. In that case, upload the font file.

What is custom CSS? (Pro only)

Under Custom CSS you enter CSS for the form. It applies to the whole page; start selectors with the attribute named in the hint so that only this form is affected. To publish it, your user needs the right to use unfiltered HTML. When you save a style, the CSS stays with the form.

What is different in Funnelforms Free?

In Free the Design workspace has no Your styles area with Save as style, no Take from a website button and no Custom CSS section. If a form already has custom CSS, for example from an import or from Pro, the section appears so you can remove the CSS. While it stays, the form cannot be published in Free. If such a form is already published, Free shows it without the custom CSS, only in the design of its theme. Everything else in this article, including Upload font and Google Fonts, is available in Free.

Best practices

• Start with the theme closest to your colours and adjust the accent colour.
• Choose Font of the website if the form should look like the rest of the page.
• In Pro, save a successful design as a style so your forms stay consistent.
• Check the result in the live preview on Desktop, Tablet and Mobile.
• Put a Colour over the image on a background image if text would otherwise be hard to read.

Troubleshooting

Tips

• If a background image is set, check readability on phones.
• Image size → Fill the form crops the image if needed, Show whole image does not.
• You can also turn the progress bar on and off here under Alignment, progress and transition.

FAQ

Does the design apply to all my forms? No, each form has its own design. With Save as style (Pro only) you carry a design over to other forms. In Free, duplicate a finished form in the forms list instead.

Is data of my visitors sent to Google when a Google font is loaded? No. The font is downloaded once by the server of your website. Visitors load it from your website.

Can I change the font per question? No, fonts apply to the whole form: one for questions and headings, one for answers and inputs.

Can I test the design before I publish it? Yes. The live preview in the Design workspace and the Preview at the top right show the saved draft. Visitors see it only after you publish.

Related articles

• Build steps
• Answers, icons and images
• Embed a form