What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Help with using custom CSS

    Asked by ferwoods 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
    JotForm Support

    Answered by idarktech 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!