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

    When I create a PDF of my form the question / answer boxes overlap each other so cannot be read

    Asked by NMilligan on February 02, 2015 at 05:57 AM

    I have attached a copy of my form http://form.jotformeu.com/form/50322258896360

    Can you help. Thanks

     

    Nigel

    PDF form PDF Layout CSS overlaping
  • Profile Image

    Answered by Ben on February 02, 2015 at 10:10 AM

    I see Nigel what you mean.

    I believe that this is caused by several styles that you have set on your jotform and would like to recommend to add this CSS code which seems to resolve the issue for me.

    @media screen and (max-width: 550px) {
    .form-line.form-line-column.form-col-2, .form-line.form-line-column.form-col-3, .form-line.form-line-column.form-col-4, .form-line.form-line-column.form-col-5 {
        clear: left;
        padding-left: 38px;
        width: 50%;
    }
    }

    Do let us know how it goes.

  • Profile Image

    Answered by NMilligan on February 21, 2015 at 09:06 AM

    Thanks Ben for your help with this and sorry for delay in getting back to you

     

    I have put the code in and that does appear to have put the boxes in the right place.

     

    The next issue I have is that when you look at the form in preview and design mode boxes are on the same line but when you go to PDF mode then each box moves to a separate line.

    e.g brides name brides phone number and email should all be on one line.

    We print these forms so it doubles or trebles the length.

    I hope you can help with this to

     

    Regards

    Nigel

  • Profile Image

    Answered by raul on February 21, 2015 at 01:19 PM

    Please try to use the following CSS code instead:

    @media screen and (max-width: 550px){
    .form-col-2, .form-col-3, .form-col-4, .form-col-5 {
           padding-left : 1px;
           max-width : 170px;
       }
    }

    However, you should consider that since you want to show 3 fields in one line the space for those fields would be very small.

    Either way, please give it a try and let us know if it works for you.
    Thank you.