Form Blocks: Multiple Columns

I would like to have three columns in my form, under "Coffee Shop Supplied", so that users can input information for multiple roasts within one form submission.

For example:

Roastery Name *

Coffee Shop Supplied *

Column One.      Column Two.       Column Three.

1. Roast Name    2. Roast Name    3. Roast Name

1. Origin(s)            2. Origin(s)           3. Origin(s)

1. Process(es)      2. Process(es)     3. Process(es)

1. Notes                 2. Notes                3. Notes

How do i do this?

can you share link to form on your site?

I'd like to know how to do this as well, I have a long contact form, more of an application. I'd like to format it to be 2-columns.

@tuanphan any solution for this? I would like 2 columns for my form.

studiorhodes.net

password: services

10 minutes ago, StudioRhodes said:

@tuanphan any solution for this? I would like 2 columns for my form.

studiorhodes.net

password: services

where form?

@tuanphan on the contact page. There are 2 columns for the first and last name which happens automatically but I would like to have the email & address sections continue in the 2 column format

On 7/26/2020 at 4:51 PM, StudioRhodes said:

@tuanphan on the contact page. There are 2 columns for the first and last name which happens automatically but I would like to have the email & address sections continue in the 2 column format

 

Add to Home > Design > CUstom CSS

/* contact page form block 2 columns */
@media screen and (min-width:768px) {
div#page-section-5f07395227b2617951b252a0 {
.form-item.field.email {
    float: left;
    width: 49%;
    margin-right: 2%;
}
.form-item.field.email+div {
    float: left;
    width: 49%;
}
}
}

Hey @tuanphan thanks for all your amazing answers!

I'm finishing a site in Brine family and this piece of code didn't work. My client wants the name and e-mail to be side by side Can you give me a light on this matter?

The link is https://clarita.squarespace.com/contato and password: velas2020

In this same form I'm trying to exchange the day for the month - since I'm in Brazil - but the code I found is not responsive 😞

Would you give me a hand? Thanks in advance!!

Bia

On 7/29/2020 at 11:23 AM, bia.tabosa said:

Hey @tuanphan thanks for all your amazing answers!

I'm finishing a site in Brine family and this piece of code didn't work. My client wants the name and e-mail to be side by side Can you give me a light on this matter?

The link is https://clarita.squarespace.com/contato and password: velas2020

In this same form I'm trying to exchange the day for the month - since I'm in Brazil - but the code I found is not responsive 😞

Would you give me a hand? Thanks in advance!!

Bia

 

 

Add Code Block under Form > paste this code

<style>
  @media screen and (min-width:641px) {
  .field-list>div:nth-child(-n+2) {
    width: 49%;
    float: left;
    padding-right: 1%;
}
  }
</style>

Hey @tuanphan! Thanks for all your answers, so great!

I'm hoping to split a longer form into two columns.

Providing a link here: https://alpaca-arugula-ynsl.squarespace.com/careers

PW: AMR

Thanks so much!

On 3/1/2021 at 3:46 AM, CivSav said:

Hey @tuanphan! Thanks for all your answers, so great!

I'm hoping to split a longer form into two columns.

Providing a link here: https://alpaca-arugula-ynsl.squarespace.com/careers

PW: AMR

Thanks so much!

You mean split form to 2 columns or split checkbox option?

On 3/1/2021 at 11:34 PM, tuanphan said:

You mean split form to 2 columns or split checkbox option?

Split the single form into two columns. 

On 3/5/2021 at 4:46 AM, CivSav said:

Split the single form into two columns. 

Try adding to Design > Custom CSS

/* form 2 columns */
@media screen and (min-width:768px) {
div#block-124b2428c6da85002eaa .form-wrapper .field-list {
    display: grid;
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 20px;
}
}

Hi, I've created a 2 column form I'm happy with, but the text input boxes aren't clickable and I can't figure out why. Website is https://aldgate.squarespace.com/ and I've used the following code.

On 4/6/2021 at 3:06 PM, Lou_90_ said:

Hi, I've created a 2 column form I'm happy with, but the text input boxes aren't clickable and I can't figure out why. Website is https://aldgate.squarespace.com/ and I've used the following code.

#collection-60544c6fb43c651398810c58{

@media screen and (min-width:991px) {

.form-item.field.text {

float: left;

width: 48%;

margin-right: 2%;

}

}

}

 

Heeelllp. Thanks.

Hi. What is access passwor?

--

I guess you need to set clear: left for some items.

Hey @tuanphan thank you for all your assistance!

The enquiry form currently has 3 dropdown fields. I'm looking to place the fields in 2 columns. Here are the site details:

hen-salamander-js64.squarespace.com
Password: Sapphire

Would you be able to assist me? Thank you very much!

On 4/13/2021 at 6:26 AM, MilosK said:

Hey @tuanphan thank you for all your assistance!

The enquiry form currently has 3 dropdown fields. I'm looking to place the fields in 2 columns. Here are the site details:

hen-salamander-js64.squarespace.com
Password: Sapphire

Would you be able to assist me? Thank you very much!

Hi. Add to Design > Custom CSS

/* Dropdowns column */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1618199905329_4306 .select {
    width: 30% !important;
    float: left;
}
div#block-yui_3_17_2_1_1618199905329_4306 .select:nth-child(6) {
    clear: left !important;
    width: 100% !important;
}
}

On 4/13/2021 at 6:26 AM, MilosK said:

Hey @tuanphan thank you for all your assistance!

The enquiry form currently has 3 dropdown fields. I'm looking to place the fields in 2 columns. Here are the site details:

hen-salamander-js64.squarespace.com
Password: Sapphire

Would you be able to assist me? Thank you very much!

also, some other problems. Do you need to fix these?

Site URL – https://hen-salamander-js64.squarespace.com/

1. (Tablet-Homepage-01) Increase form width?

2. (Tablet-Homepage-02) Increase text width?

3. (Overlay Menu) Remove burger icon?

Amazing!! Thank you @tuanphan Assistance with those issues would be much appreciated.

14 hours ago, MilosK said:

Amazing!! Thank you @tuanphan Assistance with those issues would be much appreciated.

Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* banner text width */
[data-section-id="6073b289ddcd1d74a7b3ba8f"] .content {
    width: 100% !important;
}
/* form width */
[data-section-id="6073b289ddcd1d74a7b3ba8f"] + section .content {
    width: 90% !important;
}
/* remove burger */
.burger-box {
    visibility: hidden;
}
}

Amazing!! Thank you @tuanphan 

@tuanphan I am also trying to figure this out and can't seem to solve it by looking at the other solutions you provided. I am placing a form in a lightbox that contains quite a few long lists of checkboxes. It would be great to consolidate these more so it's not such a long scroll.

Any help is appreciated! Scroll down to the footer and tap on "Modeling"

https://cone-tuna-x47f.squarespace.com/ pass: haircare

On 9/16/2021 at 11:03 AM, happyscone said:

@tuanphan I am also trying to figure this out and can't seem to solve it by looking at the other solutions you provided. I am placing a form in a lightbox that contains quite a few long lists of checkboxes. It would be great to consolidate these more so it's not such a long scroll.

Any help is appreciated! Scroll down to the footer and tap on "Modeling"

https://cone-tuna-x47f.squarespace.com/ pass: haircare

Hi,

You mean Modeling in Footer Links

Make 2 columns for these checkboxes?

• Length
• Color
• Density
• Type
• Texture
• Condition

on both Desktop & Table only, no mobile.

Is this right?

@tuanphan yes thats sounds right! desktop only makes sense

21 hours ago, happyscone said:

@tuanphan yes thats sounds right! desktop only makes sense

Add to Design > Custom CSS

/* Model lightbox */
@media screen and (min-width:992px) {
[id*="model-lightbox"] .checkbox:nth-child(n+7) .option:nth-child(n+2) {
    width: 40% !important;
    float: left !important;
}
}