Some Formatting Questions

  • Profile Image
    SunbridgeInstitute
    Asked on December 08, 2015 at 11:16 AM

    Hi there,

    I am having a few formatting issues with my form, which I'm hoping you can help me with (maybe CSS coding?).

    1. On the top header, where it says "Conference Registration," you can see that the orange tint of the header extends to the right, past the edge of the other fields. How can I correct this so that it matches?

    2. Where it says "how did you hear about this conference," on the last line where it says "other," the bullet style is different. How can I make it match?

    3. Under "payment information" the expiration month and expiration year are formatted funny. It would be most optimal if I could have both of these on the same line, with the helper text underneath. I would also like the security code to be on the same line as the credit card number. Can these two things be done?

    Thank you for your help!

  • Profile Image
    BDAVID
    Answered on December 08, 2015 at 05:24 PM

    Please inject the following CSS codes as explain on this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    1) In order to fix the first issue:

    Please inject the following code:

    .form-header-group.hasImage{

        width: 82.5% !important;

    }

    Result:

    2) On regards of the second issue, I could not find a way to do it, and upon searching it seems it is not possible to do it, so I will escalate this to our second level here: http://www.jotform.com/answers/720791

    3) To fix the issue of the payment area:

    Please inject the following code:

    #id_77 table.form-address-table tr:first-child +tr+tr span:last-child{

    margin-left: 185px !important;

    margin-top: -50px !important;

    }

     

    #input_77_cc_exp_month,#input_77_cc_exp_year{

    width: 48.5% !important;

    }

     

    #id_77 table.form-address-table tr:first-child +tr+tr+tr span:last-child{

    margin-left: 185px !important;

    margin-top: -53px !important;

    }

    Result:

    Here is my clone version: https://form.jotform.com/53414825993969?

    You may clone it if you want to: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    If you need anything else please open a new thread, we will be glad to assist you.