Regardless of the reason why you want to have two fields per row in your forms, you may have found out the hard way that there’s no current option to get that layout from Squarespace with the native options.
So, once more, we need a bit of CSS to help us out.
In today’s video, I’ll be walking you through what this CSS trick looks like, how to implement it, how to fix potential field alignment issues that usually arise after it, and how you can easily handle mobile.
Let’s get to it!
Video timestamps
00:00 - Introduction
Alright so today we're going to be talking about Form Blocks and how you can have two fields per row. If you've tried to do this before through the native settings you may have noticed that that's not really possible, at least for the time being, so today I wanna show you how you can achieve that with a little bit of CSS.
00:15 - Why Use CSS Grid?
Alright, so the way that I would recommend addressing this is by using CSS Grid. Because, with grid, we're gonna be able to create a column system let's say, sort of like a spreadsheet, where we're gonna be able to decide or determine where each field is going to sit. So, if we create a grid that has two columns then that means that we're gonna be able to tell the browser in which column each field should sit in, and if certain fields should expand the width of both columns.
00:43 - Targeting the Form Fields Container
So in order to start with this we need to first target the whole container that is holding all of our fields. So, looking here through the CSS, we're going to see that we have all of our separate fields in here so we have .form-item .form-item .form-item all of these here .form-item and then we have here .field-list. To keep things simple I'm just going to apply this customization across the entirety of the site. I'm going to be using the .form-block selector. Once I have that there we're going to be adding the one that we just saw – which is called .field-list.
01:23 - Applying CSS Grid to the Form Fields
And like I said we're going to set this to a grid CSS element. Once we do this here you're going to notice that currently we have just a default of a couple of rows created in one single column. If I turn this on, you can see here that we have one big column and then we have 1 row, 2 rows 3, 4, 5, 6, and 7 rows.
01:47 - Creating Two Columns
Now what we're gonna do is we're going to tell the browser that we actually want to have two columns instead of one. The way that we're gonna do that is by using grid-template-columns and then we're going to set this to 1fr 1fr or we could do 50% 50%.
1fr in case you didn't know is one fraction of the space, so in most cases it creates a 50/50 split depending on how you have things set up for the elements inside it, or if there's any other CSS interfering with that fraction. If you want to be absolutely sure or you see things going a little bit weird on your end you can go ahead and use 50/50 instead. In this case we're going to get the exact same result.
02:30 - Choosing Which Fields Span One or Two Columns
Once we have the two columns, you're going to see how things are automatically being split side by side. They're just not exactly the way that we want to set them up.
In order to organize this we have pretty much two options: the first one is to expand all of the fields so that they cover 100% of the space (or the two columns) and then we can specifically target the ones that we want to shrink down to span only one column. Or, we could do it the other way around which is letting the fields be as they are right now and simply target the ones that we want to stretch out into two columns.
Now, this completely depends on the amount of fields that you need to target individually to achieve the look.
03:08 - Expanding All Fields Across Both Columns
In this case, what I'm gonna do is, I'm going to stretch them all out and then I'm going to pick out the ones that I want to have once more in a specific column. So, in order to expand them all we can target them through a common class that these fields share which is called .form-item. If we go back into our HTML you can see that we have .form-item on all of the fields. That's the way that I want to target them so that I can modify them all at the same time.
03:56 - Targeting Individual Fields
To expand them, since we're using CSS grid, we're going to be using the grid-column property and we're going to set this one to span 2, which basically means that that specific element is going to span two columns.
Right now you can see that everything is back in its original place, and it seems like we didn't really do anything in the backend, but we can still see that we have the two columns created.
04:19 - Setting the Email Field to One Column
Now that we have this here it's a matter of targeting those specific fields that we want to shrink down and contain within just one column.
So in order to target them individually, what we can do is rely on another of the classes that these elements have. Here you can see that apart from .form-item, this field which currently is the email field also has a couple of other classes. We have .field we have .email and we have .required. In this case, I'm gonna be using .email to be able to target that specific field and, just as a personal preference, I'm gonna be using here both classes .form-item and .email. This is just going to make it easier for me to be able to read back the code and know exactly what I'm referring to, and also because I feel like the classes that have just one very generic name may be used elsewhere – even though we're targeting things inside the form block. Again, it's just personal preference.
I'm going to set here my .form-item.email which by the way both classes are together because they belong to the same container so no spaces in between. We're gonna be targeting that .form-item.email field and we're going to be setting this back to grid-column: span 1. And once we have that there you can see how now the email field shrunk down to occupy just one column.
05:37 - Setting the Phone Field to One Column
The next thing to do is to make sure that the phone number does the same thing. We're going to also set it to grid-column: span 1. To be able to target that one it's going to be super simple because here again Squarespace gives us the class of .phone for the phone field. This is because I'm using the actual phone field inside the form block, not because of the name that I typed in in here. Anyway, we're going to be grabbing that one and since I'm going to be applying the same modification, I'm simply going to be grouping both selectors and just replacing here .email with .phone. And just like that you can see how now we have email and phone set side by side.
06:24 - Setting the Website and Password Fields
Now let’s do the same thing for website link and for trial password. For website, if I take a look at this field I can see that this one has a class of .website. Again, we're gonna do the same thing: I'm going to group that and I'm gonna target the .website class.
And now, we have that field spanning only one column.
Then, last but not least, if we take a look at the password field this is where things are a little bit different. Because this is a regular text field and I have other text fields in here inside the form, I can't simply use the class of .text to be able to target it, because that means that this one underneath is also going to get modified.
So the way that we're gonna target this one separately is by using its ID instead.
07:12 - Targeting the Password Field by Its ID
You can see that the ID for each of the fields is very specific to that field, so that's the way that we're gonna be able to differentiate between this one and the rest of the form. We're still going to group it, because we're going to apply the same customization. It's just that we're not going to be using a specific class for this, we're going to be using the ID instead.
So, once we have that there you can see how we have everything sitting side by side.
07:43 - Adjusting the Space Between Fields
Now, I’m going to turn off the grid here so that we can see something else.
You're going to notice that once you do this, depending on how you have the settings applied inside your form, you may see that the space in between these two new fields is different than the space that we have up here.
So, if you're like me and you want this to be the same across all of these side by side fields then we're going to be modifying this. Now the way that we can do that is by simply adding a gap value to the original grid that we created. That is simply going to create a little bit of space in between the two columns that we formed.
Let's go ahead and add here a gap at the grid level, and let's say that this one is gonna be I don't know something like 20px. Once we have that there, you can see that we have the space in between those side by side fields… but now the space is bigger than the space that we have here between first name and last name.
So, if you rather have the exact same amount of space that this these two fields have and you also want to make sure that if you alter that space - or your client does – inside the form settings this space also gets modified accordingly, then what I would recommend is instead of simply looking up the value that is being used we use the variable instead. Then, if we change that inside the Site Styles it also changes in our code.
09:08 - Using the Form Spacing Variable
I'm going to grab that and I'm going to substitute that 20px for that variable and now, if I were to modify the settings for the form > form spacing > space between columns, if I start altering the space between the first name and the last name it's also going to be modified for the email and the phone number, and for the trial password and website.
Now, after you make that modification you may encounter two different things that you also need to address.
10:59 - Fixing Alignment on Tablets
One of them you may notice once you're looking at your form on tablets, depending on how long your labels are for each field, where you have your breakpoint applied, and if you have the required text enabled inside your fields.
Here, for example, you can see a very obvious misalignment between this field and the bottom of this other field. In order to make sure that everything stays aligned through the baseline, one of the things that you can do is go back into those fields that we just modified, and then we're going to be adding another CSS grid property that's called align-content. We're going to set this one to space-between.
What this is going to do is that it's going to take any space that is left between the difference of the height from one side of the column and the field from the other one, instead of adding that one underneath the whole thing, is going to add it in between what is inside that element. In this case, it's going to be between the text of the label and the input field down here, so this is where the space is going to sit. And that is going to make everything look aligned.
Now, apart from this, there may be other fields where things are still slightly misaligned and this trick doesn't really help.
11:22 - Aligning Field Labels and Inputs
Here you can notice that the email field and the phone number are just slightly off a couple of pixels. And that has to do with the fact that this required text has a different line height than the one that is applied to the label.
To fix it, what I would recommend doing is going back into your form, and then making sure that here the description is set with a custom style, noticing what the line height is for the descriptions, and then going back into title and making sure that the line height for this element is the same.
So whether you wanna keep this as 1.5 or 2em – at least in my case – you can go ahead and modify the other value. I'm just going to go ahead and increase this to 2em. And that is just going to make sure that my fields are completely aligned, whether that required label is showing up or not.
Now, if I shrink things down, you can see that all of the fields are aligned through the baseline including these two that were originally slightly misaligned.
12:09 - Adjusting the Layout for Mobile
The last thing that I want to address here is mobile.
If you don't want to display two fields side-by-side on smaller devices because it doesn't quite fit with your design, you can simply wrap your whole code inside a minimum width media query so that it only applies from a specific breakpoint all the way upwards.
Here, for example, if I don't want this to apply to smaller devices, but I do want to showcase this on tablets, then what I can do is a @media screen and (min-width: ) of let's say 767px, and that is just going to make sure that on smaller devices I don't have the fields showing up side-by-side. I just have the native stacked look, and only the first name and the last name are presented that way.
Alrighty, that’s all for today!
I really hope that you found this helpful and that you're able to implement it on all of your client projects.
Until next time,
B.
Full code
Custom CSS Window
/*MULTICOLUMN FORM BLOCKS IN SQUARESPACE 7.1*/
@media screen and (min-width: 767px) {
.form-block .field-list {
column-gap: var(--form-field-column-gap);
display: grid;
grid-template-columns: 1fr 1fr;
.form-item {
grid-column: span 2;
}
.form-item.email,
.form-item.phone,
.form-item.website,
#text-b8e39b9a-1d16-4ebc-bf8a-58843d8b114b {
align-content: space-between;
grid-column: span 1;
}
}
}
