How to apply custom CSS codes to forms.

  • Profile Image
    RogerYelvington01
    Asked on May 28, 2015 at 10:20 AM

    Hey Guys!

    Trying to figure out how to make the following edits to this form:

    http://form.jotformpro.com/form/51473926410958

    Which is embedded here:

    http://felyx.coffeecup.com/CancelFreeze.html

     

    Please advise, thank you!

  • Profile Image
    Mike_G
    Answered on May 28, 2015 at 01:42 PM

    Kindly insert the CSS codes below using this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-all{

    background-color: white !important;

    width: 100% !important;

    }

    .form-section li:nth-child(n+2){

    padding-left: 123px !important;

    padding-right: 123px !important;

    }

    .jotform-form {

    overflow: hidden;

    overflow-x: hidden;

    overflow-y: hidden;

    padding-bottom: 15px !important;

    }

  • Profile Image
    RogerYelvington01
    Answered on May 28, 2015 at 01:47 PM

    This works, but the only thing is, it altered the size of the text fields, which need to be the same width as the drop down box.  

     

    How do I fix this?

     

    Thank you!

  • Profile Image
    Mike_G
    Answered on May 28, 2015 at 02:45 PM

    You can add this CSS codes to fix the length of the text fields so it will match the dropdown field on the form: 

    .form-section li:nth-child(n+5):nth-child(-n+7){

    width: 600px;

    }

    Thank you.