Member Avatar for kevindougans

Screen_Shot_2022-02-18_at_19_31_27.jpg

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;

}
Edited by kevindougans
  • 3 Contributors
  • 6 Replies
  • 212 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Dani
1234simiabbasi commented: yes +0

Dani AI

Generated

Brief summary and approach tied to the thread: is trying to force a Squarespace form onto a single horizontal row; rightly pointed out that the visible solution is to make the field container a horizontal flex row, but Squarespace often places the submit button outside that container which makes a pure-HTML fix tricky. Below are practical, robust CSS rules plus a small DOM-move fallback (for Squarespace pages where the button sits outside the field list). These preserve input sizing, prevent overflow, and add a responsive stack for small screens.

A compact CSS recipe (drop into the site CSS — selectors may need adjusting to match your theme):

.form-wrapper .field-list {
  display: flex;
  gap: 10px;
  align-items: center;
}

.form-wrapper .field-list .form-item,
.form-wrapper .field-list .field {
  flex: 1 1 0;
  min-width: 0; /* critical so items can shrink inside flex */
  box-sizing: border-box;
}

.form-button-wrapper {
  flex: 0 0 auto;
  margin-left: 6px;
}

.form-wrapper .field input,
.form-wrapper .field select {
  width: 100%;
  box-sizing: border-box;
}

/* mobile fall-back */
@media (max-width: 640px) {
  .form-wrapper .field-list { flex-direction: column; gap: 8px; }
  .form-button-wrapper { width: 100%; }
}

If the submit button is outside the .field-list and you cannot edit the HTML, use a short JS snippet in Footer Code Injection to move it into the list after load (update selectors to match your markup):

<script>
document.addEventListener('DOMContentLoaded', function(){
  var list = document.querySelector('.form-wrapper .field-list');
  var btn = document.querySelector('.form-button-wrapper');
  if(list && btn && !list.contains(btn)) list.appendChild(btn);
});
</script>

Troubleshooting notes and cautions: the min-width: 0 on flex children is often the missing piece when fields refuse to shrink. If Squarespace CSS has stronger selectors, increase specificity or use !important sparingly. Test across breakpoints so the form stacks on phones. Keep labels and aria attributes intact for accessibility when changing layout. This complements ’s guidance while giving a practical fallback for Squarespace structure limits.

Recommended Answers

All 6 Replies

Member Avatar for 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>
Member Avatar for 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

Member Avatar for 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!

Member Avatar for 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.

commented: thanks very much, i'm making progress although not quite got where i want yet :) +4
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.