3 Column Form

Site URL: http://chameleon-koala-6et9.squarespace.com

Password: Test098

Hey, I've been up for hours trying to make this work to no avail. I've looked at several different threads on this forum and videos explaining how to move form fields side by side or make 2 columns in a form block, but cant find anything on creating 3 columns with 2 rows.

I want 3 form fields side by side with even spacing spanning the entire container.
 

I'm banging my head on the wall at this point.

Try this and adjust from 4 to 3

https://forum.squarespace.com/topic/202215-how-do-i-display-form-field-options-vertically-in-multiple-columns/?do=findComment&comment=501302

@Ziggy thanks, been tinkering with it for the last 20 minutes but cant seem to get it to work. Changed 4 to 3 but not sure how to adapt the rest of it.

Tried a few different suggestions still cant seem to get this to work. Would a code block with a html form and css be a better option?

So after 3 days of trying to figure this out I've resorted to chatgpt which has given me the following:

Example Layout:

1. First Row:

   • Pickup Option | Pickup Date | Pickup Time

2. Second Row:

   • Dropoff Option | Dropoff Date | Dropoff Time

/* Container for the form */
.sqs-block-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns layout */
  grid-template-rows: auto auto; /* 2 rows */
  gap: 15px; /* Space between form fields */
}

/* Style for each form field */
.sqs-block-form .form-field {
  display: flex;
  flex-direction: column;
}

/* Make sure all form elements fit nicely in their containers */
.sqs-block-form .form-field input,
.sqs-block-form .form-field select,
.sqs-block-form .form-field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Label styling if needed */
.sqs-block-form .form-field label {
  margin-bottom: 5px;
}

/* Specific row styling */
.sqs-block-form .form-field:nth-child(-n+3) { /* First row */
  grid-column: span 1;
}

.sqs-block-form .form-field:nth-child(n+4) { /* Second row */
  grid-column: span 1;
}

and when that didnt work,

/* General container styling for the form */
.sqs-block-form .form-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns layout */
  grid-template-rows: auto auto; /* 2 rows */
  gap: 15px; /* Space between fields */
}

/* Ensure all form fields are styled properly */
.sqs-block-form .form-field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Adjust the width and box-sizing of input elements */
.sqs-block-form .form-field input,
.sqs-block-form .form-field select,
.sqs-block-form .form-field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Additional styling for labels if needed */
.sqs-block-form .form-field label {
  margin-bottom: 5px;
}

/* Target specific form fields to adjust placement */
.sqs-block-form .form-field:nth-of-type(1) {
  grid-column: 1 / 2; /* First column, first row */
}

.sqs-block-form .form-field:nth-of-type(2) {
  grid-column: 2 / 3; /* Second column, first row */
}

.sqs-block-form .form-field:nth-of-type(3) {
  grid-column: 3 / 4; /* Third column, first row */
}

.sqs-block-form .form-field:nth-of-type(4) {
  grid-column: 1 / 2; /* First column, second row */
}

.sqs-block-form .form-field:nth-of-type(5) {
  grid-column: 2 / 3; /* Second column, second row */
}

.sqs-block-form .form-field:nth-of-type(6) {
  grid-column: 3 / 4; /* Third column, second row */
}

For some reason these are not having any effect on the form. What am I doing wrong here?

We are getting closer and closer. This is the updated CSS and a screenshot. The issue now is getting the form fields to span evenly throughout their container.

/* Apply grid layout to the field list with equal columns */
.field-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  grid-gap: 20px; /* Adjust space between columns and rows */
  width: 100%; /* Make sure the form spans full width */
  max-width: 100%; /* Prevent extra spacing issues */
}

/* Ensure form items fill their grid column */
.field-list .form-item {
  width: 100%; /* Ensure form items take up full grid column width */
  box-sizing: border-box; /* Include padding in the width */
  display: flex;
  flex-direction: column;
}

/* Ensure input and select fields fill the width of their containers */
.field-list .form-item input,
.field-list .form-item select,
.field-list .form-item textarea {
  width: 100% !important; /* Force form fields to take up the full width */
  max-width: 100% !important; /* Prevent width restriction */
  box-sizing: border-box; /* Include padding and borders in the width */
}

/* Add padding-right to form fields to prevent icons from overlapping */
.field-list .form-item input[type="date"],
.field-list .form-item input[type="time"] {
  padding-right: 35px; /* Space for icons */
}

/* Fix icon alignment for date and time fields */
.field-list .form-item input[type="date"]::after,
.field-list .form-item input[type="time"]::after {
  content: ''; /* Clear content */
  position: absolute;
  right: 10px; /* Place icon at the right edge */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Prevent icon from blocking clicks */
}

/* Ensure the icon containers are properly positioned */
.field-list .form-item .V_Vn949803b27Isii7L5, 
.field-list .form-item ._BwTzEKXntIXK8NbW0zx {
  position: absolute;
  right: 10px; /* Place icon on the right inside input */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Mobile responsiveness: Stack fields vertically on small screens */
@media (max-width: 768px) {
  .field-list {
    grid-template-columns: 1fr; /* Stack form fields on small screens */
  }
}

@ishfeesh Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to span the form fields evenly throughout their container.

.form-wrapper .form-item.date .PRfyw4cpXBkmq1g_zhLJ, .form-wrapper .form-item.date span.form-input-effects {
    max-width: 100% !important;
    width: 100%;
}

.form-wrapper .form-item.time .JprGHzCdwebdCM1bwlew, .form-wrapper .form-item.time span.form-input-effects {
    max-width: 100% !important;
    width: 100%;
}

That works! Thank you @Lesum for the finishing touches. What a trip this has been, appreciate the help from everyone. I have to say extremely surprised by the interaction with chatgpt spitting out code that nearly got me there. 

@ishfeesh I just want to give you a heads-up that the auto-assigned selectors that look like random character sequences (for example JprGHzCdwebdCM1bwlew and PRfyw4cpXBkmq1g_zhLJ) aren't "safe" to use.

In other words, they aren't stable and will change without warning. This means that, at some point in the future, this CSS will stop working and will need to be edited manually to update the selectors.