Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Reputation Activity

  1. Love
    jmaasberg reacted to Beyondspace in Inline Form Fields/Button   
    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
  2. Like
    jmaasberg got a reaction from Beyondspace in Inline Form Fields/Button   
    Hey All,
    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!
  • 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.