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 to reduce the left margin

    Asked by tvdster on February 17, 2011 at 05:35 AM

    After having tried various form generators, I stumbled onto JotForm. I'm very, very, very happy with how it, works, looks and how easy it is, and I'll be upgrading to the Premium version shortly.

    I was able to figure out everything I needed to know from the clear interface, the Help pages and the Forum. There is, however, one thing I haven't managed yet.

    On my web site, the forms show with an indented left margin. I prefer it to have no margin at all and arrange any margin through the CSS on my site. So, my question is: how do I get rid of the left margin?

    Thanks for any help.

    Best regards,

    Theo 

  • Profile Image

    Answered by DanielGriffin on February 17, 2011 at 07:16 AM

    Hi Theo,

    Forms have a set width (click the Form Width button in the form builder to check it) so your form is probably narrower than the area you have specified in your own page.  (By default the form is wrapped in a class named "form-all" which is already set to zero margin). 

    If it is a CSS issue, you can try to override any CSS by using the Inject Custom CSS feature.
    Thanks,
    Daniel

  • Profile Image

    Answered by tvdster on February 17, 2011 at 08:24 AM

    Thanks, Daniel. I reduced the width and made sure may page was wide enough. Instead of moving to the left, my form moved to the right. So I created a new, blank page. Nothing in there, no css, just the form. I pasted the embed code and the form was centered on the page.

    I then went back to JotForm and clicked on Source Code/Full Source Code. I copied everything and pasted it into my page, directly underneath the code I had just embedded.

    Now my page showed two instances of the same form: one centered and the other one left-aligned.

    The full source code has all the CSS but I would assume it would not differ from the other embedded code. Any idea why this is happening and why the normal embedded code centers when it should left-align?

    Best regards,

    Theo

  • Profile Image

    Answered by DanielGriffin on February 17, 2011 at 08:46 AM

    Hi Theo,

    Could you send the url of the page please?  Then I can take a look for you.

    Thanks,

    Daniel

  • Profile Image

    Answered by tvdster on February 17, 2011 at 08:48 AM

    Right here...

    http://www.theovanderster.nl/formtest.html

  • Profile Image

    Answered by DanielGriffin on February 17, 2011 at 09:03 AM

    Thanks Theo,

    I'm going to clone that form and play with the settings.  i'll get back to you shortly.

  • Profile Image

    Answered by DanielGriffin on February 17, 2011 at 09:34 AM

    Hi Theo,

    Sorry for the delay, I needed to play around with the css a bit. 

    If this is what you are trying to achieve then I have a solution for you. 

    http://www.jotform.com/form/10470231635  (this is a clone of your own form, feel free to use or delete it)

    Inject this CSS into your form

    .form-all {
    margin-left: -10px;
    }

    I'm unsure what's causing the extra ten pixels but this should sort out the alignment for you.

    Best regards,

    Daniel

  • Profile Image

    Answered by tvdster on February 17, 2011 at 10:40 AM

    Hi Daniel,

    Thank you. I appreciate the effort. The solution works. However, it means in order to prevent my forms from centering, instead of inserting one line of code, I now have to insert 70.

    I assume that if I insert

    <script src="//www.jotform.com/jsform/10471619844"></script>

    into my web page, it refers to a CSS file on the JotForm servers. Isn't it possible to add a text-align: left to the .form-all element? Because if all my forms on all my pages are centered, I can only assume it's the same for other users. Hasn't this been an issue before?
    Since creating and embedding JotForms forms is such an easy and smooth process, it would be a shame to have to revert to solutions such as inserting 70 lines of code instead of one.
    For a shorter, but still not too elegant solution, I put my one centering line of code into a div which aligns left en puts a border around the form. The border works fine but the alignment doesn't.
    Here's an example: http://www.theovanderster.nl/contact.php
    Thanks and regards,
    Theo
  • Profile Image

    Answered by DanielGriffin on February 17, 2011 at 11:42 AM

    Hi Theo,

    As far as I know text-align will only work with block level elements, whereas input boxes in a form are inline elements.  Therefore you'll need to use the margin to influence their position.... I might be wrong about this but I've done some reading and it seems to be the case.

    But I'm not sure why you need to add so much code, since you can still just use the <script> tag and point it towards your form -  just ensure that the .form-all block has the modification.  I've done that for your contact form "Theo Contact" ( http://www.theovanderster.nl/contact.php) and it aligns fine - it's only set to zero, if you want it right up against the edge of the browser set it to a negative value. 

    Hope this is what you mean, but if you do still have a problem please get back to me, we're here to help.

    Thanks,

    Daniel

  • Profile Image

    Answered by tvdster on February 17, 2011 at 11:53 AM

    Thank you, Daniel. You've been very helpful. I can definitely live with tweaking the preferences a little. 

    Thanks again and I hope this thread may be useful to other users as well.

    Best regards,

    Theo 

  • Profile Image

    Answered by DanielGriffin on February 17, 2011 at 11:56 AM

    No problem Theo!

    Thanks

  • Profile Image

    Answered by fiveplusdesigns on October 02, 2011 at 12:09 PM

    Had same issue, thanks for posting.