Float Submit Button Next to a Form Field

Site URL: https://fiberseal.squarespace.com

Is it possible to make a form field shorter and float the submit button next to it?  Trying to do this in my footer.

PW: orangedoor

On 7/2/2021 at 8:35 PM, abcohen1605 said:

Site URL: https://fiberseal.squarespace.com

Is it possible to make a form field shorter and float the submit button next to it?  Trying to do this in my footer.

 

PW: orangedoor

try

@media only screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1625230745440_16307 form {
      display: flex;
      align-items: center;
      width: 100%;
}
  #block-yui_3_17_2_1_1625230745440_16307 form .field-list {
    flex: calc(85% - 70px);
  }
  
  #block-yui_3_17_2_1_1625230745440_16307 form .form-button-wrapper {
    flex: 70px;
    text-align: right;
  }
  #block-yui_3_17_2_1_1625230745440_16307 form .form-button-wrapper input {
    flex: 70px;
    text-align: right;
    margin: 6px 0 4px;
  }
          
}
        

yes! amazing

I would love the same for https://www.danki.me/ . Appreciate your help!

This:

Instead of this:

1 hour ago, michaell said:

I would love the same for https://www.danki.me/ . Appreciate your help!

 

This:

Instead of this:

First remove space on the right and make the form's column larger

@media only screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1625560086694_5541 form {
      display: flex;
      align-items: center;
      width: 100%;
}
  #block-yui_3_17_2_1_1625560086694_5541 form .field-list {
    flex: calc(85% - 250px);
  }
  
  #block-yui_3_17_2_1_1625560086694_5541 form .form-button-wrapper {
    flex: 250px;
    text-align: right;
  }
  #block-yui_3_17_2_1_1625560086694_5541 form .form-button-wrapper input {
    flex: 70px;
    text-align: right;
    margin: 6px 0 4px;
  }
  #block-yui_3_17_2_1_1625560086694_5541 .form-wrapper .field-list .field {
    margin: 0;
  }       
  #block-yui_3_17_2_1_1625560086694_5541 [name="email"] {
    line-height: 3em;
  }
}

On 7/4/2021 at 8:13 PM, Beyondspace said:

try

@media only screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1625230745440_16307 form {
      display: flex;
      align-items: center;
      width: 100%;
}
  #block-yui_3_17_2_1_1625230745440_16307 form .field-list {
    flex: calc(85% - 70px);
  }
  
  #block-yui_3_17_2_1_1625230745440_16307 form .form-button-wrapper {
    flex: 70px;
    text-align: right;
  }
  #block-yui_3_17_2_1_1625230745440_16307 form .form-button-wrapper input {
    flex: 70px;
    text-align: right;
    margin: 6px 0 4px;
  }
          
}
        

Hi there! This worked great for my regular Form Blocks Is it possible to do this for a Newsletter Block as well? I've tried altering this code but no luck.

@Beyondspace @tuanphan

On 12/18/2022 at 3:32 PM, PatrickJ said:

Hi there! This worked great for my regular Form Blocks Is it possible to do this for a Newsletter Block as well? I've tried altering this code but no luck.

@Beyondspace @tuanphan

Can you share your URL with the protected password so I can take a look?

8 hours ago, Beyondspace said:

Can you share your URL with the protected password so I can take a look?

For sure!

Site: http://mandarin-vanilla-ss4s.squarespace.com/brick

Password: brick

I check that it works fine now. Have you figured it out?

On 12/20/2022 at 10:47 PM, Beyondspace said:

I check that it works fine now. Have you figured it out?

Oh! Still looking like this for me at most mobile device widths:

3 hours ago, PatrickJ said:

Oh! Still looking like this for me at most mobile device widths:

Try adding to Home > Design > Custom css

@media only screen and (max-width: 767px) {
  #block-2b6877fafb5f55d61849 .newsletter-form-body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #block-2b6877fafb5f55d61849 .newsletter-form-body  .newsletter-form-fields-wrapper.form-fields {
    width: 70%;
  }
  #block-2b6877fafb5f55d61849 .newsletter-form-field-wrapper {
    width: 100%;
    min-width: unset
  }

  #block-2b6877fafb5f55d61849 .newsletter-form-field-element.field-element {
    width: 100%;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

On 12/27/2022 at 5:03 AM, Beyondspace said:

Try adding to Home > Design > Custom css

@media only screen and (max-width: 767px) {
  #block-2b6877fafb5f55d61849 .newsletter-form-body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #block-2b6877fafb5f55d61849 .newsletter-form-body  .newsletter-form-fields-wrapper.form-fields {
    width: 70%;
  }
  #block-2b6877fafb5f55d61849 .newsletter-form-field-wrapper {
    width: 100%;
    min-width: unset
  }

  #block-2b6877fafb5f55d61849 .newsletter-form-field-element.field-element {
    width: 100%;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

You're a champ! Works like a charm! Thanks so much!