Form Blocks: Multiple Columns

@tuanphan hmm that didn't appear to work. I am using a plugin for the lightbox though, so that might be why (https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin)

@tuanphan I have a similar issue to the user above (happyscone). I have a long form which utilizes a few checkboxes which have many options.

Is there a way to make these collapse into columns so the scroll is not as long? 

On 9/30/2021 at 2:44 AM, jacquelinejbf said:

@tuanphan I have a similar issue to the user above (happyscone). I have a long form which utilizes a few checkboxes which have many options.

Is there a way to make these collapse into columns so the scroll is not as long? 

Can you share link to page in screenshot? We can check easier

On 9/21/2021 at 11:11 PM, happyscone said:

@tuanphan hmm that didn't appear to work. I am using a plugin for the lightbox though, so that might be why (https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin)

Sorry. I didn't see notification. Do you still need help?

@tuanphan I'm going to live with it - think it is fine the way it is, thanks!

On 4/6/2021 at 2:06 AM, 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.

@Lou_90_ Did you ever find a solution to this? I'm in the same boat now. Maybe it is something @tuanphan can help with?

10 hours ago, OliviaEarle said:

@Lou_90_ Did you ever find a solution to this? I'm in the same boat now. Maybe it is something @tuanphan can help with?

Can you share link to page where you added form?

Hi!

I've been trying to lay out an application form with fields horizontally across the page and have been able to use the resources in this thread to make some progress (thank you @tuanphan!) but it's not quite there. And knowing me, I'm probably doing it the hard way.

If you look at the page you can see what I'm trying to do. Any advice is greatly appreciated!

URL: https://www.missoulaems.com/employment-application    pw: soclose

1 hour ago, tkwestlie said:

Hi!

I've been trying to lay out an application form with fields horizontally across the page and have been able to use the resources in this thread to make some progress (thank you @tuanphan!) but it's not quite there. And knowing me, I'm probably doing it the hard way.

If you look at the page you can see what I'm trying to do. Any advice is greatly appreciated!

URL: https://www.missoulaems.com/employment-application    pw: soclose

Can you describe in detail Or send form desired layout?

@tuanphan Is there a way to get check box fields to be aligned vertically next to text fields? Thank you in advance! 🙂

https://cymbals-vanilla-6kcj.squarespace.com/config/design 
password : 1234

1 hour ago, izza.weihaas said:

I was wondering if it's possible to adjust my form fields to look like this design

I have some code that may get you part of the way there.

Please see the following.

Let us know how it goes.

Hello! @tuanphan I've found some CSS from a couple of threads for you, but I think I need a combo I haven't found yet. I'd love to have my (rather long) form have the checkboxes and the radial buttons in 2 columns to reduce the length. 

Can you please help?

7 hours ago, Alight_Jess said:

I think I need a combo I haven't found yet.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

@tuanphan Can you help with a similar issue? Using some of the code you already shared in these comments (thank you so much!), I've managed to split a very long form into 2 columns, but they are very tight and I'd like a wider gap between the two columns.

This is the code for that (I think) -  grid-column-gap: 50px;  but the gap is not moving or changing when I adjust the px??

Here is the site:   https://sealion-lime-c8k2.squarespace.com/.  Psswd: nativeSF

Thanks for any help you can provide!

On 2/21/2023 at 12:23 AM, VeeBee said:

@tuanphan Can you help with a similar issue? Using some of the code you already shared in these comments (thank you so much!), I've managed to split a very long form into 2 columns, but they are very tight and I'd like a wider gap between the two columns.

This is the code for that (I think) -  grid-column-gap: 50px;  but the gap is not moving or changing when I adjust the px??

Here is the site:   https://sealion-lime-c8k2.squarespace.com/.  Psswd: nativeSF

Thanks for any help you can provide!

Which form? I don't see it on both homepage & contact pages?

@tuanphan Thank you for taking the time to respond. Here is the link to that page with the 2-column form. I'm wanting to create more of a space/gap between the 2 columns.

https://sequoyah-fund-draft.squarespace.com/credit-builder

PSWD:  nativeSF

On 2/20/2023 at 9:23 AM, VeeBee said:

I've managed to split a very long form into 2 columns, but they are very tight and I'd like a wider gap between the two columns.

Use column-gap.

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

  div#block-efac3f7b22e3a3c792ce .form-wrapper .field-list {
  
    column-count : 2;
    column-gap : 8em;
    
    }

  }

The column-gap property currently has some limitations.

@creedon Worked perfectly! Now I know how to apply it to other form blocks. Thank you so much! 

3 hours ago, VeeBee said:

Now I know how to apply it to other form blocks.

If you find yourself in need of mixed columns please see the following.

On 3/7/2021 at 7:26 AM, tuanphan said:

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 @tuanphan

Thanks for this code, it worked for my site as well.

One additional question, how can I keep the first name & last name on their own 2 columns though?

Site is https://gold-elk-b24f.squarespace.com/contact
Password: Lamine

Thanks, Sarah

11 hours ago, SarahSWD said:

how can I keep the first name & last name on their own 2 columns though?

You could not use the Name field and use two text fields. There is a downside in that SS would not treat the two text fields as a name unit anymore.

It might be possible with JavaScript to restructure the form, possibly maintaining the name relationship, but would probably not be easy.

@creedon Can I ask you one more thing on this multi-column form issue?  How can I keep it 2 column on desktop but only 1 column on mobile? It's looking pretty funky on the mobile view right now, lol.

4 hours ago, VeeBee said:

How can I keep it 2 column on desktop but only 1 column on mobile?

I tried to look at your site but the password no longer works.

In general you would wrap the CSS in a media query to turn off the effect at a breakpoint.

@creedon   Sorry about that, the password is:  810acquoni

On 4/8/2023 at 8:22 AM, VeeBee said:

How can I keep it 2 column on desktop but only 1 column on mobile?

It looks like you were on your way to solving the issue on your own. I have updated my code post.

I notice that you have repeated rulesets for the same form. I think this will cause you issues. CSS rulesets are processed in order from top to bottom and the effects are cumulative. Also the last property value pair wins.

Let us know how it goes.