How to display fields inline?

  • ExhibitionGirls
    Asked on April 4, 2017 at 6:48 PM
    Sorry if im being stupid - how do i make the boxes sit next to each other on one line after shrinking?
  • Kevin Support Team Lead
    Replied on April 4, 2017 at 6:51 PM

    You need to shrink all the fields you need to display inline, once you start doing this you will notice they will get their width reduced and the next field will be moved to the above line (if the field above as well as the field in the next line have the shrink option enabled).

    Here's a guide that will also help you with displaying fields inline: https://www.jotform.com/help/90-Form-Field-Positioning 

    It may also require to change the field's width, you could do it through the field properties and finding the width under the options tab: 

    How to display fields inline?  Image 1 Screenshot 20

    Hope this helps. 

  • ExhibitionGirls
    Replied on April 5, 2017 at 4:52 AM

    How to display fields inline?  Image 1 Screenshot 20

    Hi is there an easy way of duplicating the content? also there are problems with alignment :/ attached 

  • Nik_C
    Replied on April 5, 2017 at 6:14 AM

    Could you provide more information about the image, what exactly are those fields?

    You should be able to create them with our basic fields:

    How to display fields inline?  Image 1 Screenshot 20

    We'll wait for your response.

    Thank you!

  • ExhibitionGirls
    Replied on April 5, 2017 at 6:24 AM

    Hi ive attached what i am trying to do How to display fields inline?  Image 1 Screenshot 20

     

  • Support_Management Jotform Support
    Replied on April 5, 2017 at 8:40 AM

    Hello, I'm seeing this was explained by my colleagues so perhaps using a short clip will let us explain it better:

    How to display fields inline?  Image 1 Screenshot 20

    Here's the demo form: https://www.jotform.com/70943150538961

    I strongly urge you to read and refer to the guide that was given previously. For your convenience, I'll list it here again along with another guide that might help.

    Related guides:

    Form-Field-Positioning

    Setting-up-Form-Columns

  • ExhibitionGirls
    Replied on April 20, 2017 at 7:59 AM

    Thank you - how do i get the following onto one line please?How to display fields inline?  Image 1 Screenshot 20

  • Sven
    Replied on April 20, 2017 at 8:52 AM

    Just to clarify, do you need the label "Company Name" and the field to be on the same line? If yes, you can do that by clicking on the gear icon to open the PROPERTIES menu, then from the GENERAL tab, find LABEL ALIGN, and change the option to Left instead of Top.

    How to display fields inline?  Image 1 Screenshot 20

     

    If this is not what you're looking for, please explain what you want to achieve so we can assist you further.

     

    Thank you.

  • ExhibitionGirls
    Replied on April 20, 2017 at 2:38 PM

    Thank you - sorry im having problems with the 

    staff - mobile number - dress size again 

    i have to pre fill this information for clients but when i put it into the pre fill form the formatting goes wrong 

    It needs to be in one lineHow to display fields inline?  Image 1 Screenshot 20

    I have attached a screen grab 

     

  • ExhibitionGirls
    Replied on April 20, 2017 at 2:39 PM

    also im having problems with formatting on the rest of the form - screen grab attachedHow to display fields inline?  Image 1 Screenshot 20

  • Support_Management Jotform Support
    Replied on April 20, 2017 at 3:58 PM

    Hello 😊 no need to apologize, we're here to help you. For your post about the staff - mobile number - dress size fields, I assume you want all 3 of them shown in 1 line?

    This will not work with your form because your form width is too narrow. The only way to cramp 3 fields in 1 line is to:

    1. Either make the fields smaller

    2. Or the easy way, make your form wider

    The general rule of thumb is to ensure you have ample amount of space for the fields to align themselves in 1 line.

    How to display fields inline?  Image 1 Screenshot 30

    To move the Staff Booked - 2 field to a new line, just toggle that option on that same section where you shrank the field.

    How to display fields inline?  Image 2 Screenshot 41

    Here's a cloned copy of your form showing these changes: https://www.jotform.com/71095995138973

    For your other question, we can help you better if you'd be more specific on which formatting you need help with. And if possible, we kindly request you to create a new thread by clicking this link with a more detailed description on what formatting needs to be changed on your form.

    Alternatively, I strongly urge you to refer to the guides I previously posted. For your convenience, I'll list them again below:

    Form-Field-Positioning

    Setting-up-Form-Columns

    Although the 2nd guide above is about Form Columns, it's still a good read when it comes to using the Shrink and Move to a new line options.

  • ExhibitionGirls
    Replied on April 20, 2017 at 5:41 PM

    Hi thank you i changed the width but its when i convert it via the pre populate app that it goes weird 

    How to display fields inline?  Image 1 Screenshot 20

  • Kevin Support Team Lead
    Replied on April 20, 2017 at 7:05 PM

    I have checked your form in the pre-populate app and I can see it displays fine, here's a screenshot about what I can see: 

    How to display fields inline?  Image 1 Screenshot 20

    Seems like you were able to resolve the layout issue, could you please confirm us that? 

     

  • ExhibitionGirls
    Replied on April 21, 2017 at 3:23 AM

    hi i am seeing something different 

    i am viewing the pre populate app through http://prepopulate.jotform.io/ is that correct?How to display fields inline?  Image 1 Screenshot 20

  • Sven
    Replied on April 21, 2017 at 4:47 AM

    I cloned your form, and I can see that the Staff Booked -2 field is displaying a bit off, like the screenshot you provided. To fix this, please select Move to a new line, from the advanced tab in the field properties, Below is a live demonstration:

    How to display fields inline?  Image 1 Screenshot 20

     

     

    Once you've applied this, your form will view properly in the pre populate app as well. 

     

    Here's my cloned version of your form, you can clone it back and review it via this URL:

    https://form.jotformpro.com/71102212431940

     

    Here's how to clone an existing form into your account:

    How-to-Clone-an-Existing-Form-from-a-URL

     

    Thank you.