How to create a 2-column form with Input Fields on the left and plain text on the right?

  • gizzanegri
    Asked on February 17, 2017 at 10:56 PM
    Hello ..

    Can you help me out? 

     I am having a hard time trying to figure out how to  design a form with an Area Text  to the right side of Boxes input texts fields

    I need an sign up form that contain an area text, with 5 paragraphs to the right side of the  input texts fields as showed in the picture

    is that possible?

    If it is..What should i do in order to have this right extra space with text areas for 5 paragraphs with a header

    i would really appreciate your help

    =)How to create a 2 column form with Input Fields on the left and plain text on the right? Image 1 Screenshot 20

    Jotform Thread 1069867 Screenshot
  • Support_Management Jotform Support
    Replied on February 18, 2017 at 6:50 AM

    Hello there! You may approach this in two ways:

    1. No CSS coding:

    Use Form Field positioning (Shrink / Move to a new line) and enable Form Columns. Just go to the ADVANCED DESIGNER to enable columns after shrinking your fields:

    How to create a 2 column form with Input Fields on the left and plain text on the right? Image 1 Screenshot 20

    This would mean that each Input Field on the left will have a corresponding partner Text (HTML) Field on the right.

    Related guides: Form-field-positioning | How-to-position-fields-in-JotForm

    2. Use CSS:

    Build your form as is, and don't worry about styling yet. Add all your fields and a single Text (HTML) Field that will represent the entire right side of your form. Afterwards, position the whole Text Field block using CSS.

    Since your form https://www.jotform.com/70478849138672 doesn't appear to be finished yet, I highly recommend you finish it first. Start with the most important part of the building process (the content).

    Related guide: How-to-Inject-Custom-CSS-Codes 

    Once your form is finished, try any of the suggestions above and if you're stuck on something, don't hesitate to ask.

  • gizzanegri
    Replied on February 19, 2017 at 9:58 PM

    First of all thanks for the answer and support.

    I followed the instructions and i succedd in half of the procces of it

    Now i have an issue and i tried everything to fix it but i couldn't

    The problem is that my content on the left side does not stay beside to the right content

    I think the problem is within the size of the box(?) anyway if it is so i couldnt find a way to resize it, however i'm not sure if the problem is related to the box size

    You can see in the picture that my left boxes are not alligned with the right content

    I tried dragging, resizing the form widht, positioning, alligning...still, the left content does not stay beside to the right content it stays below

    What am i doing wrong? How can i solve this issue?

    I'm asking for help again =)

    Thanks in advance

    LINK TO MHow to create a 2 column form with Input Fields on the left and plain text on the right? Image 1 Screenshot 20

    LINK TO My FORM 

    https://www.jotform.com/build/70478849138672

  • Chriistian Jotform Support
    Replied on February 20, 2017 at 2:01 AM

    Hi,

    In order to fix the positioning of the fields on your form, you need to finish first the content of your form as what my colleague suggested. Then after you have finished the contents, you can now adjust the positioning of the fields by shrinking fields and/or move to a new line from the Advance Properties.

     

    How to create a 2 column form with Input Fields on the left and plain text on the right? Image 1 Screenshot 20

    Let us know if you need further assistance.

    Regards