Place Two Items Beside Each Other in a Form
** Updated May 6, 2025 **
Forms within Squarespace are a great way to get information from potential clients or allow website visitors to contact you without having your email readily available.
Within Squarespace you can edit a forms colours and fonts but you cannot move the elements around to have more than one element on a line.
In this video, I show you how to place two elements beside each other in a form on Squarespace 7.0 and 7.1. All the code used in the video is provided below.
The following code is used in the video.
#BLOCKID {
.field-list {
display: flex !important;
flex-wrap: wrap;
justify-content: space-between; //spaces them evenly apart
}
/* These will be Full Width*/
.form-item:nth-child(1),
.form-item:nth-child(2),
.form-item:nth-child(5) {
width: 100% !important;
}
/* These Will Be Beside Each Other */
.form-item:nth-child(3),
.form-item:nth-child(4){
width: 48% !important; // in two columns
}
}