Simple inline signup forms with flexbox

Written on August 31, 2016

One of the most requested features from designers is a text input that has a submit button beside it. It’s a simple request but has always been a pain to implement.

Designs like this are great in a pixel-perfect world of a visual editor but when it comes to the web there are too many variables at play. Has the user increased their font size? Decreased it? What device are they using? Does our design consider screen width?

Getting the input and the button to appear side by side is trivial. You can float them. You can inline-block them both. You can absolutely position them. There are lots of different paths but they all have the same fallback: magic numbers. At some point you’re going to have to hardcode a special number in your CSS to make it all work (and if your site supports internationalization you’re going to have many magic numbers).

Avoiding Magic Numbers

Have no fear, our friend flexbox is here. Flexbox is a new(ish) CSS tool that allows us to hand over some layout components to the browser. In simple English, what we want to tell the browser is: “Put these two items side by side. Let the button be as big as it needs to be to fit the call to action and let the text input fill the remaining space.” Demo time!

Let’s say we have some markup that looks like this:

<div class="mini-signup-form">
  <input type="email">
  <button>Submit</button>
</div>

We can achieve our goal with a few simple lines of CSS:

.mini-signup-form {
  display: flex;
}

input[type="text"] {
  flex-grow: 1;
}

Bam. Done. Over. Inspect the example embedded below and change the submit button to a longer word and you’ll see everything automagically adjust.