Make your form look like example demos

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

The example forms inherit our WordPress theme styles so the form may look slightly different when you install them on your site. You can make the form look more like the examples by changing a few simple options. Choose which styles you want from the section below, adjust any values to suit.

Grey box surrounding the form

In the Form Builder – Settings – Style – Global styling add a new style for Form outer wrapper and enter this CSS:

background-color: #e7e7e7;
border-radius: 5px;
padding: 20px;

Small uppercase form labels

In the Form Builder – Settings – Style – Global styling add a new style for Element label and enter this CSS:

text-transform: uppercase;
font-size: 11px;

Making the fields larger

Most of the demos have the iPhorm Light theme by default, set this by going to Form Builder – Settings – Style – Theme, this will make the fields slightly larger along with some other style tweaks.

To further change the size of the fields, see How do I make the fields larger?.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy