Creating 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
234
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
243
244
245
246
247
248
249
250
251
252
253
254
/*
 * Theme Name: Quform Modern * Description: Your design. * Version: 1.0.0
 * Author: ThemeCatcher.net
 * Author URI: http://www.themecatcher.net/
 */
 
/*****************************************************
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 .quform-required {
    color: #cc0101;
}
/*Element description*/
.quform-theme-modern .quform-description {
    color: #000;
}
 
.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-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 element*//*Active element*//*Focused element*/
.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-select:hover,
.quform-theme-modern .quform-field-multiselect:hover {
    background: #fff;
    color: #111;
    border: solid 1px #ccc;
}
.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-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-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 {
    background: red;
}
/*****************************************************
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 name*/
.quform-theme-modern .quform-upload-file-name {}
/*Remove the file icon or text*/
.quform-theme-modern .quform-upload-file-remove {}
/*Once the file has been uploaded - success tick*/
.quform-theme-modern .quform-upload-tick {
}
/* 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 todo
******************************************************/
/*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
******************************************************/
/*Note: Submit button is designed so you can use rounded cornered image backgrounds that can be fluid size*/
 
/*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-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: #fff;
    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 the submit*/
.quform-theme-modern .quform-loading {}
/*Loading image*/
.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;
}
/*
 * Theme Name: Quform Modern
 * Description: Your design.
 * Version: 1.0.0
 * Author: ThemeCatcher.net
 * Author URI: http://www.themecatcher.net/
 */

/*****************************************************
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 .quform-required {
    color: #cc0101;
}
/*Element description*/
.quform-theme-modern .quform-description {
	color: #000;
}

.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-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 element*//*Active element*//*Focused element*/
.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-select:hover,
.quform-theme-modern .quform-field-multiselect:hover {
	background: #fff;
	color: #111;
	border: solid 1px #ccc;
}
.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-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-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 {
    background: red;
}
/*****************************************************
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 name*/
.quform-theme-modern .quform-upload-file-name {}
/*Remove the file icon or text*/
.quform-theme-modern .quform-upload-file-remove {}
/*Once the file has been uploaded - success tick*/
.quform-theme-modern .quform-upload-tick {
}
/* 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 todo
******************************************************/
/*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
******************************************************/
/*Note: Submit button is designed so you can use rounded cornered image backgrounds that can be fluid size*/

/*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-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: #fff;
	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 the submit*/
.quform-theme-modern .quform-loading {}
/*Loading image*/
.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;
}

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.

Still having trouble? Head over to the forums.

Forums