aligning form fields and spacing

  • Profile Image
    BBC2016
    Asked 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!!!

  • Profile Image
    BBC2016
    Answered 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
    Kevin_G
    Answered 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
    BBC2016
    Answered 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
    beril
    Answered 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
    BBC2016
    Answered 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
    beril
    Answered 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.