How to remove contact form border?
-
PaavoAsked on January 17, 2013 at 10:02 AM
Would you be able to help me so that i am able to have a completely borderless form for a website? Ideally it would seem flush on the page with no grey shadow around the rectangle. Thank you
-
pinoytechAnswered on January 17, 2013 at 10:12 AM
Hi,
In order to remove your contact form border and shadow, all you need to do is update the code that being injected on the form.
Inject this code into your form(updated codes):
/*--form header background--*/
.form-header-group {
background: transparent;
border-bottom:0px !important;
padding-left: 10px !important;
color: #777 !important;
margin-left: 2px;
}
/*--textarea fixed width--*/
.form-textarea{
width: 330px !important;
}
/*--form background--*/
.form-all{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-moz-box-shadow: 0 0 5px #888;
padding-left: 14px;
}/*--textbox, textarea style--*/
.form-textbox, .form-textarea{
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
padding: 8px 8px;
color: #777;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border: solid 1px #C0C0C0;
-moz-box-shadow: 0 0 2px #888;
-webkit-box-shadow: 0 0 2px#888;
box-shadow: 0 0 2px #888;
}/*--form label style--*/
.form-label-top, .form-label-left, .form-label-right{
color: #777 !important;
}/*--remove focus border--*/
.form-textbox:focus, .form-textarea:focus{
outline:none;
}/*--move error below submit button--*/
.form-button-error{
display:block;
}/*--remove error button--*/
.form-error-message {
display: none !important;
}
.form-line-error {
background:none repeat scroll 0 0;
}/*--submit button move slightly left--*/
.form-submit-button{
margin-left:2px;
}/*--add red border on error--*/
.form-validation-error {
border: 1px solid red !important;
}
This is how it looks like after that: http://www.jotformpro.com/form/30163858522959
Here's the guide on injecting custom css: http://jotform.me/help/117-How-to-Inject-Custom-CSS-Codes
If you need further assistance, do let us know.
Thank you!
-
PaavoAnswered on January 17, 2013 at 12:44 PM
Thank you