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

    aligning form fields and spacing

    Asked by BBC2016 on April 15, 2016 at 12:07 AM

    you guys just helped me with my other registration form and it looks amazing - can u help me with the aligning and spacing on this form too?????? http://buildingbridgescoalition.org/registration-form/

    if u can provide css code like before that would be a BLESSING!

    HEADERS AND TITLES SHOULD BE BLUE LIKE THE ONE THAT SAYS BILLING INFO: I WANT IT TO LOOK LIKE MY FORM ON THIS PAGE ( http://buildingbridgescoalition.org/moreinforsvp/ ) AS MUCH AS POSSIBLE. JUST DIF FORM FIELDS ON PART OF IT.  

    Attached is what i am trying to do with my form here: http://buildingbridgescoalition.org/registration-form/

    i need some serious help!? THANK U IN ADVANCE FOR BEING TERRIFIC AND AMAZING!!!

    Screenshot
    and registration form css code attached billing info
  • Profile Image

    Answered by BBC2016 on April 15, 2016 at 12:12 AM

    I MADE A BIG MISTAKE - SORRY HERE IS THE CORRECT IMAGE/FORM I AM TRYING TO MAKE.

     

    SEE ATTACHED HERE.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 15, 2016 at 01:50 AM

    As far as I can see on other threads related to the same, this should be the CSS code that you will need to inject on your form: 

    .form-payment-total {

        width: 150px !important;

        left: 159px !important;

        margin-top: -20px !important;

    }

     

    input.form-textbox.cc_ccv {

        width: 200px !important;

        margin-left: 10px;

    }

     

    select#input_13_cc_exp_year {

        width: 200px !important;

        margin-left: 10px;

    }

     

    li#id_10 {

        margin-left: 7px;

    }

     

    [data-type="control_phone"] .form-sub-label-container:first-child {

        display: none;

    }

     

    [data-type="control_phone"] .form-sub-label-container {

        width: 100%;

    }

    Regarding to the color of the text this should be the CSS code that will change it: 

    .form-payment-total, #ccTitle13{

        color: #0070B3;

        font-size: 16px;

        font-weight: 600;

        font-family: 'Open Sans', Arial, sans-serif;

        padding-bottom: 15px;

    }

    This guide will help you to inject the CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Do get back to us and let us know the result of injecting this CSS code. 

  • Profile Image

    Answered by BBC2016 on April 18, 2016 at 01:40 AM

    This ididn't work at all.......althought the 2nd code did change the color but the top code didnt work.

    Maybe I wasn't clear - I need the css code to make this image attached look exactly like my form: http://buildingbridgescoalition.org/registration-form/

    I keep messing iwth it and I can't get my form to look like the image below - can u provide me with a code to make it look like the pic below???

     

  • Profile Image
    JotForm Support

    Answered by beril on April 18, 2016 at 03:32 AM

    First of all, I've deleted some CSS errors on your form.

    In addition to that, can you add the CSS code below?

    #cid_13 span.form-sub-label-container {

        width : 200px !important;

        

    }

    Feel free to contact us anytime, we will be glad to assist you.

  • Profile Image

    Answered by BBC2016 on April 20, 2016 at 01:08 AM

    this looks nothing like the image I was asking about - I was just trying to get my current form here: too look like this image I made. I just cant get the box sizes and everything to look the same- can u help me???

     

    RIGTH NOW MY FORM:

    https://www.jotform.com//?formID=60548442926158#design

     

    I WANT IT TO LOOK JUST LIEK THIS:

     

  • Profile Image
    JotForm Support

    Answered by beril on April 20, 2016 at 09:37 AM

    There are so many CSS code in tour form. Because of that reason, there is conflict between your codes.

    To solve that issue, I 've deleted the whole code on your cloned form and added the code below:

    #cid_13 .form-sub-label-container {

        width : 200px!important;

        margin-right : 15px!important;

    }

    #input_13_quantity_1005_0 {

     width : 50px !important;

    position : relative !important;

    top : -30px !important;

    margin-left : 349px !important;

    }

    input.form-textbox.cc_ccv {

    width : 200px !important;

    }

    input.form-textbox.cc_number {

    margin-right : 03px;

    width : 200px !important;

    }

    #input_13_cc_exp_month {

    width : 200px !important;

    margin-right : 03px;

    }

    #input_13_cc_lastName {

    margin-left : -45px !important;

    }

    #id_5 {

    width : 200px !important;

    }

    #input_5 {

     width : 200px !important;

    }

    #first_4 {

    width : 200px !important;

    }

    #last_4 {

    width : 200px !important;

     margin-left : -40px !important;

    }

    #first_9 {

    width : 200px !important;

    margin-right : 03px;

    }

    #last_9 {

    width : 200px !important;

    margin-left : -40px !important;

    }

    #id_10 {

    width : 200px !important;

    margin-right : 03px;

    }

    #input_10_area {

    width : 50px !important;

    margin-left : 25px;

    }

     

    #input_10_phone {

     width : 130px !important;

    margin-left : 25px;

    }

    #input_11 {

    width : 430px !important;

    }

    .form-payment-total {

    width : 100px !important;

    margin-left : 359px !important;

    margin-top : -20px !important;

    }

    .form-payment-total, #ccTitle13 {

    color : #0070B3;

    font-size : 16px;

     font-weight : 600;

    font-family : 'Open Sans', Arial, sans-serif;

    padding-bottom : 15px;

    }

    #label_10 {

     margin-left : 25px;

    }

    #input_6_addr_line1 {

    width : 422px !important;

    }

    #input_6_city {

     width : 200px !important;

    }

    #input_6_state {

    width : 200px !important;

    }

    #input_6_postal {

    width : 200px !important;

    }

    #input_6_country {

    width : 200px !important;

    }

    .form-product-container {

    width : 100% !important;

     

    }

    #cid_13 label.form-product-container {

    font-family : open sans;

    }

    #cid_13 span.form-product-item {

    width : 400px  !important;

    }

    #sublabel_area , #sublabel_phone {

    margin-left : 25px;

    }

     #sublabel_last {

     

     margin-left : -33px;

    }

    #sublabel_cc_lastName {

    margin-left : -33px;

    }

    In addition, to that, I've changed the position of your text fiellds.

    You can clone and check it.

    https://form.jotform.com/61103287721954

    Here is how it works on my side:

    if you need additional assistance we will be happy to assist you.