How to create a form having fields in between?

  • Profile Image
    gmcneil808
    Asked on December 05, 2017 at 12:45 PM

    Is there anyway you can help me make a form that looks like this? 

    I'm having a hard time with the spacing. 


    thanks!

    1512495623Capture.JPG

  • Profile Image
    Richie_P
    Answered on December 05, 2017 at 01:49 PM

    I made my form using Configurable list and edited some css to fit the textfields.

    Here is a guide on how to inject custom css: How-to-Inject-Custom-CSS-Codes

    You can clone my form.. https://form.jotform.com/73384841410959


  • Profile Image
    gmcneil808
    Answered on December 05, 2017 at 02:43 PM
    thank you very much! How do I copy that?
    ...
  • Profile Image
    Richie_P
    Answered on December 05, 2017 at 03:00 PM

    I'm sorry I forgot to give you the link on how to clone a form, here it is just follow this guide.

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    gmcneil808
    Answered on December 08, 2017 at 02:43 PM
    this one didn’t work..
    https://form.jotform.com/73384841410959
    Thank You!
    ...
  • Profile Image
    Mike
    Answered on December 08, 2017 at 03:59 PM

    The form should be cloned in a classic layout mode in this case. To switch your account to the classic form layout mode, open the account settings and select the 'All Questions in One Page' option:

    https://www.jotform.com/myaccount/settings

    Then, clone the form again.

  • Profile Image
    gmcneil808
    Answered on December 08, 2017 at 04:43 PM
    Thanks for the help. The form looks good, but I cant edit it. It look broken.
    Can you help? Thanks!
    https://form.jotform.com/73416277998171
    [cid:image003.jpg@01D37041.E3655350]
    ...
  • Profile Image
    Kevin_G
    Answered on December 08, 2017 at 05:40 PM

    I think you're referring to the widget cutting off, that could be fixed injecting this code: 

    iframe[src*="configurableList"]{

        width: 100% !important;

        height: 144px !important;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Now, if you plan to add more fields, you may need to increase the height value from 144px to something else. 

    I hope this helps. 

  • Profile Image
    gmcneil808
    Answered on December 14, 2017 at 12:43 PM
    Thank you very much, that worked.
    Would you be able to show me how to duplicate that same form right below it, but only with the following fields: Name and Phone
    https://www.jotform.com/build/73416277998171
    I tried adding these, but the format is different.
    Thanks Again!
    Graham
    ...
  • Profile Image
    aubreybourke
    Answered on December 14, 2017 at 02:41 PM

    You mean like this?


    15132804316.jpg


    Link:

    https://form.jotform.com/73476094546971

    You can clone:

    How-to-Inject-Custom-CSS-Codes 


  • Profile Image
    gmcneil808
    Answered on December 14, 2017 at 02:43 PM
    Can you help eliminate all the spacing on this form?
    I’d like everything to be very compact.
    especially between the two sections and with the submit button.
    https://www.jotform.com/build/73416277998171
    ...
  • Profile Image
    aubreybourke
    Answered on December 14, 2017 at 03:03 PM

    Yes its possible. Please see this guide:

    How-Can-I-Change-Spacing-Between-Questions