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

    Problem with Spacing on form

    Asked by cands on September 23, 2014 at 06:19 PM

    Hi

    I am having a few spacing problems with my form:

    http://form.jotformeu.com/form/42655581238359

    Firstly there is too much empty space at the bottom.

    Secondly I have a border round the form and the form is not centered.

    Also whatever method I use to embed the form it looks different in FF and IE. I tried using the iframe method (which seems to be the recommended method) but I get a white flash before the form loads which doesn't look good.

    Any help would be much appreciated.

    Danni

    Page URL:
    http://www.lm-lakeland-design.co.uk/Testform/index.html

    form spacing textarea spacing
  • Profile Image
    JotForm Support

    Answered by jonathan on September 23, 2014 at 07:47 PM

    Hi,

    Can you please try this jotform http://www.jotformpro.com/form/42656997450973

    You can clone it and update in your form builder. Follow this user guide to clone the form

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

     

    Try embedding the form in your website using the default embed script.

    http://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page

     

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

     

  • Profile Image

    Answered by cands on September 23, 2014 at 09:01 PM

    Hi

    Thanks, however I am still having problems. I tried embedding the full source and that is closer but still issues with the submit button placement it overruns the form border in FF and there is too much space below it in FF. It looks fine in Chrome however.

    Also I would like to move the text labels over by 2px just so it is horizontally centered and give a little more padding at the top, not much but just o the first item isn't as close to the top border.

    Thanks in advance for any help.

     

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 24, 2014 at 02:45 AM

    Hi,

    Add the following CSS codes.

    .form-textarea { height: 90px !important; }

    .form-label { margin-top: 2px; }

    The first code is for the consistent textarea height on different browsers and the second one is for the top label margin as you desired.

    Feel free to adjust the values to your preference.

    Hope this helps. Thanks!

  • Profile Image

    Answered by cands on September 30, 2014 at 05:30 PM

    Hi

    Sorry for the delayed reply, I have been away.

    Almost there but I don't just want to move the top label down, I want to add a bit more space between the top border and the first label and input box.

    Basically I want to move all fields down slightly so that the form is vertically centered within the border.

    Also I would like to move all the elements over 2 or 3px to the left so that everything is horizontally centered within the border.

    http://www.lm-lakeland-design.co.uk/Testform/index.html

    Please can you advise?

    Thanks

    D

  • Profile Image
    JotForm Support

    Answered by steve on September 30, 2014 at 07:24 PM

    Hello-

    In your CSS I updated this line to make it vertically centered:

    .form-all {
    width:450px !important;
    height:450px !important;
    }

    As for moving elements to the left, it doesn't look like there's room. The labels are already on the edge almost. If anything it seems like it might move to the right. Here's what this last update looks like:

    Let us know if this will work, or if you'd like further updates.

  • Profile Image

    Answered by cands on September 30, 2014 at 09:25 PM

    Hi

    Sorry I just realised I had put right instead of left, I placed around with the cs and added some margin and padding code and it now looks fine in IE and FF.

    Take Care

    D