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 create one box with multiple fields - ala the "address" box?

    Asked by jhpcg on January 16, 2012 at 02:50 AM

    I want to create a box with one label that incorporates multiple fields within it.  For example:

     

    Label: Truck type

    Fields within box:

      1. Engine Make

      2. Model Year

      3. Horsepower

      4. Miles driven per Year

     

    These should all be within a box the same way Street Address, City, State, etc. are within the box labelled "Address".  Any help with this is greatly appreciated.  :)

  • Profile Image

    Answered by fxr on January 16, 2012 at 11:18 AM

    Something like this? 

    http://form.jotform.com/form/20150430120

    I will make sure the fields look the way you want, before we explain how to it. It involves adding some Custom CSS to your form

  • Profile Image

    Answered by jhpcg on January 16, 2012 at 11:22 AM

    Exactly!  Thanks for the help. 

  • Profile Image

    Answered by fxr on January 16, 2012 at 06:35 PM

    OK, to do this,

    Create 4 Text Box fields.

    Set their size to 60. 

    Label each of the normally, and add the same for a Sub Label :

     

     

    Your form should now look a bit like this:

     

    Now we need to inspect the forms CSS to hide the labels on the left. 

    It is easy to locate these element IDs by right-clicking on a preview of the form in Chrome and selecting Inspect Element.

    The 3 label IDs of the elements that I need to hide are highlighted:

     

    To add the necessary Custom CSS:

    From the Setup & Embed toolbar, click on the Preferences icon, select Form Styles tab and in the Inject Custom CSS text area, add the following:

     

    #label_17, #label_18, #label_19 { visibility:hidden !important;}

     

    As regards the gaps between the fields, we can also add some further CSS to minimise the distance between them: 
    #id_16 {padding-bottom:0 !important; }
    #id_17, #id_18 { padding-top:0 !important;
    padding-bottom:0 !important; }
    #id_19 {padding-top:0 !important; }
    One more thing lets get rid of those borders, add the following CSS:
    #cid_16 {  border-bottom-style:none !important; }
    #cid_17, #cid_18 {  border-bottom-style:none !important; border-top-style:none !important;}
    #cid_19 {  border-top-style:none !important; }
    With my final form looking like this:
     
    Now, I realise this does get a little completed, so heres a clone of the form you have been working on with those fields added. -> http://form.jotform.com/form/20155746142