Can I make the top of a form 3 columns, the middle 2 columns, and the bottom 1 column?

  • Profile Image
    barbwra
    Asked on November 14, 2017 at 12:39 PM

    https://form.jotform.com/73155633484157


    When ever I try to move fields, they go where I don't want them to go and displace other fields.

  • Profile Image
    John_Benson
    Answered on November 14, 2017 at 01:36 PM

    I cloned your form and I edited it, please check if this is what you're trying to achieve: https://form.jotform.com/73174775928976

    Here's a screenshot:

    1510684198esrz.png

    If yes, you can clone the edited form by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    In the edited form, I have removed the custom CSS code to your form to fix the issue of the field positioning. 

    1510684449css322.png

    You can use this guide for field positioning: https://www.jotform.com/help/90-Form-Field-Positioning

    Let us know if you need further assistance. Thank you.

  • Profile Image
    barbwra
    Answered on November 14, 2017 at 06:43 PM
    You achieved making the top section into three columns, but as I mentioned in my question, doing anything to the fields jumbles them up into the wrong positions. It took me a very long time to get them positioned the way I want them in the top section (the bottom two-thirds is not even close, but I’m just trying to get the top one-third right at this time). What you did is correct regarding the number of columns, but if you look at my own original uncloned form I want to copy the second column as is and paste it into the third column - without moving the fields around and putting them in the different places, which is what happened with your cloned version. Can you just copy my second column and paste it as is into the third column?
    I think you are offering a good product, but there seem to be several problems with it, not the least of which is that some users, like myself, are not familiar with how to use css. Your are very quick and helpful in your support, and your product, i.e., software that allows users to input information into a form and then print it or submit it, is very much needed. I hope you can work out the kinks, or I hope I can learn to use your software correctly. I’m getting very discouraged. For instance, why does it move fields around if you move one field? Why can’t a field be resized easily (drag handles would be nice)?
    I apologize for complaining, but I am about to give up. I’m willing to learn how to use new software, but I think yours is either very buggy or very difficult to learn. Do you think you can help me get this form up and running, or is it just beyond me?
    Thank you,
    Barbara
    ...
  • Profile Image
    BDAVID
    Answered on November 14, 2017 at 07:48 PM

    Would you share screenshot to describe what you want to? We can make it possible with CSS injection. When you say "Can you just copy my second column and paste it as is into the third column?", are you referring to this:

    1510706768here.png

    Please open the link of this thread(link: https://www.jotform.com/answers/1298617) and upload your screenshots to illustrate better:

  • Profile Image
    barbwra
    Answered on November 14, 2017 at 09:43 PM
    Yes. That’s exactly what I mean, except that you have too much space between the first and second columns. They should be evenly spaced and fit on one page for printing. (By the way, I plan to change the 1’s to 2’s in the third column.) That’s just the top third of the form. If you can get that, I will probably need help with the bottom two thirds. But maybe there’s hope. Thank you very much for your help!

    Here’s my best attempt at a screen shot.

    ...
  • Profile Image
    EltonCris
    Answered on November 15, 2017 at 02:31 AM

    We still could not see your screenshot. Please don't attach it on email, upload it directly in your thread here https://www.jotform.com/answers/1298617

    Is this something that you want https://form.jotform.com/73181180717960?

    If you like this changes, you can clone the above form. 

    You can also apply it to your form, here's what I did:

    1. I group the fields by using section collapse.

    Make sure all the collapse has the following status.

    2. Inject the following CSS codes to the form to automatically create a 3 column layout on the fields under that group.

    li#cid_26 + .form-section>li {width: 33.3% !important;}

    3. Preview the form to see the changes.

    Thanks

  • Profile Image
    barbwra
    Answered on November 15, 2017 at 08:37 AM

    Here's what I am looking for.1510752924cs mem app fixed.png

  • Profile Image
    Chriistian
    Answered on November 15, 2017 at 09:54 AM

    I am currently checking your form. Please give me some time to come up with a solution.

  • Profile Image
    Chriistian
    Answered on November 15, 2017 at 09:58 AM

    Please check if this form is what you want. https://form.jotform.com/73183569962975

    15107578542017-11-15_2253.png


    If so, please inject the following CSS to your form.


    .form-col-1, .form-col-3, .form-col-5, .form-col-7, .form-col-9 {

        width: 33.33%;

    }


    .form-col-2, .form-col-4, .form-col-6, .form-col-8, .form-col-10 {

        width: 66.67%;

    }


    .form-line-column .form-input-wide > input {

        width: 90%;

    }


  • Profile Image
    barbwra
    Answered on November 15, 2017 at 11:31 AM

    No quite. I want the second column next to the first as you have it, but I want a third column that looks exactly like the second column. Please see below.1510763403cs mem app fixed.png


  • Profile Image
    barbwra
    Answered on November 15, 2017 at 11:43 AM
    Not quite. I do want the first wo columns the way you’ve done them, but I want the second column copied AS IS and pasted into a third column to the right of the second column, making a total of three evenly spaced columns. I did send you a screenshot of how it should look. Did you receive it? Whenever I try to follow instructions that you send me, the fields get switched around.

    ...
  • Profile Image
    EltonCris
    Answered on November 15, 2017 at 11:48 AM

    Thanks for providing a screenshot. I've fixed my demo form according to your preference https://form.jotform.com/73181180717960.

    You may feel free to clone it.

    CSS codes used:

    #stage .form-all .form-line-column,

    .form-all .form-line-column{

        width: 33.3% !important;

    }

  • Profile Image
    barbwra
    Answered on November 15, 2017 at 12:43 PM
    Thank you. That is exactly what I was looking for for the top of the form!
    ...
  • Profile Image
    barbwra
    Answered on November 15, 2017 at 01:43 PM
    Never mind. I fixed it. Thanks.

    ...
  • Profile Image
    barbwra
    Answered on November 15, 2017 at 02:43 PM
    I think we’re almost there and I appreciate all your help. I just have two more questions:
    1. Is it possible to just have a Print button without a Submit button?

    2. In the checkbox field, is it possible to spread the list items over three columns across the page? I want this to print on one page rather than two.

    Thank you!
    Barbara
    ...
  • Profile Image
    jonathan
    Answered on November 15, 2017 at 03:36 PM

    Hi Barbara,

    The next questions were about a different feature. I created a separate thread for them here

    https://www.jotform.com/answers/1299840

    https://www.jotform.com/answers/1299842

    We will attend to them shortly.