Hi,
I’m currently working on a project were I got inspired by one of the footers from Design Cloud.
I really love the example inline e-mail subscription form there:
I know it’s currently nothing more then 4 containers, styled to look like a form input.
I’ve spend a couple of hours trying to replicate this with a HTML form but can’t get it to work. When I’m putting any content in another bar, inside a single container, the width will always be trimmed. In addition the flex lay-out responds different.
Here’s a screenshot of two attempts and on the bottom the original one.
Live version here: https://dennishunink.nl/playground/iscout/ .
I’ve added html as similar as possible to the flex structure of the example and styled it the same:
<div class="x-bar-content">
<div class="flex-container x-bar-container"><input type="text" placeholder="input1"></div>
<div class="flex-container x-bar-container"><input type="text" placeholder="input2"></div>
<div class="flex-container x-bar-container"><input type="text" placeholder="input3"></div>
<div class="flex-container x-bar-container"><input type="text" placeholder="input4"></div>
</div>
Css:
.flex-container,
.newsletterContainer1,
.newsletterContainer2,
.newsletterContainer3,
.newsletterContainer4, {
align-items: center;
background-color: rgba(0, 0, 0, 0);
box-sizing: border-box;
color: rgb(153, 153, 153);
display: flex;
flex-basis: 210px;
flex-direction: row;
flex-grow: 1;
flex-shrink: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
height: 47px;
justify-content: center;
line-height: 25px;
min-width: 1px;
padding-bottom: 3.5px;
padding-left: 3.5px;
padding-right: 3.5px;
padding-top: 3.5px;
position: relative;
width: 250.6875px;
z-index: 1;
}
I obviously miss something here and can imagine more people are dealing with the same questions, since the footer is quite inspiring. So by asking this question I hope we can contribute to further awesome form designs as well 
Any advice is more then welcome!