Jump to content

Form Blocks: Multiple Columns

Recommended Posts

  • 2 weeks later...
Posted
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? 

Screen Shot 2021-09-29 at 3.42.50 PM.png

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

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

Posted
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?

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

  • 2 weeks later...
  • 2 months later...
Posted
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?

  • 2 weeks later...
Posted

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

Posted
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?

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

  • 5 months later...
  • 4 months later...
Posted
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 3 months later...
Posted

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?

Posted
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

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

Posted
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?

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

  • 2 weeks later...
Posted (edited)
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 3 weeks later...
Posted
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

Posted
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 2 weeks later...
Posted

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

Posted
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.