Need custom css code to make changes in form.

  • BBC2016
    Asked on April 14, 2016 at 2:26 AM

    These are the only things left I can't figure out how to fix! Can you do these in my form or give me a link of the new changes? I have spent HOURS trying to do the changes below and I cant figure them out! I am NOT an expert like you guys. Please help with what to do next on this:


    -Total should be above the black line and on the RH hand side margin

    -When a user selects a large amount in drop down like $5000 the total $ number goes to the next line - how can we fix this?

    -All boxes should all be the same size and aligned just like in the picture

    -All spacing between box fields and titles should be just like in the picture

    -Can we make phone number box be 1 box take out area code section?

    -Line separator should be above Billing title and under phone / email box, in the middle.

    -These are the only things left I can't figure out how to change in the CSS.

     

    I have spent HOURS trying to do the changes below and I can't. Is there any way you can provide me with a cloned form or something? I would GREATLY, greatly, GREATLY appreciate it.

    If so - I would be happy to tip/pay/upgrade my membership!!!!

    Please help!! :(

    Jotform Thread 818166 Screenshot
  • BBC2016
    Replied on April 14, 2016 at 2:31 AM

    FORM LINK is: http://buildingbridgescoalition.org/moreinforsvp/

  • Ashwin JotForm Support
    Replied on April 14, 2016 at 4:07 AM

    Hello BBC2016,

    Please inject the following custom css code in your form and this will take care of all your requirements:

    .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_19 {

        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%;

    }

     

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions or need any other changes.

    Thank you!

  • BBC2016
    Replied on April 14, 2016 at 10:35 PM

    you are a GOD - thank you so VVVVERYYYY much!