Format the form like on this PDF form

  • esimmons77
    Asked on February 21, 2018 at 7:16 PM

    I am trying to format my online application to look like my paper application and i just can get it right. 

    I need to create row ( side by side) inside of ( up and down)


    any suggestions. I have tried shrinking the fields but i still cant get a good flow.

    I have attached the file i am trying to recreate. I have also submit this file have it fallible but  jot form couldn't do it.

    Jotform Thread 1392677 Screenshot
  • Elton Support Team Lead
    Replied on February 21, 2018 at 9:19 PM

    Those are probably just plain text or image that's why it can't be converted into a fillable PDF form.

    Anyway, to get the fields side by side, you just have to shrink them. You need to adjust the width of the field if they don't fit on the same line. Also, some of the fields are already grouped into one so you don't need to create them individually like the full name field and the address field. However, if you want to achieve the same format shown in the image, use the textbox field (Short Text Entry) for the names and addresses so you can separate break them into different lines.

    In addition, you might want to inject this CSS codes to your form to reduce the spacing between the shrunken fields as well as make the field label width to auto.

    .form-label-left, .form-label-right, .form-label-left.form-label-auto, .form-label-right.form-label-auto {

        width: auto !important;

        padding-right: 10px;

    }

    .form-line {

        padding: 12px 12px;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here's my demo form: https://form.jotform.com/80511226180950

    We also have a widget where you can write text along with text boxes. This one will also help.

    https://widgets.jotform.com/widget/narrative_fields

    If you need further assistance, let us know.