Jump to content

Splitting form into 2 columns

Recommended Posts

Hello. I am attempting to split the form into half with 4 questions on the left and 3 on the right.

This is the code that I have been using but it keeps on messing up the input field text boxes... Anybody knows how to solve this issue?

 


/* form 2 columns */
@media screen and (min-width:768px) {
div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: 2; column-gap:5%;
}
}

 

Screenshot 2024-05-13 at 3.57.42 PM.png

Link to comment
  • Replies 5
  • Views 190
  • Created
  • Last Reply

Top Posters In This Topic

7 hours ago, designbycarolyn said:

Hello. I am attempting to split the form into half with 4 questions on the left and 3 on the right.

This is the code that I have been using but it keeps on messing up the input field text boxes... Anybody knows how to solve this issue?

 


/* form 2 columns */
@media screen and (min-width:768px) {
div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: 2; column-gap:5%;
}
}

 

Screenshot 2024-05-13 at 3.57.42 PM.png

Can you share your URL so I can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
14 hours ago, designbycarolyn said:

Yes! Thank you so much! 🙂

https://ferret-banjo-8wlm.squarespace.com/enquiry
PW: 123456

I have the following custom css to approach with display: flex way

@media screen and (min-width: 768px) {
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: unset;
    column-gap: unset;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item {
    width: 45%;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(2) {
    order:3;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(3) {
    order:5;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(4) {
    order:7;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(5) {
    order:2;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(6) {
    order:4;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(7) {
    order:6;
  }
}

Hope it can help

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
21 hours ago, Beyondspace said:

I have the following custom css to approach with display: flex way

@media screen and (min-width: 768px) {
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: unset;
    column-gap: unset;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item {
    width: 45%;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(2) {
    order:3;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(3) {
    order:5;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(4) {
    order:7;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(5) {
    order:2;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(6) {
    order:4;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(7) {
    order:6;
  }
}

Hope it can help

Oh wow!! Thank you so much! That's such a smart way to rearrange the form items in the list! 
I've pasted the code and it looks great!

I was wondering if you'd know how to move the "email" and "about your biz" question up so that there wouldn't be an empty space between the 1st and 2nd questions, and space between the 3rd and 4th question. The questions do not have to align with the right column.

Thank you so much again! 🙂

Screenshot 2024-05-15 at 9.36.48 PM.png

Link to comment
On 5/15/2024 at 12:12 AM, Beyondspace said:

I have the following custom css to approach with display: flex way

@media screen and (min-width: 768px) {
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: unset;
    column-gap: unset;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item {
    width: 45%;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(2) {
    order:3;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(3) {
    order:5;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(4) {
    order:7;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(5) {
    order:2;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(6) {
    order:4;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(7) {
    order:6;
  }
}

Hope it can help

Hello! Just wondering if you would be able to help with adjusting the empty space between the 1st and 2nd questions, and space between the 3rd and 4th question! 🙂 

 

Screenshot 2024-05-15 at 9.36.48 PM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.