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

    Some Formatting Questions

    Asked by SunbridgeInstitute 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!

    Page URL:
    http://www.jotform.com//?formID=53405265538962

    style different credit card
  • Profile Image
    JotForm Support

    Answered by BDAVID 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.