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

    spacing between fields

    Asked by hanban on September 05, 2013 at 07:22 AM

    Hi!

     

    I am really impressed by this site and form builder, so thank you!

     

    I am nearly there now with our form, however when I have just previewed it, I see that there is some spacing issues inbetween some fields.

     

    Please see  my form and look under the heading SECTION TWO.

     

    There should be a gap between this and the sibling details, the same for section 4 etc.

     

    Please can you advise.

     

    Also, is there a way to "tidy" up the form so that all field blocks are the same width - as you can see my "SECTION" headers are wider than the rest of the form and ideally we would like them to all be the same width.  i have looked at the form width and they all appear to be set to 1000 but they do not all line up nicely.

    any advice much appreciated

    Kind regards

    Hannah

    Page URL:
    http://form.jotformeu.com/form/32472633986363

    Form Builder form width heading site
  • Profile Image
    JotForm Support

    Answered by Tasha on September 05, 2013 at 10:23 AM

    Hi,

     

    To add the spacing between the Heading and the Sub Heading please add a <br/> tag as shown below.

     

     

    As it relates to the field width you will need to inject the custom css below to adjust them. Please follow the review this guide for instructions on how to inject custom css.

     

    .form-line {

    width: 100% !important;

    }

     

    .form-line {

    padding: 14px 0px !important;

    }

    .form-line-column{

    width: auto !important;

    padding-right: 10px !important;

     

    }

     

    I also made a clone of your form here. You can review it to see if that is what you want before making the changes.

  • Profile Image
    JotForm Support

    Answered by abajan on September 05, 2013 at 11:24 AM

    @hanban

    If you wish the headings and their sub-headings to be separated from the fields to which they're associated, please add the following CSS to that which my colleague has provided:

    #cid_93, #cid_97, #cid_103 {
    margin-top: 105px;
    }

    #cid_114 {
    margin-top: 300px;
    }

    #cid_169 {
    margin-top: 130px;
    }

    The result should be similar to this clone.

    Should you require additional adjustments to the form's layout, we'd be happy to help.

  • Profile Image

    Answered by hanban on September 06, 2013 at 04:23 AM
    Thank you so much for your help , it is so much appreciated and the clone of my form looks a lot neater now!

    I was hoping you may be able to help me with a few more things on it, if that is possible?

    Can the whole form be resized to what you would hope could open on most people's computers/Macs etc?

    When I opened the clone form that you provided, it all looked great, apart from a few things that were not lined up:

    Under Section 6 - the first two rows of fields are right but the third line which duplicates the top two has come out of line

    Under Section two, one of the sibling links box has jumped up a line and needs to be back line next to the other two.

    Is this something you can help me with please? If yes, can the form be mailed to me so i can still edit it further if we need to just change text etc?

    Thank you SO MUCH

    Kind regards

    Hannah

    Date: Thu, 5 Sep 2013 11:24:57 -0400
    To: hanban_21@hotmail.com
    Subject: Re: spacing between fields
  • Profile Image
    JotForm Support

    Answered by abajan on September 06, 2013 at 06:58 AM

    Hi again Hannah,

    Please check the clone now. The corrections were made as follows:

    Section 2

    1. The orphaned Siblings field was right-clicked and then Move Down was clicked:


    2.
    The additional CSS I provided above was changed to the following:

    #cid_97, #cid_103 {
    margin-top: 105px;
    }

    #cid_93 {
    margin-top: 0;
    }

    #cid_114 {
    margin-top: 300px;
    }

    #cid_169 {
    margin-top: 130px;
    }


    Section 6

    The misaligned Name of School field was right-clicked and then Move to a new line was clicked:


    Do let us know if any further adjustments are required.


    Thanks

  • Profile Image

    Answered by hanban on September 06, 2013 at 07:21 AM

    Hello

    Wow, many thanks again for such a quick reply. This service really is amazing and I will be recommending this site to many people.

    Thank you for the help again and for sorting the issues for me.

    Is there a way I can save the cloned form that you sent so I can open it in the form builder in case i need to do any more changes in the future. I have made the corrections like you noted below but the headers are all still different sizes - can you advise where I change these so it looks like your clone? You mentioned in a previous mail about the CSS for this but I am not sure where they go. Sorry!

    I look foward to hearing from you again.

    Kind regards

    Hannah
    Date: Fri, 6 Sep 2013 06:58:02 -0400
    To: hanban_21@hotmail.com
    Subject: Re: spacing between fields
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 06, 2013 at 07:31 AM

    Hello Hannah,

    You can clone this form in your account. Here is a guide to help you:   http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

    This is the form url you should clone:  http://www.jotformpro.com/form/32474192853964

    Thank you!

  • Profile Image

    Answered by hanban on September 06, 2013 at 07:38 AM
    Thank you!

    I followed the guide and that all worked perfectly.

    Is there a way to colour the headings only for each section - SECTION ONE, SECTION TWO etc in a lighter blue maybe? Just so they stand out a little bit more.

    Thank you once again, a truly amazing customer service!

    Kind regards

    Hannah

    Date: Fri, 6 Sep 2013 07:31:40 -0400
    To: hanban_21@hotmail.com
    Subject: Re: spacing between fields
  • Profile Image
    JotForm Support

    Answered by Tasha on September 06, 2013 at 07:54 AM

    Hi Hannah,

    Since your new question(about changing the colour of the headings) is unrelated to your original forum post I would like to ask if you could please start a new thread with that question. That way we will be able to track each issue separately and provide better assistance.

    Thanks!