Double Column Form, Get One Field to Span Three Rows on One Side

https://form.jotform.com/73007548796164

 

For whatever reason, I'm able to have a field that spans a few rows on the left but can't make it work on the right, like I need it to. I have this form nearly done, I would like the "comments" to be in the right row, just as it appears now.  I have forced it with a "float:right" and thought that would do but when it is on the phone, the "comments" appears first and I need it to be last.   The attached screen shot is exactly as it should be.  Any advice?

I am not sure if I have understood your question correctly. I did check your form and found that the fields are being displayed correctly as per your screenshot but the the only difference is with "Phone" field which appears first.

Do you mean to say that you want to display the "Name" field first and the "Phone" field in the last row?

I cloned your form and I was able to drag the phone field and moved it in the last row. Please take a look at the following cloned form and see if it works as expected:  https://form.jotform.com/73013043187953

Hope this helps.

Do get back to us if you meant to ask something else.

Thanks for the fast response…what I want to do is swap the two columns.  The rows as they appear are correct.  The “Comment” field appears to be in a right column, but is actually forced over with CSS, it’s actually sitting on the left . I could only get it to sit in the left column with dragging and dropping, otherwise it took up a whole row and would not span the three rows.  This forcing it over solution was okay, but when it goes to mobile, the “Comments” field appears first, because it is, and I wasn’t the name etc to be first.  You an see the “float:right” class I’m using to force it from left to right column.

Thanks for the fast response…what I want to do is swap the two columns. The rows as they appear are correct. The “Comment” field appears to be in a right column, but forced over with CSS, it’s actually sitting on the left . I could only get it to sit in the left column with dragging and dropping. This forcing it over solution was okay, but when it goes to mobile, the “Comments” field appears first, because it is, and I wasn’t the name etc to be first. You an see the “float:right” class I’m using to force it from left to right column.
Respectfully,
Hannah Wallace
Website Programming | Website Design | Creative Direction
Northwaydesigns.com
...

Here's what you need to do to achieve your requirements:

First — Remove the following CSS codes in the form:

.form-line-column.form-col-1 {

 float: right;

}

Second — Move the phone, name, and email fields to the next line. (Enable the "Move to a new line" option of the fields)

Third — Position the Comments textarea field at the after the email field (but not after the Captcha field. It should look like the image below after.

And lastly — add the following CSS codes to your form.

#id_7 {

    position: absolute;

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

#id_7 {

    position: relative !important;

}

}

Here's a clone version of your form where I have applied the changes above: https://form.jotform.com/73014867690967

Result in mobile (iPhone 6S+):

If you have other questions or concerns regarding this, please feel free to contact us again anytime.

ha ha!  I wish everyone gave me videos.  Very badass of you.  I'm getting some fantastic customer service from you guys today.  How can I fill out a customer review?

This worked brilliantly, but why'd we have to work around things like that?  I would like to understand for the future what was in my way. 

Thank you for your kind words :) You may email your feedback to our manager - Jeanette@jotform.com.

The issue is that our form layout is not designed for such forms where the fields are not equal in their sizes (e.g. when one field should have multiple fields on the right/left side). Since the field is placed on the same line with the previous field, we apply the CSS to fix this.