Help with using custom CSS

  • Profile Image
    ferwoods
    Asked on December 11, 2011 at 05:44 PM

    I want the form to match the rest of my website.

     

    Below is the CSS code for my original form as built in the webtemplate. When I copy this into the CSS field on JOtform no changes happen. Can someone help me?

     

    form.contact_form {

    width: 550px;

    float:left;

    margin: 0;

    padding-top: 10px;

    }

    form.contact_form fieldset {

    border: none;

    background: none;

    }

    form.contact_form fieldset p {

    background: none;

    padding: 0;

    margin: 0;

    display: block;

    }

    form.contact_form label {

    width: 148px;

    height: 23px;

    padding-top: 15px;

    font-size: 14px;

    display: inline-block;

    float: left;

    }

    form.contact_form input {

    width: 380px;

    height: 20px;

    margin: 10px 0px 0px 0px;

    padding: 5px 10px;

    background: #ebf0f2;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    font-family: Arial, Trebuchet MS, Verdana, sans-serif;

    color: #444751;

    font-size: 12px;

    line-height:1.5em;

    outline: none;

    float: left;

    }

    form.contact_form .select_style {

    width: 400px;

    height: 32px;

    margin: 10px 0px 0px 0px;

    padding: 6px 5px 5px 5px;

    background: #ebf0f2;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    font-family: Arial, Trebuchet MS, Verdana, sans-serif;

    color: #444751;

    font-size: 12px;

    line-height:1.5em;

    outline: none;

    float: left;

    display: block;

    }

    form.contact_form option {

    background: #ebf0f2;

    border: none;

    outline: none;

    }

    form.contact_form textarea {

    width: 380px;

    height: 90px;

    padding: 5px 10px;

    margin: 10px 0px 0px 0px;

    background: #ebf0f2;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    font-family: Arial, Trebuchet MS, Verdana, sans-serif;

    color: #444751;

    font-size: 12px;

    line-height:1.5em;

    outline: none;

    float: left;

    }

  • Profile Image
    idarktech
    Answered on December 11, 2011 at 07:17 PM

    Hi,

    To use that on your form, just simply replace all form.contact_form to .form-all, you can copy the final code below:

     

    .form-all {

    width: 550px;

    float:left;

    margin: 0;

    padding-top: 10px;

    }

    .form-all fieldset {

    border: none;

    background: none;

    }

    .form-all fieldset p {

    background: none;

    padding: 0;

    margin: 0;

    display: block;

    }

    .form-all label {

    width: 148px;

    height: 23px;

    padding-top: 15px;

    font-size: 14px;

    display: inline-block;

    float: left;

    }

    .form-all input {

    width: 380px;

    height: 20px;

    margin: 10px 0px 0px 0px;

    padding: 5px 10px;

    background: #ebf0f2;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    font-family: Arial, Trebuchet MS, Verdana, sans-serif;

    color: #444751;

    font-size: 12px;

    line-height:1.5em;

    outline: none;

    float: left;

    }

    .form-all select {

     

    width: 400px !important;

     

    height: 32px;

    margin: 10px 0px 0px 0px;

    padding: 6px 5px 5px 5px;

    background: #ebf0f2;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    font-family: Arial, Trebuchet MS, Verdana, sans-serif;

    color: #444751;

    font-size: 12px;

    line-height:1.5em;

    outline: none;

    float: left;

    display: block;

    }

    .form-all option {

    background: #ebf0f2;

    border: none;

    outline: none;

    }

    .form-all textarea {

    width: 380px;

    height: 90px;

    padding: 5px 10px;

    margin: 10px 0px 0px 0px;

    background: #ebf0f2;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    font-family: Arial, Trebuchet MS, Verdana, sans-serif;

    color: #444751;

    font-size: 12px;

    line-height:1.5em;

    outline: none;

    float: left;

    }

     

    Let us know if you have further questions. Thank you for using JotForm and have a great day!