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 I separate the first radio button option from the label?

    Asked by eftraining on September 08, 2016 at 12:19 PM

     

    As in this example:

    label

    text

    Instead of

    Label                                                                                                                                                                        Text

    It would end up in a clearer and more formal design. I can not figure out how to fix it from the design tool or radio button settings, could you help me?

    field label custom css separate item
  • Profile Image
    JotForm Support

    Answered by KadeJM on September 08, 2016 at 02:03 PM

    I apologize but I'm not quite sure I fully understand what you are trying to explain very well though I am trying to make sense of it.

    Are you trying to stack the label and text on top of one another instead of having an indentation then or something like that based on your example?

    Are you trying to make the changes on this form http://www.jotformeu.com/form/61744158973365 on your account? Or another elsewhere?

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 08, 2016 at 02:05 PM

    Additionally, depending on the customization you are needing it may be necessary to use custom injected css to better compensate for the what the form designer might not handle at first.

  • Profile Image

    Answered by eftraining on September 08, 2016 at 02:57 PM

    Apologies - I didn't realize that the text format in the published question looks different that the text I could see while writing it.

    What I am trying to do is to separate the label from the first option, as it is makes visually difficult to distinguish both of them and it makes everything look stack.

    Is there any setting for fixing it or may I try with the CSS customization?

    Thanks for your help!

  • Profile Image
    JotForm Support

    Answered by Mike on September 08, 2016 at 04:29 PM

    It is possible to implement the next layout by adding a custom CSS to the form.

    Please try to add the next CSS and then re-check the form.

    .form-label {
    width: initial !important;
    }
    .form-input-wide {
    padding-top: 15px;
    }

    If you need any further assistance, please let us know.

  • Profile Image

    Answered by eftraining on September 09, 2016 at 05:35 AM

    Many thanks for your help! It works perfectly :)

     

    May I ask one last design question - Now the labels appear to have a restricted size, that makes them break into 2 lines - even if the text is quite short (please see picture below). Would it be possible to make the whole label fit in one single line?

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by Boris on September 09, 2016 at 06:32 AM

    I have checked the custom CSS of your form, but it looks like you haven't yet added the CSS codes that my colleague suggested:

    Upon adding the suggested CSS codes, your labels would display at full width. You can add the codes by opening our Designer:

    Once the full Designer loads, please switch to the CSS tab, and paste the following code there, as depicted in the image below:

    .form-label {
    width: initial !important;
    }
    .form-input-wide {
    padding-top: 15px;
    }

    If you need any further assistance after that, please let us know.

  • Profile Image

    Answered by eftraining on September 09, 2016 at 07:59 AM

    Hi,

    Many thanks for your help. Indeed, when adding the CSS mentioned the distance between the label and the first radio button option increases and solves the initial issue.

    However, I realized that the label keeps breaking into 2 lines - even if the text is quite short (please see picture below).

    Would it be possible to make the whole label text (what kind of training do you want to do) fit in one single line?

    Thanks again!

     

  • Profile Image
    JotForm Support

    Answered by Rose on September 09, 2016 at 08:56 AM

    Could it be possible to a misunderstanding? 

    Since, when I previewed your form, it seems how you would like. The label fits a single line very well. 



    I checked also css code injected to the form given by my colleague, it was on the css part. 

    When I deleted the code, it return to the view fitting two line. 



    Please note that I made this testing on my side by cloning your form. There is no any changing on your css code or on your form. Furthermore, it works how it should be. 

    If you have more questions or need a further support by us, please let us know. We would be glad to help you. 

  • Profile Image

    Answered by eftraining on September 13, 2016 at 06:40 AM

    Hi Rose,

    Thanks for your answer. However, even with the CSS code included, the label question still breaks in two lines when the form is being used (as shown in the picture). It is shown in a single line when using the builder though.  Would it be possible to make it fit in a single line for the final user?

    Thank you again for your help

  • Profile Image
    JotForm Support

    Answered by Jan on September 13, 2016 at 10:38 AM

    I wasn't able to replicate the issue. I opened your form (https://www.jotformeu.com/form/61744158973365) and I can see that the label is in single line. I cloned your form and the label is still in single line. Please take note that you need to open the actual form or preview it from the Form Designer to see the actual results.

    Here's the screenshot of your form in the Form Builder:

    Here's the screenshot of your form in the Form Designer:

    Are you still experiencing this problem? May I know what browser are you using? Please try using another browser just to check if it will properly or not.

    Hope that helps. Thank you.