Format / style of the form

  • Matthew Wheat
    Asked on June 13, 2016 at 1:09 PM

    Hi

     

    I want to build a form with some questions next to each other rather than them all above/below each other.  Is this possible?

    I'm looking to purchase this for my site, but this could be a dealbreaker.

    example

    first name [    ]         surname  [       ]          email    [      ]

     

    rather than

    first name [    ]        

    surname  [    ]          

    email    [    ]

     

    Thanks

    Matthew

  • Charlie
    Replied on June 13, 2016 at 2:00 PM

    Yes, that can be achieved, you can check this guide on how to properly position your fields: https://www.jotform.com/help/328-How-to-position-fields-in-JotForm 

    Let us know if you need further help on this.

  • Matthew Wheat
    Replied on June 15, 2016 at 8:45 AM
    Nice start – but merge to above line doesn’t work?
    Cannot put these three on the same line at all…
    [cid:image001.png@01D1C708.2640C5E0]
    Matthew
    Digital Marketing Manager
    Direct Dial: 0115 9628 534
    Office Tel: 0115 9415 282
    Office Fax: 0115 960 2138
    Email: matthew@go2brands.co.uk
    Address: GO2 Brands Ltd, Suite D, Lancaster House, 10 Sherwood Rise, Nottingham, NG7 6JE
    [Block2]
    UKGirlThing: Facebook | Twitter | Google+ | YouTube | Pinterest | Instagram
    Gents Events: Facebook | Twitter | Google+ | YouTube
    This e-mail and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this e-mail in error please notify the sender. This footer also confirms that this e-mail message has been scanned for the presence of computer viruses. Any views expressed in this message are those of the individual sender, except where the sender specifies and with authority, states them to be the views of GO2 Brands Ltd, trading as 'UKGirlThing and Gents Events’.
    GO2 Brands Ltd, trading as 'UKGirlThing’ and ‘Gents Events’ Registered Number: 7525714, Registered Office: Ashgates Accountants & Financial Services Ltd, 5 Prospect Place, Millennium Way, Pride Park, Derby, DE24 8HG
    ...
  • Charlie
    Replied on June 15, 2016 at 10:13 AM

    You need to make sure that the width of the fields matches the total width of your form. If not, then they will be pushed on a new line.

    Unfortunately, if you are replying to this thread using your email client and attaching images from there, it won't go through here in the forum, so we are not seeing file attachments or images you are posting.

    To post images or screenshots, you need to directly visit this thread using this link https://www.jotform.com/answers/859532, then upload your screenshot using the text editor on the reply area.

    Format / style of the form Image 1 Screenshot 20

     

    You can use the Form Designer Tool to make adjustments on your form, if you are familiar with CSS coding, then you can also inject your custom CSS codes on your form by following this guide link.

    Another issue that I'm seeing on your form is the theme you are using, it seems like the original theme you have applied is set to expand the width of the input fields to match the width of the form itself. So even though we position them on one line, the width is still following the original design of the theme. If you want, you can try to set back your form to the default theme and redesign your form again. 

    If you want to stay on the same design, then you can try adding a width to your form fields manually using custom CSS code, in your case, let's say we want to line up the first name, surname and email fields, after you have move them in one line using "Shrink", you need to divide their width to the total width of the form. In my case, this is the CSS code that I'll be using:

    #id_34, #id_16, #id_33 {

        width : 33.33% !important;

    }

    The width of the form is considered 100%, so I want the three form fields to have a total of 100%, I just need to set their widths to 33.33% to have them evenly. Of course you can set specific widths on them, but I would suggest using percentage so that they are also mobile responsive at the same time. Here's how it looks like: https://form.jotform.com/61663755710963

    I hope that helps.