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

    Help needed to get first and second names onto a single line?

    Asked by Cellofest on May 24, 2017 at 07:32 AM

    The two boxes for first and second names always seem to spread over two rows.  I had this problem before with a previous form. The code I was given for fixing it hasn't worked this time - not sure if this is because I have another code to keep the labels the full width?  This is what I have at the moment:

    .form-sub-label-container {

        width : 48% !important;

    }

     

    .form-label.form-label-top {

        width : 100% !important;

     

    Thanks!

    Page URL:
    https://form.jotformeu.com/71186499045364

  • Profile Image
    JotForm Support

    Answered by Welvin on May 24, 2017 at 09:30 AM

    Use the following custom CSS instead:

    [data-type="control_fullname"] .form-sub-label-container {

        width: 48% !important;

    }

  • Profile Image

    Answered by Cellofest on May 24, 2017 at 09:50 AM

    Perfect! Thanks very much!

  • Profile Image

    Answered by Cellofest on May 24, 2017 at 10:13 AM

    Also is there a way to make the padding between the columns on the rest of the form the same as the gap between the full name boxes?

    Thanks!

     

  • Profile Image
    JotForm Support

    Answered by Welvin on May 24, 2017 at 11:30 AM

    Try to replace the previous full name CSS with the following and let me know if this suits you:

    [data-type="control_fullname"] .form-sub-label-container:first-child {

        margin-right: 0%;

        width: 50% !important;

        padding-right: 3px;

    }

    [data-type="control_fullname"] .form-sub-label-container:nth-child(2) {

        width: 50% !important;

        padding-left: 3px;

        margin-left: 0% !important;

    }

     

  • Profile Image

    Answered by Cellofest on May 25, 2017 at 09:59 AM

    I love this! So good when things are symmetrical! :) 

    Thank you