CSS help - inline newsletter signup form on squarespace

[kevindougans]

I'm trying to make a form all in one line instead of over multiple lines/height.

It can be seen on https://grapefruit-crocodile-hdl3.squarespace.com/ (pwd: contagency)

It's supposed to look the attached image, any pointers appreciated.

I've got this far, so far:

form {
  display: flex;
}

.form-item.field.email, .form-item.field.select, .form-button-wrapper.field.submit {
 display: inline-block;
 min-width: 30.8%;
}

.form-wrapper {
opacity: 0.6;
background-color: #000000;
  width: 100%;
}

.form-wrapper .field-list .field  {
  background-color: #ccc;
  border: 1px solid #000000;

}

[Dani]

Hi,

I wasn't able to properly reproduce the image above because the HTML on the page at squarespace does not ask me for a Zip code, and the HTML is not set up conducive to what you're trying to accomplish. However, you'd want to do something like this:

<div style="display: inline-flex">
    <div id="email">
        <div>Email address</div>
        <input ...>
    </div>
    <div id="zip">
        <div>Zip Code</div>
        <input ...>
    </div>
    <div id="state">
        <div>State</div>
        <input ...>
    </div>
    <div id="button">
        <button ...>
    </div>
</div>

[rproffitt]

Also:

oceanic

[kevindougans]

Yes inline-flex is what I've been trying the last couple of hours and your example you've posted works exactly as I would like, just can't get that to work in squarespace. Moving to wordpress for more flexibility in next couple of weeks but need to get this working on Squarespace asap. Squarespace doesn't do things conducively when it comes to forms (for instance - squarespace has a form-wrapper class that wraps around the whole form except the submit button, as well as it doesn't let you give elements an ID) making simple tasks like this very difficult

[Dani]

Working with the existing HTML you have:

• Get rid of display: inline on .form-item.field.email, .form-item.field.select, .form-button-wrapper
• Move the button to be inside the <div class="field-list clear"> element
• Make the <div class="field-list clear"> element have display: inline-flex

Good luck!

[Dani]

Basically what it comes down to is you want to have an outer element set to inline-flex, and then each direct child element within it will be horizontal.

[Dani]

Let me know if you have any other questions. I'm really good with CSS but I have never used Squarespace before so I don't understand the limitations you're working with. However, I'm also pretty good at figuring out a way to get CSS to do what I want given a confined HTML structure.