Jump to content

Inline Form Fields/Button

Recommended Posts

Hey All,

https://bluewin.squarespace.com/sign-up-demos
PW: 12345

I would like to use CSS to place the submit button for this form shown below in-line with the Zip field and am not sure how to accomplish this. 

image.png.5be73528b464b4ecbb505085ccb363f7.png

I would also like to know how to do something similar with just an email field to display the submit button in-line to the right of the field with a space between, keeping it flush etc.

image.png.a4dcfa04a7cf77140c0437ca13e52149.png

I have the following code applied to forms sidewide at the moment to break up the First/Last fields.

image.png.16d4c4777345076be780147e7ca67877.png

//FORM ADJUSTMENTS//
#page{
.field-list {
display: flex!important;
flex-wrap: wrap!important;
}

/* These will be Full Width*/
.form-item:nth-child(3),
.form-item:nth-child(4),
.form-item:nth-child(5),
.form-item:nth-child(6),{
width: 100% !important;
}

/* These Will Be Beside Each Other */
/* LEFT */
.form-item:nth-child(1),
.form-item:nth-child(3),{
width: 48%  !important;
margin-right: 4% !important;
}
/* RIGHT */
.form-item:nth-child(2),
.form-item:nth-child(4),{
width: 48%  !important;
}
}

Thank you!

Edited by jmaasberg
Link to comment
4 hours ago, jmaasberg said:

Hey All,

https://bluewin.squarespace.com/sign-up-demos
PW: 12345

I would like to use CSS to place the submit button for this form shown below in-line with the Zip field and am not sure how to accomplish this. 

image.png.5be73528b464b4ecbb505085ccb363f7.png

I would also like to know how to do something similar with just an email field to display the submit button in-line to the right of the field with a space between, keeping it flush etc.

image.png.a4dcfa04a7cf77140c0437ca13e52149.png

I have the following code applied to forms sidewide at the moment to break up the First/Last fields.

image.png.16d4c4777345076be780147e7ca67877.png

//FORM ADJUSTMENTS//
#page{
.field-list {
display: flex!important;
flex-wrap: wrap!important;
}

/* These will be Full Width*/
.form-item:nth-child(3),
.form-item:nth-child(4),
.form-item:nth-child(5),
.form-item:nth-child(6),{
width: 100% !important;
}

/* These Will Be Beside Each Other */
/* LEFT */
.form-item:nth-child(1),
.form-item:nth-child(3),{
width: 48%  !important;
margin-right: 4% !important;
}
/* RIGHT */
.form-item:nth-child(2),
.form-item:nth-child(4),{
width: 48%  !important;
}
}

Thank you!

I try the trick related to position

#block-0c9ec2652db859ed33a7  .react-form-contents {
  position: relative;
}
#block-0c9ec2652db859ed33a7 .form-button-wrapper {
  width: 45%;
  float:left;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: var(--form-field-spacing-bottom);
  margin-right: 4%;
}
#block-0c9ec2652db859ed33a7 .form-button-wrapper button{
  height: 40.4px;
  display: flex;
  justify-content: center;
  align-content: center;

}
#block-0c9ec2652db859ed33a7 .form-button-wrapper button [aria-label]{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}
#block-0c9ec2652db859ed33a7 .form-button-wrapper button [aria-label] span:last-child{
  display: none;
}

My testing

image.png.dcff013a721c4e3136006974e602c60f.png

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, Beyondspace said:

I try the trick related to position

#block-0c9ec2652db859ed33a7  .react-form-contents {
  position: relative;
}
#block-0c9ec2652db859ed33a7 .form-button-wrapper {
  width: 45%;
  float:left;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: var(--form-field-spacing-bottom);
  margin-right: 4%;
}
#block-0c9ec2652db859ed33a7 .form-button-wrapper button{
  height: 40.4px;
  display: flex;
  justify-content: center;
  align-content: center;

}
#block-0c9ec2652db859ed33a7 .form-button-wrapper button [aria-label]{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}
#block-0c9ec2652db859ed33a7 .form-button-wrapper button [aria-label] span:last-child{
  display: none;
}

My testing

image.png.dcff013a721c4e3136006974e602c60f.png

Let me know how it works on your site

Wow that worked great, thank you! If it's not too much to ask, how would I go about doing this if there were only an email field? 

image.png.b983edf50d99a68a21b86af5b4fbd97b.png

Link to comment

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.