Bootstrap form styles

Quform WordPressGuidesThemingBootstrap form styles

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.

Bootstrap CSS (Beta)

Add the CSS below to make Quform look like Bootstrap forms elements.

  1. Add the CSS using the custom CSS method.
  2. Make sure your Quform theme is set to None. Settings → Style → Style → 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

/*Form elements styles*/
.iphorm-elements .iphorm-element-wrap-text input,
.iphorm-elements .iphorm-element-wrap-captcha input,
.iphorm-elements .iphorm-element-wrap-email input,
.iphorm-elements .iphorm-element-wrap-password input,
.iphorm-elements .iphorm-element-wrap select,
.iphorm-elements .iphorm-element-wrap textarea {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    -webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    -moz-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    -o-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
.iphorm-elements .iphorm-element-wrap-text input:focus,
.iphorm-elements .iphorm-element-wrap-captcha input:focus,
.iphorm-elements .iphorm-element-wrap-email input:focus,
.iphorm-elements .iphorm-element-wrap-password input:focus,
.iphorm-elements .iphorm-element-wrap select:focus,
.iphorm-elements .iphorm-element-wrap textarea:focus {
    border-color: #66afe9;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}
/*Cancel EM styles*/
.iphorm-submit-wrap button em {
    background: none transparent;
    color: inherit;
    padding: 0;
}
.iphorm-submit-wrap button:hover em {
    background: none transparent;
    color: inherit;
}
.iphorm-submit-wrap button:active em {
    background: none transparent ;
    color: inherit;
}
/*Button styles*/
.iphorm-swfupload-browse,
.iphorm-add-another-upload span.iphorm-add-another-upload-button,
.iphorm-submit-wrap button span {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.iphorm-swfupload-browse:active,
.iphorm-add-another-upload span.iphorm-add-another-upload-button:active,
.iphorm-submit-wrap button:active span {
    outline: thin dotted;
    outline-offset: -2px;
}
/*"default" Button styles*/
.iphorm-swfupload-browse,
.iphorm-add-another-upload span.iphorm-add-another-upload-button {
    color: #333;
    text-decoration: none;
}
.iphorm-swfupload-browse,
.iphorm-add-another-upload span.iphorm-add-another-upload-button {
    background-color: #fff;
    border-color: #ccc;
    color: #333;
}
.iphorm-swfupload-browse:hover,
.iphorm-add-another-upload span.iphorm-add-another-upload-button:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}
/*"success" Button styles*/
.iphorm-submit-wrap button span {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}
.iphorm-submit-wrap button:active span,
.iphorm-submit-wrap button:hover span {
    background-color: #449d44;
    border-color: #398439;
    color: #fff;
}
/*Label styles*/
.iphorm-element-wrap label {
    font-weight: 700;
}
/*Form elements styles*/
.iphorm-elements .iphorm-element-wrap-text input,
.iphorm-elements .iphorm-element-wrap-captcha input,
.iphorm-elements .iphorm-element-wrap-email input,
.iphorm-elements .iphorm-element-wrap-password input,
.iphorm-elements .iphorm-element-wrap select,
.iphorm-elements .iphorm-element-wrap textarea {
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	color: #555;
	display: block;
	font-size: 14px;
	height: 34px;
	line-height: 1.42857;
	padding: 6px 12px;
	-webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	-moz-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	-o-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	width: 100%;
}
.iphorm-elements .iphorm-element-wrap-text input:focus,
.iphorm-elements .iphorm-element-wrap-captcha input:focus,
.iphorm-elements .iphorm-element-wrap-email input:focus,
.iphorm-elements .iphorm-element-wrap-password input:focus,
.iphorm-elements .iphorm-element-wrap select:focus,
.iphorm-elements .iphorm-element-wrap textarea:focus {
	border-color: #66afe9;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
	outline: 0 none;
}
/*Cancel EM styles*/
.iphorm-submit-wrap button em {
	background: none transparent;
	color: inherit;
	padding: 0;
}
.iphorm-submit-wrap button:hover em {
	background: none transparent;
	color: inherit;
}
.iphorm-submit-wrap button:active em {
	background: none transparent ;
	color: inherit;
}
/*Button styles*/
.iphorm-swfupload-browse,
.iphorm-add-another-upload span.iphorm-add-another-upload-button,
.iphorm-submit-wrap button span {
	-moz-user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857;
	margin-bottom: 0;
	padding: 6px 12px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.iphorm-swfupload-browse:active,
.iphorm-add-another-upload span.iphorm-add-another-upload-button:active,
.iphorm-submit-wrap button:active span {
	outline: thin dotted;
	outline-offset: -2px;
}
/*"default" Button styles*/
.iphorm-swfupload-browse,
.iphorm-add-another-upload span.iphorm-add-another-upload-button {
	color: #333;
	text-decoration: none;
}
.iphorm-swfupload-browse,
.iphorm-add-another-upload span.iphorm-add-another-upload-button {
	background-color: #fff;
	border-color: #ccc;
	color: #333;
}
.iphorm-swfupload-browse:hover,
.iphorm-add-another-upload span.iphorm-add-another-upload-button:hover {
	background-color: #e6e6e6;
	border-color: #adadad;
	color: #333;
}
/*"success" Button styles*/
.iphorm-submit-wrap button span {
	background-color: #5cb85c;
	border-color: #4cae4c;
	color: #fff;
}
.iphorm-submit-wrap button:active span,
.iphorm-submit-wrap button:hover span {
	background-color: #449d44;
	border-color: #398439;
	color: #fff;
}
/*Label styles*/
.iphorm-element-wrap label {
	font-weight: 700;
}
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy