Flexbox contact form

Note: this thread is related to Flex item alignment and paragraphs within flex item - #2 by Ray.H

Merry Christmas !

I am trying to build a contact form ( please see mockups - desktop and mobile). Couple of questions…

  1. Is it possible to move/put label names within name, email and text field and make them disappear when user clicks and starts entering data? (same for mobile version…I guess :focus…?)

  2. what would be the proper way to increase vertical spacing between name, email, text field and button?
    I know that padding can be used or margin and may be setting a height on a container…?

Please see updated test link http://buildandtest.atspace.cc/contact.html

That is a very bad design idea. Don’t Do it. It is also an accessibility problem as well as other issues.


Margin is the one to increse the space between the elements.
Padding increases space within the element.
Setting a height is generally a bad idea, keep things fluid.

1 Like

It can be done. It’s a technique called Float Labels. As @benanamen if it’s not done right it can be a bad idea.

1 Like

I have an example here:

Never make them disappear because a user will have no idea when reviewing a finished form if the data entered is the correct data for that field unless they delete the data and get the placeholder back. This is really annoying to the user and a nightmare when autocomplete has added all the data into the wrong fields and you have no way of checking if that is correct or not. :slight_smile:


Hi Paul,

I am trying to implement your example in my contact form. It looks like position: absolute; has no effect even though I put position: relative; on the containers to create positioning context…

Can you take a look when you get a chance…

please see updated test link in post #1

What makes you think that absolute positioning is not working:)

Here’s a screenshot showing the labels position with and without absolute applied.

If you can elaborate on the problem you are seeing I’ll try and help :slight_smile:

Sorry Paul I think I didn’t shape my thought correctly. What I mean is absolute is working yes you are right and I am able to move labels inside inputs by say setting position: absolute top: 20px; however translateY seem to have no effect…

lol I feel like I’m doing all the work here:)

TranslateY is working fine. :wink:

I’ve moved the labels miles away so you can see them clearly being moved.

I think the page displays with the labels in the transformed state, rather than the transform happening on :focus or :valid states.

It’s not behaving like the codepen demo you posted Paul. I tinkered with it last night but couldn’t find the cause.

Sorry Paul to bug you with this…certainly don’t wanna look like I am a lazy *** not doing my part…:grin:

I think Ray is right…but let me review again on my end. May be I am missing something. I deliberately commented out any padding or margins on my end and left only width values and positions relative/absolute and translate…

1 Like

I think you are missing the required attribute, look back at the html structure in Paul’s demo.

<input class="inp" id="lastname" type="text" required>

Isn’t that what determines the :valid state


Yes the required attribute is crucial to that demo.

You can do it without but you’d need to add some js to swap classes etc.


Yes I missed that one. Thanks for catching this Ray. I’ve updated the test link. Can you guys take a look at the code…?

1 Like

It looks to be working fine now, was there something else you were questioning?

1 Like

Oh no…just wanted to make sure my code is ok or may be something could have been done better. Yes it’s working fine on my end too.

I am thinking of adding a blog page to this site. I plan on using WordPress for that. I guess with regards to HTML and CSS I can ask questions here but WordPress ones I guess I should head out to WP forum on this site…?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.