Change the look and feel of your website contact form

Only available when chosing the option "Hosted by ShootZilla" or "Integrated in your website" for your website contact form.

You can now change the look and feel of your contact form by adding your own Custom CSS code in the box. We have given you some code examples below to get you started! 

The code: !important is necessary on some style snippets to override default ShootZilla styles.

Use CMD + C and CMD + V (mac) to copy and paste below code snippets in your own Custom CSS box.

You can either put all code in one line or every aspect of an element on a new line. Both will generate the same results. Example:

.btn { background-color: red !important; border-color: red !important; }

or

.btn {
background-color: red !important;
border-color: red !important;
}

will give the same results.

Let's get started

First click on the 'Design your form' button.

Click on the Custom CSS box to change the looks of your form.

Change the background color of your contact form to match your website background color

Code in the CSS field:

body { background: #5bbeff !important; }

Will give this result:

Replace #5bbeff with your own color code.

Use an image in the background of your contact form

Code in the CSS field:

body { background: url(enter your url to a jpg image); }    

Will give this result:

Change the font-size of your labels or make them uppercase

Code in the CSS field:

label { font-size: 18px; text-transform: uppercase; }    

Will give this result:

Change the color of your labels

Code in the CSS field:

label { color: green !important; }    

Will give this result:

Adding shadow to, changing font-size and color of help text of your input fields

Code in the css field:

.help-block { color: #fff; font-size: 14px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); }    

Will give this result:

Button - all possible commands

Code in the css field:

.btn { height: 32px !important; width: 130px !important; padding: 5px !important; text-align: center; color: #fff; font-size: 17px !important; background: #FBB450 !important; background: -moz-linear-gradient(top, #FBB450 0%, #F89306 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBB450), color-stop(100%,#F89306)) !important; background: -webkit-linear-gradient(top, #FBB450 0%,#F89306 100%) !important; background: -o-linear-gradient(top, #FBB450 0%,#F89306 100%) !important; background: -ms-linear-gradient(top, #FBB450 0%,#F89306 100%) !important; background: linear-gradient(to bottom, #FBB450 0%,#F89306 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBB450', endColorstr='#F89306', GradientType=0 ); border-width: 1px; border-style: solid; border-color: #C97E1C; border-radius: 0; box-shadow: 0px 1px 0px 0px #FFE0B5; text-shadow: 1px 1px 1px #555; line-height: 1; margin: 0 auto; display: block; }

Will give this result:

Wide rounded button - flat design (meaning no shadows or depth)

Code in the css field:

.btn { height: 32px !important; width: 455px !important; padding: 5px !important; color: #fff; border-width: 0px; font-size: 17px !important; background: #FBB450 !important; border-radius: 20; line-height: 1; margin: 0 auto; display: block; }
    

Will give this result:

Another button example

Code in the CSS field:

.btn { background-color: red !important; border-color: red !important; }
    

Will give this result:

Hover CSS code for the button

When you move your mouse over your button it's a nice visual thing to change the color slightly to let users know they can click. You can achieve that by adding the hover CSS code.

Code in the CSS field:

.btn:hover { background: #FF8B26; background: -moz-linear-gradient(top, #FF8B26 0%, #FFA245 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF8B26), color-stop(100%,#FFA245)); background: -webkit-linear-gradient(top, #FF8B26 0%,#FFA245 100%); background: -o-linear-gradient(top, #FF8B26 0%,#FFA245 100%); background: -ms-linear-gradient(top, #FF8B26 0%,#FFA245 100%); background: linear-gradient(to bottom, #FF8B26 0%,#FFA245 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF8B26', endColorstr='#FFA245', GradientType=0 ); }

Will give you this:

Change the look & feel of the form fields

Code in the CSS field:

.form-control { border-radius: 0 !important; border: none; height: 25px; }
    

Will give this result:

Change the width of your whole contact form

Code in the CSS field:

#container { max-width: 300px; }    

Will give this result:

Changing the location of the contact form container

Code in the CSS field:

#container { margin-left: 0; }    

Will give the bottom result:

Example transparant contact form

Code in the CSS field:

body { background: none transparent !important; } .btn { background-color: green !important; border-color: white !important; } #container { margin-left: 0; }

Will give this result:

Example transparant contact form

Code in the css field:

body { background: none transparent; } input, .input, textarea, select{ background-color: #000 !important; color: #fff important!; margin: 5px 0px 0px 0px; width:100% important!; } #container{ margin:0; padding:0; } .help-block{ font-size: 10px; color: #777; font-style: italic; }
    

Will give this result:

Did this answer your question?