Jump to content

Form Blocks: Multiple Columns

Recommended Posts

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?

 1954870431_FormScreenshot.thumb.png.896bcd1039ddd02228544e62a6b750ee.png

Link to comment
  • 3 weeks later...
  • 6 months later...
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%;
}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 weeks later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment
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;
}
}

image.thumb.png.21e4b19712dc25262b37fdff8c225d13.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

hen-salamander-js64.squarespace.com-tabl

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

hen-salamander-js64.squarespace.com-tabl

3. (Overlay Menu) Remove burger icon?

hen-salamander-js64.squarespace.com-over

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

@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

Screen Shot 2021-09-15 at 9.01.09 PM.png

Link to comment
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

Screen Shot 2021-09-15 at 9.01.09 PM.png

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.