How can I create one box with multiple fields - ala the "address" box?

  • Profile Image
    jhpcg
    Asked 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
    fxr
    Answered 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
    jhpcg
    Answered on January 16, 2012 at 11:22 AM

    Exactly!  Thanks for the help. 

  • Profile Image
    fxr
    Answered 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