Form Blocks: Multiple Columns

Could I grab some assistance with this too please? I tried all the codes in this thread but none seemed to work for my site. I'd love to have the form in two columns, maybe black text boxes with white text if possible?

https://ftws-progress.squarespace.com/

password: happy123

Thank you

On 4/12/2023 at 9:15 PM, FTWSGEM said:

Could I grab some assistance with this too please? I tried all the codes in this thread but none seemed to work for my site. I'd love to have the form in two columns, maybe black text boxes with white text if possible?

https://ftws-progress.squarespace.com/

password: happy123

Thank you

Hi,

What should it look like?

3 hours ago, tuanphan said:

Hi,

What should it look like?

I was hoping the last few fields could be to the side of the others rather then one long form. It's no biggie now but I would be interested in knowing how it is done for future use. Thank you 🙂

On 4/15/2023 at 9:18 PM, FTWSGEM said:

I was hoping the last few fields could be to the side of the others rather then one long form. It's no biggie now but I would be interested in knowing how it is done for future use. Thank you 🙂

This or?

Hi @tuanphan we have a client who has a lengthy portion of their form at the top of their landing page, and we would like to make the check box area two columns if possible. Right now, I have that nth-child(8) set to 100%, so it's easier to look at, but let me know how you'd recommend we modify it to achieve the 2 columns. Thank you in advance!  Here is the link below for reference. https://www.consultationschlosserdesign.net/

On 7/10/2023 at 10:37 PM, Dovely2023 said:

Hi @tuanphan we have a client who has a lengthy portion of their form at the top of their landing page, and we would like to make the check box area two columns if possible. Right now, I have that nth-child(8) set to 100%, so it's easier to look at, but let me know how you'd recommend we modify it to achieve the 2 columns. Thank you in advance!  Here is the link below for reference. https://www.consultationschlosserdesign.net/

Add to Design > Custom CSS

/* Homepage form block */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1614627766658_7664 fieldset .option {
    width: 30% !important;
    float: left !important;
}
}

9 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Homepage form block */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1614627766658_7664 fieldset .option {
    width: 30% !important;
    float: left !important;
}
}

 

Thank you! Worked perfectly.

Hi @tuanphan, wondering if this design might be possible...

Site: https://nikkiromansconsulting.squarespace.com/

PW: nikki

Here's what my client is after:

I'm having trouble with the request box on the right hand side - because it's the last field it's in line with the Email field above it, but not sure how (or if it's possible) to get the title in line with the First Name field and get the field size to expand to the bottom in line with the Email field border.

Here's the code I've got so far - I'm wondering if I might need to use columns instead?

@media @desktop {
  #collection-64bcdd2331e41518f158e1d9 {
    .field-list {
      display: flex;
      flex-wrap: wrap;
    }

    /* LEFT */
    .form-item:nth-child(1), .form-item:nth-child(2), .form-item:nth-child(3), .form-item:nth-child(4), {
      width: 48%  !important;
      margin-right: 4%;
    }
    /* RIGHT */
    .form-item:nth-child(5) {
      width: 48%  !important;
    }
  }
}

So this is what it looks like with above code:

15 minutes ago, CassAggett said:

wondering if this design might be possible...

You can probably achieve this with grid. This starts with me showing an effect but I also point to a guide later in the thread.

3 hours ago, creedon said:

You can probably achieve this with grid. This starts with me showing an effect but I also point to a guide later in the thread.

Thanks for the links! I'll have to have a play with it tomorrow.

@creedon hey there, apologies for a slow response, got busy on a couple of other jobs. I'm still challenged to get my forms to be 2 column on desktop but one on mobile. I know you mentioned something about the breakpoint, as well as some other CSS issues, but I'm a bit of a hack at this. Can you help/explain?
https://sequoyah-fund-draft.squarespace.com/
Psswd: 810acquoni*

4 hours ago, VeeBee said:

I know you mentioned something about the breakpoint

Wrap any forms you want to have two columns in a media query.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

You already have some so you can move your rulesets into an existing one or make up new ones.