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

  • mjgroup
    Asked 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!

    Jotform Thread 460424 Screenshot
  • Jeanette JotForm Support
    Replied on November 17, 2014 at 1:16 PM

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

  • Ben
    Replied on November 17, 2014 at 3: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.

    My form isnt displaying properly Screenshot 30

    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.

    My form isnt displaying properly Screenshot 41

    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