How to remove contact form border?

Paavo
Asked 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

Page URL:
http://www.paavolylesmythe.com/Contact
pinoytech
Answered 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!
Paavo
Answered on January 17, 2013 at 12:44 PM

Thank you