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

  • Profile Image
    NorthwayDesigns
    Asked on October 29, 2017 at 06:16 AM

    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?

  • Profile Image
    ashwin_d
    Answered on October 29, 2017 at 07:31 AM

    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.

  • Profile Image
    NorthwayDesigns
    Answered on October 29, 2017 at 07:37 AM

    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.

  • Profile Image
    NorthwayDesigns
    Answered on October 29, 2017 at 07:43 AM
    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
    ...
  • Profile Image
    Mike_G
    Answered on October 29, 2017 at 12:10 PM

    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;

    }

    1509292338t11_49.gif

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

    1509292811t11_58.gif

    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.

    1509292953t12_01_45.png

    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+):

    1509293255t12_06_43.png


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

  • Profile Image
    NorthwayDesigns
    Answered on October 29, 2017 at 02:53 PM

    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. 

  • Profile Image
    Mike
    Answered on October 29, 2017 at 04:19 PM

    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.

    1509308098record.gif