Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Form Blocks: Multiple Columns


headersandvolleys

Question

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 post
  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-colu

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

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) In

Posted Images

20 answers to this question

Recommended Posts

  • 0
10 minutes ago, StudioRhodes said:

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

studiorhodes.net

password: services

where form?

Link to post
  • 0
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%;
}
}
}

 

Link to post
  • 0

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 post
  • 0
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>

 

Link to post
  • 0

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!

Link to post
  • 0
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?

Link to post
  • 0
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. 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0

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.
Link to post
  • 0
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.

Link to post
  • 0

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 post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0
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;
}
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...