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

    How can we change the layout of the fields in payment section of our form?

    Asked by BBC2016 on March 17, 2016 at 01:14 AM

    all my field are so long and narrow.....how i fix thisto look like the attached form?

    Page URL:
    http://buildingbridgescoalition.org/rsvpcontribution/

    Screenshot
    section attached payment fields custom CSS
  • Profile Image
    JotForm Support

    Answered by Chriistian on March 17, 2016 at 02:59 AM

    Please inject this code to adjust the design of the billing section.

    #cid_13 .form-sub-label-container {

        width: 200px!important;

        margin-right: 15px!important;

    }

    #input_13_cc_exp_month,  #input_13_cc_exp_year {

        width: 200px;

        height: 30px;

    }

    How to Inject Custom CSS Codes

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by BBC2016 on March 17, 2016 at 04:10 PM

    I put the code in but I dont see it working at all - it didnt change - can u help me?

  • Profile Image

    Answered by BBC2016 on March 17, 2016 at 04:13 PM

    im so frustrated with this thing,.im sorry im not doing it right - i copied and pasted it right in. but its not changing.

  • Profile Image

    Answered by Ben on March 17, 2016 at 04:42 PM

    I have just added the code mentioned by my colleague to your form. Please do check it out and let us know if there is anything else that we can assist you with and we would be happy to do so :)

  • Profile Image

    Answered by BBC2016 on March 17, 2016 at 04:51 PM

    amazing thanks!

  • Profile Image

    Answered by BBC2016 on March 17, 2016 at 04:52 PM

    can u help me clean up the css>? i have alot of duplicate stuff - i dontknow what to keep and what to take out?? its messy and sometimes i add things and it doesnt update?

  • Profile Image

    Answered by Ben on March 17, 2016 at 05:18 PM

    You are welcome.

    Now in regards to the CSS, a beauty of it is that the last one in the list will be applied as with more importance.

    For example:

    1. font color = red

    2. font color = blue

    3. font color = green

    - the CSS rules in an order like in the example above would make the font of green color.

    As such I always recommend just following the steps here: Inject Custom CSS Codes but when you get to the custom CSS field always to scroll down after all the other code in the same. Once you find the last character, you can paste your new code there and it should work each time - without any issue.

    That is the very same way I add CSS and had added it to your form.

    Having that said, you should not worry about the duplicate CSS values since they would be overwritten by the later code and sometimes even if it seems duplicate it could have some properties that help to keep current style.

    Hope this helps.

    If you still wish to clean it up, I do suggest saving the form first and in case of any issues, you can always revert back to the working version by following the steps here: How to View Form Revision History

  • Profile Image

    Answered by BBC2016 on March 17, 2016 at 05:38 PM

    good to know thanks verrrrry much!