Place Two Items Beside Each Other in a Form
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.
#COLLECTIONID{
.field-list {
display: flex;
flex-wrap: wrap;
}
/* 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 */
/* LEFT */
.form-item:nth-child(3) {
width: 48% !important;
margin-right: 4% !important;
}
/* RIGHT */
.form-item:nth-child(4) {
width: 48% !important;
}
}