Creating a custom form theme

Quform WordPress v2 DocumentationGuidesStylingCreating a custom form theme

Step 1

Choose a unique name for the new theme using only letters, numbers, dashes and underscores. In this example the unique theme name is modern, so replace all instances of that with the unique theme name.

On your computer create new folder named quform-theme, and inside the folder create two new empty files – one named quform-theme.php and one named modern.css (replace modern with the unique name of the theme).

Step 2

Open the quform-theme.php in a text editor and paste in the following code.

1
2
3
4
5
6
7
8
9
10
11
12
131415
16171819
20
21

<?php
 
/*
 * Plugin Name: Quform Theme
 * Description: Custom theme for Quform forms.
 * Version: 1.0.0
 */
 
add_action('init', function () {
    if (class_exists('Quform')) {
        $themes = Quform::getService('themes');
 
        $themes->register('modern', array(            'name' => 'Modern',            'version' => '1.0.0',
            'cssPath' => plugin_dir_path(__FILE__) . 'modern.css',            'cssUrl' => plugin_dir_url(__FILE__) . 'modern.css',            'previewColor' => '#FFFFFF'        ));
    }
});
<?php

/*
 * Plugin Name: Quform Theme
 * Description: Custom theme for Quform forms.
 * Version: 1.0.0
 */

add_action('init', function () {
    if (class_exists('Quform')) {
        $themes = Quform::getService('themes');

        $themes->register('modern', array(
            'name' => 'Modern',
            'version' => '1.0.0',
            'cssPath' => plugin_dir_path(__FILE__) . 'modern.css',
            'cssUrl' => plugin_dir_url(__FILE__) . 'modern.css',
            'previewColor' => '#FFFFFF'
        ));
    }
});
  • On line 13, replace modern with the unique name of the theme
  • On line 14, replace Modern with a human readable name of the theme (you can use any characters here – it will show in the theme select menu when editing the form)
  • On lines 16 and 17 replace modern.css with the name of the .css file you created in Step 1
  • On line 18, replace #FFFFFF with the color you want the preview background to be when editing the form
1
2
3
4
5
6
7
8
9
10
11
12
13
141516
17181920
21
22
23

<?php
 
/*
 * Plugin Name: Quform Theme
 * Description: Custom theme for Quform forms.
 * Version: 1.0.0
 */
 
function my_register_quform_theme()
{
    if (class_exists('Quform')) {
        $themes = Quform::getService('themes');
 
        $themes->register('modern', array(            'name' => 'Modern',            'version' => '1.0.0',
            'cssPath' => plugin_dir_path(__FILE__) . 'modern.css',            'cssUrl' => plugin_dir_url(__FILE__) . 'modern.css',            'previewColor' => '#FFFFFF'        ));
    }
}
add_action('init', 'my_register_quform_theme');
<?php

/*
 * Plugin Name: Quform Theme
 * Description: Custom theme for Quform forms.
 * Version: 1.0.0
 */

function my_register_quform_theme()
{
    if (class_exists('Quform')) {
        $themes = Quform::getService('themes');

        $themes->register('modern', array(
            'name' => 'Modern',
            'version' => '1.0.0',
            'cssPath' => plugin_dir_path(__FILE__) . 'modern.css',
            'cssUrl' => plugin_dir_url(__FILE__) . 'modern.css',
            'previewColor' => '#FFFFFF'
        ));
    }
}
add_action('init', 'my_register_quform_theme');
  • On line 14, replace modern with the unique name of the theme
  • On line 15, replace Modern with a human readable name of the theme (you can use any characters here – it will show in the theme select menu when editing the form)
  • On lines 17 and 18 replace modern.css with the name of the .css file you created in Step 1
  • On line 19, replace #FFFFFF with the color you want the preview background to be when editing the form

Step 3

Copy the code below and paste it into the .css file you created in Step 1. Inside the file do a find and replace for the word modern and replace it with the unique name of the theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242

/*****************************************************
1: Form heading and description
******************************************************/
/*Set global fonts*/
.quform-theme-modern {
    color: #000;
}
/* Form title */
.quform-theme-modern .quform-form-title {
    color: #000;
}
/* Form description */
.quform-theme-modern .quform-form-description {
    color: #666;
}
/* Page progress */
.quform-theme-modern .quform-page-progress-bar {
    background-color: #ddd;
    color: #111;
}
/*****************************************************
2: Elements and labels
******************************************************/
/*Required - this is the text that is used to indicate a required field*/
.quform-theme-modern .quform-label > label > .quform-required {
    color: #cc0101;
}
/*Element description*/
.quform-theme-modern .quform-description {
    color: #000;
}
/* Field styles */
.quform-theme-modern .select2-container--quform .select2-selection,
.quform-theme-modern.quform-timepicker.k-list-container.k-popup,
.quform-theme-modern .quform-field-text,
.quform-theme-modern .quform-field-captcha,
.quform-theme-modern .quform-field-password,
.quform-theme-modern .quform-field-textarea,
.quform-theme-modern .quform-field-email,
.quform-theme-modern .quform-field-date,
.quform-theme-modern .quform-field-time,
.quform-theme-modern .quform-field-select,
.quform-theme-modern .quform-field-multiselect {
    background: #fff;
    color: #222;
    border: solid 1px #ddd;
}
/* Element has error */
.quform-theme-modern .quform-has-error .select2-container--quform .select2-selection,
.quform-theme-modern .quform-has-error input,
.quform-theme-modern .quform-has-error textarea,
.quform-theme-modern .quform-has-error select {
    border-color: #c73412;
}
/*Hover field*/
.quform-theme-modern .select2-container--quform .select2-selection:hover,
.quform-theme-modern .quform-field-text:hover,
.quform-theme-modern .quform-field-captcha:hover,
.quform-theme-modern .quform-field-password:hover,
.quform-theme-modern .quform-field-textarea:hover,
.quform-theme-modern .quform-field-email:hover,
.quform-theme-modern .quform-field-date:hover,
.quform-theme-modern .quform-field-time:hover,
.quform-theme-modern .quform-field-select:hover,
.quform-theme-modern .quform-field-multiselect:hover {
    background: #fff;
    color: #111;
    border: solid 1px #ccc;
}
/*Active & focus field*/
.quform-theme-modern .select2-container--quform.select2-container--open .select2-selection,
.quform-theme-modern.quform-timepicker.k-list-container.k-popup,
.quform-theme-modern .quform-field-text:active,
.quform-theme-modern .quform-field-captcha:active,
.quform-theme-modern .quform-field-password:active,
.quform-theme-modern .quform-field-textarea:active,
.quform-theme-modern .quform-field-email:active,
.quform-theme-modern .quform-field-date:active,
.quform-theme-modern .quform-field-time:active,
.quform-theme-modern .quform-field-select:active,
.quform-theme-modern .quform-field-multiselect:active,
 
.quform-theme-modern .quform-field-text:focus,
.quform-theme-modern .quform-field-captcha:focus,
.quform-theme-modern .quform-field-password:focus,
.quform-theme-modern .quform-field-textarea:focus,
.quform-theme-modern .quform-field-email:focus,
.quform-theme-modern .quform-field-date:focus,
.quform-theme-modern .quform-field-time:focus,
.quform-theme-modern .quform-field-select:focus,
.quform-theme-modern .quform-field-multiselect:focus {
    background: #fdfdfd;
    color: #111;
    border: solid 1px #ccc;
}
.quform-theme-modern .quform-elements .quform-element textarea {
    min-height: 150px;
}
/* Default Label*/
.quform-theme-modern .quform-label > label {
 
}
/*Tooltip icon*/
.quform-theme-modern .quform-tooltip-icon {
 
}
/*****************************************************
3: File uploads
******************************************************/
/*File uploading wrap*/
.quform-theme-modern .quform-upload-progress-wrap {
 
}
/*Animated progress bar wrapper*/
.quform-theme-modern .quform-upload-progress-bar-wrap {
 
}
/*Animated progress bar*/
.quform-theme-modern .quform-upload-progress-bar {
    background: #e2ab00;
}
/*Info displayed under progress bar*/
.quform-theme-modern .quform-upload-info {}
.quform-theme-modern .quform-upload-info > div {
}
/*Box around a chosen file*/
.quform-theme-modern .quform-upload-file {
    background-color: #fff;
    border-color: #ddd;
    color: #222;
}
/* File Upload button */
.quform-theme-modern .quform-button-style-theme .quform-upload-button {
    background-color: #fff;
    border-color: #ddd;
    color: #111;
}
.quform-theme-modern .quform-button-style-theme .quform-upload-button:hover {
    background-color: #fff;
    border-color: #ccc;
    color: #222;
}
/*****************************************************
4: Captcha
******************************************************/
/*Refresh captcha icon background*/
.quform-theme-modern .quform-captcha-image {
 
}
/*****************************************************
5: Element groups
******************************************************/
/*PLAIN*/
/*Group title & description wrap plain*/
.quform-theme-modern .quform-group-style-plain > .quform-spacer > .quform-group-title-description {
 
}
/*Group title plain*/
.quform-theme-modern .quform-group-style-plain > .quform-spacer > .quform-group-title-description .quform-group-title {
    color: #333; /* Color 1 */
}
/*Group description plain*/
.quform-theme-modern .quform-group-style-plain > .quform-spacer > .quform-group-title-description p.quform-group-description {
    color: #666; /* Color 2 */
}
/*BORDERED*/
/*Group title & description wrap bordered*/
.quform-theme-modern .quform-group-style-bordered  > .quform-spacer > .quform-group-title-description {
 
}
/*Group title bordered*/
.quform-theme-modern .quform-group-style-bordered  > .quform-spacer > .quform-group-title-description .quform-group-title {
    color: #333; /* Color 1 */
}
/*Group description bordered*/
.quform-theme-modern .quform-group-style-bordered  > .quform-spacer > .quform-group-title-description p.quform-group-description {
    color: #666; /* Color 2 */
}
/*Bordered style group*/
.quform-theme-modern .quform-group-style-bordered > .quform-spacer > .quform-child-elements,
.quform-theme-modern .quform-group-style-bordered > .quform-child-elements {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
}
/*****************************************************
6: Submit button and related
******************************************************/
/*Submit button default state*/
.quform-theme-modern .quform-options-style-button .quform-option-label,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
    background: #fff;
    border: solid 1px #ddd;
    color: #222;
}
/*Hover*/
.quform-theme-modern .quform-options-style-button .quform-option-label:active,
.quform-theme-modern .quform-options-style-button .quform-option-label:focus,
.quform-theme-modern .quform-options-style-button .quform-field-checkbox:checked + label,
.quform-theme-modern .quform-options-style-button .quform-field-radio:checked + label,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
    background: #f3f3f3;
    border: solid 1px #ccc;
    color: #111;
}
/*Active*/
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:active,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:active,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:active {
    background: #fdfdfd;
    border: solid 1px #ccc;
    color: #111;
}
/*Loading spinner*/
.quform-theme-modern .quform-loading {
 
}
.quform-theme-modern .quform-loading-inner {
 
}
 
/*****************************************************
7: Messages for user
******************************************************/
/*Errors*/
.quform-theme-modern .quform-error > .quform-error-inner {
 
}
/*Success message*/
.quform-theme-modern .quform-success-message {
 
}
/*Quform referral link*/
.quform-theme-modern .quform-referral-link a {
    color: #0F83CA;
}
.quform-theme-modern .quform-referral-link a:hover {
    color: #292929;
}
/*****************************************************
1: Form heading and description
******************************************************/
/*Set global fonts*/
.quform-theme-modern {
    color: #000;
}
/* Form title */
.quform-theme-modern .quform-form-title {
    color: #000;
}
/* Form description */
.quform-theme-modern .quform-form-description {
    color: #666;
}
/* Page progress */
.quform-theme-modern .quform-page-progress-bar {
    background-color: #ddd;
    color: #111;
}
/*****************************************************
2: Elements and labels
******************************************************/
/*Required - this is the text that is used to indicate a required field*/
.quform-theme-modern .quform-label > label > .quform-required {
    color: #cc0101;
}
/*Element description*/
.quform-theme-modern .quform-description {
    color: #000;
}
/* Field styles */
.quform-theme-modern .select2-container--quform .select2-selection,
.quform-theme-modern.quform-timepicker.k-list-container.k-popup,
.quform-theme-modern .quform-field-text,
.quform-theme-modern .quform-field-captcha,
.quform-theme-modern .quform-field-password,
.quform-theme-modern .quform-field-textarea,
.quform-theme-modern .quform-field-email,
.quform-theme-modern .quform-field-date,
.quform-theme-modern .quform-field-time,
.quform-theme-modern .quform-field-select,
.quform-theme-modern .quform-field-multiselect {
    background: #fff;
    color: #222;
    border: solid 1px #ddd;
}
/* Element has error */
.quform-theme-modern .quform-has-error .select2-container--quform .select2-selection,
.quform-theme-modern .quform-has-error input,
.quform-theme-modern .quform-has-error textarea,
.quform-theme-modern .quform-has-error select {
    border-color: #c73412;
}
/*Hover field*/
.quform-theme-modern .select2-container--quform .select2-selection:hover,
.quform-theme-modern .quform-field-text:hover,
.quform-theme-modern .quform-field-captcha:hover,
.quform-theme-modern .quform-field-password:hover,
.quform-theme-modern .quform-field-textarea:hover,
.quform-theme-modern .quform-field-email:hover,
.quform-theme-modern .quform-field-date:hover,
.quform-theme-modern .quform-field-time:hover,
.quform-theme-modern .quform-field-select:hover,
.quform-theme-modern .quform-field-multiselect:hover {
    background: #fff;
    color: #111;
    border: solid 1px #ccc;
}
/*Active & focus field*/
.quform-theme-modern .select2-container--quform.select2-container--open .select2-selection,
.quform-theme-modern.quform-timepicker.k-list-container.k-popup,
.quform-theme-modern .quform-field-text:active,
.quform-theme-modern .quform-field-captcha:active,
.quform-theme-modern .quform-field-password:active,
.quform-theme-modern .quform-field-textarea:active,
.quform-theme-modern .quform-field-email:active,
.quform-theme-modern .quform-field-date:active,
.quform-theme-modern .quform-field-time:active,
.quform-theme-modern .quform-field-select:active,
.quform-theme-modern .quform-field-multiselect:active,

.quform-theme-modern .quform-field-text:focus,
.quform-theme-modern .quform-field-captcha:focus,
.quform-theme-modern .quform-field-password:focus,
.quform-theme-modern .quform-field-textarea:focus,
.quform-theme-modern .quform-field-email:focus,
.quform-theme-modern .quform-field-date:focus,
.quform-theme-modern .quform-field-time:focus,
.quform-theme-modern .quform-field-select:focus,
.quform-theme-modern .quform-field-multiselect:focus {
    background: #fdfdfd;
    color: #111;
    border: solid 1px #ccc;
}
.quform-theme-modern .quform-elements .quform-element textarea {
    min-height: 150px;
}
/* Default Label*/
.quform-theme-modern .quform-label > label {

}
/*Tooltip icon*/
.quform-theme-modern .quform-tooltip-icon {

}
/*****************************************************
3: File uploads
******************************************************/
/*File uploading wrap*/
.quform-theme-modern .quform-upload-progress-wrap {

}
/*Animated progress bar wrapper*/
.quform-theme-modern .quform-upload-progress-bar-wrap {

}
/*Animated progress bar*/
.quform-theme-modern .quform-upload-progress-bar {
    background: #e2ab00;
}
/*Info displayed under progress bar*/
.quform-theme-modern .quform-upload-info {}
.quform-theme-modern .quform-upload-info > div {
}
/*Box around a chosen file*/
.quform-theme-modern .quform-upload-file {
    background-color: #fff;
    border-color: #ddd;
    color: #222;
}
/* File Upload button */
.quform-theme-modern .quform-button-style-theme .quform-upload-button {
    background-color: #fff;
    border-color: #ddd;
    color: #111;
}
.quform-theme-modern .quform-button-style-theme .quform-upload-button:hover {
    background-color: #fff;
    border-color: #ccc;
    color: #222;
}
/*****************************************************
4: Captcha
******************************************************/
/*Refresh captcha icon background*/
.quform-theme-modern .quform-captcha-image {

}
/*****************************************************
5: Element groups
******************************************************/
/*PLAIN*/
/*Group title & description wrap plain*/
.quform-theme-modern .quform-group-style-plain > .quform-spacer > .quform-group-title-description {

}
/*Group title plain*/
.quform-theme-modern .quform-group-style-plain > .quform-spacer > .quform-group-title-description .quform-group-title {
    color: #333; /* Color 1 */
}
/*Group description plain*/
.quform-theme-modern .quform-group-style-plain > .quform-spacer > .quform-group-title-description p.quform-group-description {
    color: #666; /* Color 2 */
}
/*BORDERED*/
/*Group title & description wrap bordered*/
.quform-theme-modern .quform-group-style-bordered  > .quform-spacer > .quform-group-title-description {

}
/*Group title bordered*/
.quform-theme-modern .quform-group-style-bordered  > .quform-spacer > .quform-group-title-description .quform-group-title {
    color: #333; /* Color 1 */
}
/*Group description bordered*/
.quform-theme-modern .quform-group-style-bordered  > .quform-spacer > .quform-group-title-description p.quform-group-description {
    color: #666; /* Color 2 */
}
/*Bordered style group*/
.quform-theme-modern .quform-group-style-bordered > .quform-spacer > .quform-child-elements,
.quform-theme-modern .quform-group-style-bordered > .quform-child-elements {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
}
/*****************************************************
6: Submit button and related
******************************************************/
/*Submit button default state*/
.quform-theme-modern .quform-options-style-button .quform-option-label,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
    background: #fff;
    border: solid 1px #ddd;
    color: #222;
}
/*Hover*/
.quform-theme-modern .quform-options-style-button .quform-option-label:active,
.quform-theme-modern .quform-options-style-button .quform-option-label:focus,
.quform-theme-modern .quform-options-style-button .quform-field-checkbox:checked + label,
.quform-theme-modern .quform-options-style-button .quform-field-radio:checked + label,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
    background: #f3f3f3;
    border: solid 1px #ccc;
    color: #111;
}
/*Active*/
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:active,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:active,
.quform-theme-modern .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:active {
    background: #fdfdfd;
    border: solid 1px #ccc;
    color: #111;
}
/*Loading spinner*/
.quform-theme-modern .quform-loading {

}
.quform-theme-modern .quform-loading-inner {

}

/*****************************************************
7: Messages for user
******************************************************/
/*Errors*/
.quform-theme-modern .quform-error > .quform-error-inner {

}
/*Success message*/
.quform-theme-modern .quform-success-message {

}
/*Quform referral link*/
.quform-theme-modern .quform-referral-link a {
    color: #0F83CA;
}
.quform-theme-modern .quform-referral-link a:hover {
    color: #292929;
}

Alternatively, you can start with one of the existing Quform form theme files using the links below. Make sure to replace the unique theme name in the CSS with the unique name of your theme from Step 1.

ThemeUnique theme name
Blend Gradientblend-gradient
Bootstrapbootstrap
Darkdark
Hollowhollow
Lightlight
Minimalminimal
Reactreact
Shine Gradientshine-gradient
Simplesimple
Stormstorm
Underlinedunderlined

Step 4

Upload the quform-theme folder to the web server using FTP to the wp-content/plugins/ folder (or you can zip up the quform-theme folder and install it as a normal WordPress plugin from Plugins → Add New).

Next go to Plugins → Installed Plugins and activate the plugin Quform Theme.

Finally, go to Edit Form → Settings → Style → Global and at the Theme option select the new theme from the list.

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