Creating forms in flexbox

Hi guys,

First of all I want to say hi and just let you know that I felt in love in Webflow yesterday, couldn’t sleep till 2am :slight_smile: I was a heavy user of Adobe, from 2 years I’m working on Sketch - which I believed was 100x better than PS in numerous reasons - and now I believe I found a tool than will allow me to create live, hi fidelity designs, with animations, interactions and all that crazy stuff that I had to search in Invision, After effect, Pixate and so on.

Webflow team… you are geniuses, can’t imagine how much work it takes to build such software.

Ok back to the topic.

So I’m trying to create a form like in the attachment in flexbox, but my top level question is: is it worth it?

Oh man, memories, I spent a full night on it the day I discovered Webflow :smiley: And redid in a night what I had done on a new site for 3 weeks, only better, responsive and interactive :smiley:

2 Likes

So true :slight_smile: Just can’t wait to start moving everything here. I so excited I can’t focus :smiley: Like literally making circles in most basic elements :smiley:

@vincent any experience in forms and flexbox?

As for your question.

Flewbox is rad and ultimately we should only use it for layouts.

BUT that’s ok in a world where you can simply tell people to update their browser to the last version, and sometimes their OS too. In the real world, you can’t. Too much energy, too much of things that aren’t your business. In the real world, you cope.

So Flexbox is going to be ruined by older IE browsers and Windows OS. Happens to me all the time.

The layout you’re showing here can be achieved easily without a simgle flexbox declaration or ROW elements. Just Divs with width values and display box properties.

I’d break it down like this:

http://vincent.polenordstudio.fr/snap/qc731.jpg

Like this, will be rock solid.

I use flexbox for my own sites and I just don’t care about people not seeing my pages perfectly. But if I had a ecommerce website I wouldn’t yet. And for my clients, it depends, but I try to avoid it because very often when I use it, I have to change it later.

1 Like

edit: use display:inline-box properties to easily stack divs horizontally.

That’s what I needed, I need remember to double check those browser compatibility, this particular design will need to be bullet proof on older devices… so… no flexbox today :slight_smile:

Thanks @vincent for the hint, that’s exactly how I’ve built it before :heart_eyes: flexbox

Here’s the WIP http://agenteo.webflow.io

That’s great!

Can’t help but give you a web design tip: never use black. For texts, outlines, icons… never use black. Always grey the black. Like #424242 could be you new black.

1 Like

Why is that? Some accessibility issues?

1 Like

It’s subjective. For aesthetic. Screen nowadays are very bright. A complete black on a clear color is… very black, the contrast is very high. It’s more elegant to come up with deep gray and deep colored grays. Try it :slight_smile:

2 Likes