Inline Form Fields/Button

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. 

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.

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

//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!

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. 

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.

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

//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

Let me know how it works on your site

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

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?