Flexbox contact form

[810311]

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

[benanamen]

@810311

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?

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

[SamA74]

@810311

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…?

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.

[Gandalf]

@810311

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?

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.

[PaulOB]

@Gandalf

It’s a technique called Float Labels

I have an example here:

@810311

and make them disappear

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.

[810311]

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…

[810311]

@810311

Can you take a look when you get a chance…

please see updated test link in post #1

[PaulOB]

@810311

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

[810311]

@PaulOB

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

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…

[PaulOB]

@810311

; however translateY seem to have no effect…

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

TranslateY is working fine.

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

[Ray.H]

@PaulOB

TranslateY is working fine.

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.

[810311]

@Ray.H

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

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

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…

[Ray.H]

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

[PaulOB]

@Ray.H

Isn’t that is 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.

[810311]

@Ray.H

I think you are missing the required attribute

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…?

[Ray.H]

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

[810311]

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…?