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

    My form isn't displaying properly. (shrinked fields)

    Asked by mjgroup on November 17, 2014 at 12:29 PM

    Even though I have shrinked the fields to align next to one another i.e. three in a row. Whilst they look correct in the form builder, when I preview the form or embed it in my website it displays differently. See attached screenshots.

     

    Also what is the upload limit for files with a paid plan?

     

    Thanks in advance!

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

    Screenshot
    Form Builder preview next builder
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on November 17, 2014 at 01:16 PM

    Let me do some testing and I'll get back to you with a solution.

  • Profile Image

    Answered by Ben on November 17, 2014 at 03:42 PM

    Hi,

    My manager asked me to post this to you since she needed to step out.

    It seems that there are several different things wrong in the jotform when previewed, but this should fix everything on your jotform.

    There are 3 steps to do.

    1. Go to Full Name field and change the label to align to top instead of auto. Nothing will change in the way it looks, but will place certain code that tells it to stay above instead of going to the left as before.

    To do this, first click on Full Name field so that you get the toolbar buttons as above, then click on Label Align button, followed by Top option.

    Now second step is to place the email field on a new line otherwise it will not look OK.

    To do this, right click on E-Mail field and click on Move to a new line option.

    Now the 3rd step is to inject a bit of CSS code that will make it all fall in place in preview:

    li.form-line.form-line-column {
        padding-left: 36px;
    }
    li.form-line.form-line-column.form-col-1, li.form-line.form-line-column.form-col-2, li.form-line.form-line-column.form-col-3, li.form-line.form-line-column.form-col-4, li.form-line.form-line-column.form-col-5, li.form-line.form-line-column.form-col-6 {
        float: left;
        width: 33%;
    }
    #id_4 {
        text-align:center;
    }
    #last_23, label[id="sublabel_last"] {
        margin-left: 30px;
    }

    Now I just want to let you know that if you are going to be making any changes to the form using Form Designer, depending on the change the styles above might need to be updated to make everything fall in line again.

    Do let us know how it goes, but if you would like to skip all the changes you can just clone this jotform instead: http://form.jotformpro.com/form/43206354282955

    Best Regards,
    Ben