Changing the form theme

How to style

Quform comes with three themes:

• Light (Square and Rounded)
• Dark (Square and Rounded)
• Minimal (Light and Dark)

You can choose to style the form using a theme or you can start with the base styles and create your own styles in another stylesheet.

Probably the simplest method of making your form design is to copy an existing Quform theme, change the name and edit the styles and images within it. More details on this are given below.

Adding / changing a theme

Follow these steps to change the Quform theme to one of the four theme options available. I’m using Quform Light Rounded in this example:

Step 1

Add the stylesheet for the theme in the header. The theme CSS should be below the base.css link. Like this:

1
2

<link rel="stylesheet" type="text/css" href="quform/css/base.css" />
<link rel="stylesheet" type="text/css" href="quform/themes/light/rounded.css" />

<link rel="stylesheet" type="text/css" href="quform/css/base.css" />
<link rel="stylesheet" type="text/css" href="quform/themes/light/rounded.css" />

On line 2, replace light/rounded.css with the path to the theme stylsheet. Here are the stylesheet links for the other available themes:

• Light – quform/themes/light/light.css
• Light Rounded – quform/themes/light/rounded.css
• Dark – quform/themes/dark/dark.css
• Dark Rounded – quform/themes/dark/rounded.css
• Minimal Light – quform/themes/minimal/light.css
• Minimal Dark – quform/themes/minimal/dark.css

Step 2

Add a class to quform-outer wrapper specifying the Theme class name.

Locate the div with class name quform-outer – this is at the very start of the form HTML. Change the existing quform-theme class to the class of the new theme e.g. quform-theme-light-rounded to use the Light Rounded theme. Like this:

1

<div class="quform-outer quform-theme-light-rounded">

<div class="quform-outer quform-theme-light-rounded">

Here are the class names for the other available themes:

• Light – quform-theme-light-light
• Light Rounded – quform-theme-light-rounded
• Dark – quform-theme-dark-dark
• Dark Rounded – quform-theme-dark-rounded
• Minimal Light – quform-theme-minimal-light
• Minimal Dark – quform-theme-minimal-dark

Creating a new theme

You can either create a new theme by copying one of the existing theme folders and editing the CSS or use the Blank theme in resources/themes/blank

In both cases you will need to do the following:

• 1: Change the name of the directory / folder name and add it to quform/themes/ folder.
• 2: Change the name of the CSS file(s) within the theme.
• 3: Change the details in the comment at the top of the document with your new themes details.
• 4: Change the main selector for all of the classes in the form. You can use find and replace (usually Ctrl+F) to do this. If you copied the light theme for example find .quform-theme-light-light and replace all with your new name. If you are starting with the Base theme find and replace all .quform-theme-blank-new.

You could replace this class with any name you like. However, we would recommend using the structure below especially if you would like to sell or share your new theme. Whatever this new class name is must be added to the quform-outer div as shown above in the Adding / changing a theme section.

.quform-theme-[Theme folder name]-[Theme CSS file name]

Non-JavaScript layout

We have minimally styled a page that non JavaScript users will see errors and the success message on using neutral colors. If you want to change the style of this page edit the file quform/nojs.php. To see what the page looks like, disable JavaScript in your browser and submit the form.