Styling the Submit Button

Button overview

The actual Button HTML element in Quform has no styles applied to it. This is sometimes the cause for confusion. However, the reason for the chosen method is to ensure cross browser consistency in the button style.

The button is made up of three HTML elements; the Button, a Span and then and Em. The HTML looks like this:

<button><span><em>Send</em></span></button>

Therefore all styling should be applied to either the Span and/or the Em. Using these two parts (an inner and outer wrapper) makes it possible to add dual background images. This may be useful if you wish to add icons or create expendable buttons using a full background images for instance one to be styled with round corners in all browsers.

Styling the button in the form builder

There are pros and cons to this method. You will not be able to add hover or active states for the button, but it’s a quick and easy method and you do not need to use a stylesheet.

Adding a background image

Go to Settings – Style – Global Styling – Add a style. Add Submit button inside em and Submit button inside span.

Add a single CSS background button

In the CSS field for Submit button inside span add this CSS change the background and padding to suit. You may also want to remove the border here (border: none 0;) or set a width (width: 200px;):

1
2

background: url(http://www.domain.com/images/my-button-bg.png) no-repeat top left;
padding:  0 10px;

background: url(http://www.domain.com/images/my-button-bg.png) no-repeat top left;
padding:  0 10px;

If you are using a Quform theme and do not want the drop shadow add this CSS to remove it.

1
2
3

-webkit-box-shadow: none;     
-webkit-box-shadow: none;   
box-shadow: none;

-webkit-box-shadow: none;     
-webkit-box-shadow: none;   
box-shadow: none;

In the CSS field for Submit button inside em add this CSS to make sure it shows no background image and removes the padding:

1
2

background: transparent none;
padding: 0;

background: transparent none;
padding: 0;

If your background image has your text on it, you can hide the HTML text by adding this:

1

text-indent: -9999px;

text-indent: -9999px;

Adding a two background images

Go to Settings – Style – Global Styling – Add a style. Add Submit button inside em and Submit button inside span.
In the CSS field for Submit button inside em add a right background image:

1

background: url(http://www.domain.com/images/my-button-bg-right.png) no-repeat top right;

background: url(http://www.domain.com/images/my-button-bg-right.png) no-repeat top right;

In the CSS field for Submit button inside span add a left background image:

1

background: url(http://www.domain.com/images/my-button-bg-left.png) no-repeat top left;

background: url(http://www.domain.com/images/my-button-bg-left.png) no-repeat top left;

If you are using a Quform theme and do not want the drop shadow add this CSS to remove it.

1
2

-webkit-box-shadow:none;        
box-shadow: none;

-webkit-box-shadow:none;        
box-shadow: none;

Styling the button using custom.css

You can use the custom.css file to add your own styles to the button, here you can read (Method 2) how to set up a custom stylesheet. Below is all the related CSS you may need to style the button, with all the possible styles you may need to override theme style.

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

/*Submit button wrap*/
.iphorm-outer .iphorm-submit-input-wrap {
    float: left; /*You might want this right. Change loading icon wrap below too*/
}
/*Submit button default state*/
.iphorm-outer .iphorm-submit-wrap button span, .iphorm-outer .iphorm-submit-wrap button em {
    color: ; /*Font color*/
    text-shadow: none; /* Add/remove text shadow*/
}
/*Default state*/
.iphorm-outer .iphorm-submit-wrap button span {
    background: ; /*Left image or color*/
    border: none 0 ; /*Add/remove a border*/
    -webkit-box-shadow: none; /*Add/remove a shadow*/
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0; /*Add/remove a border radius*/
    -moz-border-radius: 0;
    border-radius: 0;
}
/*Hover*/
.iphorm-outer .iphorm-submit-wrap button:hover span {
    background: ; /*Left image*/
    border: ;
}
/*Active*/
.iphorm-outer .iphorm-submit-wrap button:active span {
    background: ; /*Left image*/
    border: ;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/*Default*/
.iphorm-outer .iphorm-submit-wrap button em {
    background: transparent; /*right image*/
}
/*Hover*/
.iphorm-outer .iphorm-submit-wrap button:hover em {
    background: transparent; /*right image*/
    color: ;
}
/*Active*/
.iphorm-outer .iphorm-submit-wrap button:active em {
    background: transparent; /*right image*/
    color: ;
}
/*Loading the submit*/
.iphorm-outer .iphorm-loading-wrap {
    float: left; /*You will want this right if the button is right*/
}
/* Add your own Loading gif image*/
.iphorm-outer .iphorm-loading-wrap .quform-loading {}

/*Submit button wrap*/
.iphorm-outer .iphorm-submit-input-wrap {
	float: left; /*You might want this right. Change loading icon wrap below too*/
}
/*Submit button default state*/
.iphorm-outer .iphorm-submit-wrap button span, .iphorm-outer .iphorm-submit-wrap button em {
	color: ; /*Font color*/
	text-shadow: none; /* Add/remove text shadow*/
}
/*Default state*/
.iphorm-outer .iphorm-submit-wrap button span {
	background: ; /*Left image or color*/
	border: none 0 ; /*Add/remove a border*/
	-webkit-box-shadow: none; /*Add/remove a shadow*/
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 0; /*Add/remove a border radius*/
    -moz-border-radius: 0;
    border-radius: 0;
}
/*Hover*/
.iphorm-outer .iphorm-submit-wrap button:hover span {
	background: ; /*Left image*/
	border: ;
}
/*Active*/
.iphorm-outer .iphorm-submit-wrap button:active span {
	background: ; /*Left image*/
	border: ;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
/*Default*/
.iphorm-outer .iphorm-submit-wrap button em {
	background: transparent; /*right image*/
}
/*Hover*/
.iphorm-outer .iphorm-submit-wrap button:hover em {
	background: transparent; /*right image*/
	color: ;
}
/*Active*/
.iphorm-outer .iphorm-submit-wrap button:active em {
	background: transparent; /*right image*/
	color: ;
}
/*Loading the submit*/
.iphorm-outer .iphorm-loading-wrap {
	float: left; /*You will want this right if the button is right*/
}
/* Add your own Loading gif image*/
.iphorm-outer .iphorm-loading-wrap .quform-loading {}

Apply custom CSS to only one form

In some cases you might only want one form styled in this way. What you need to do in this case is add the form ID number to the end of each .iphorm-outer selector in the above CSS. You can find the ID number on the top right of the Form builder or in the list of forms on the Forms page. Lets say your form is ID number is 5, you would change .iphorm-outer to .iphorm-outer-5.

Creating a Quform theme

If you have more than just a few styles you need to change for your form(s), you may wish to consider creating a Quform theme. Information on creating a theme can be found here. All sections of the theme CSS are commented to help locate the correct selectors for editing. The Button styles start from this CSS comment:

1
2
3

/*****************************************************
6: Submit button and related
******************************************************/

/*****************************************************
6: Submit button and related
******************************************************/