Enhance Required Form Fields with CSS3

Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones.

Enhance Required Fields with CSS3

Today I want to share a little subtle effect with you: enhancing required fields in a form. Many web forms are designed in a minimal way, i.e. by only collecting the most necessary data from users. Just think of sign up forms where you don’t want to make your potential customer leave because there are just too many things he has to fill out. But there are also many forms where additional information is asked and the user is actually willing to or needs to fill optional fields. You can think of an order form or a classifieds form.

Please note: this will only work as intended in browsers that support the respective CSS properties.

The idea is to allow the user to enhance only the required fields so that he has a notion about what fields are actually required. That’s normally done a little * or similar but we want to go a step further and create a little interactive effect for a better visualisation of required fields.

For that we will wrap some form labels and inputs with two divisions that will allow us to apply a variety of effect. The outer wrapper will have an additional class if the field is required (af-required):

<form class="af-form" id="af-form" novalidate>
					
		<div class="af-outer">
			<div class="af-inner">
				<label>Title</label>
				<input type="text" name="title">
			</div>
		</div>
	
		<div class="af-outer af-required">
			<div class="af-inner">
				<label>Name</label>
				<input type="text" name="fullname" required>
			</div>
		</div>
	
	<!-- ... -->

</form>

We’ll take a look the style of Demo 2, which will scale down the non-required fields hence make them disappear. For that, we’ll decrease the height of the other wrapper while we scale down the inner one.

We’ll add a transition to the outer wrapper, define a fixed height and set the overflow to hidden because we don’t want the content to be visible when we decrease the height:

.af-outer {
	overflow: hidden;
	height: 70px;
	box-shadow: 0 1px 0 #f5f5f5 inset;
	transition: all 0.5s linear;
}

For the inner wrapper, we’ll set the transform origin to be “center top” so that we can still see it scaling while we decrease the height of the outer one. Initially the scale is set to 1 (you don’t really have to set that):

.af-inner {
	padding: 15px 20px 15px 20px;
	transform-origin: center top;
	transform: scale(1);
	transition: all 0.5s linear;
}

At the top of the form we have a little button (a checkbox) with the id af-showreq and when we check that button, we will scale down the optional fields. We can use the :not pseudo class to get to our desired elements but you could of course give classes to the optional fields instead and access them directly with the general sibling combinator.

So, we’ll decrease the height of the outer wrappers and scale down and fade out the inner ones:

#af-showreq:checked ~ .af-form .af-outer:not(.af-required) {
	height: 0px;
	visibility: hidden;
}
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner {
	transform: scale(0);
	opacity: 0;
}

Setting visibility to hidden will guarantee that we can tab through the resting fields without passing through the other ones. Here we can’t use display: none because otherwise our transition won’t work.

Hope you enjoyed this tip!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 18

Comments are closed.
  1. wow, really cool effect, thanks a lot for the tutorial
    btw, can you explain the “~” character in those css lines, like #af-showreq:checked ~ .af-form, I’d appreciate it , thanks
    Duc

    • Hey Duc, that’s the general sibling combinator which allows us to “reach” a sibling that doesn’t necessarily come immediately after the first element. The form is not immediately preceded by the checked button. Hope it helps, cheers, ML

  2. I loved the tut! One small suggestion: Add the attribute FOR to the label tags, because they’re not working properly on the form (I click them but the respective field is not selected).
    Thanks for all these innovative ideas, I’ll sure use them! 😀

    • Yes, of course! I forgot those 🙂 Thanks for the correction, cheers, ML

  3. Nice CSS Techniques! very interesting. Subject is a bit moot though when optional fields shouldn’t exist in the same form as required fields. I really like the blurred effect and am going to remember it for future projects!

    • There are actually many forms where it makes sense. Form fields are grouped semantically but some fields don’t need to be filled. Don’t think about typical web form – think about a form for adding a book to a library database… Thanks for your feedback! Cheers, ML

  4. Awesome! It would be great to run a conversion test on a form like this to see if people who clicked required fields only converted at a higher rate.

  5. Mary Lou you are sooooooo creative and think outside the box! would have never thought to use a button for required fields and hide the others your tuts are always spot on with the way that i like to see the web!

  6. Fantastic! I am in love with your tutorials. Great breakdowns… beautiful results… easily utilized! Thank you very much for your time.

  7. Hi Mary

    Really nice idea I like it.

    I don’t think that hiding all completed fields is good as I still think the user should see these fields, but really like the other 2 examples.

    Thanks
    Paul

  8. By the way Mary, would you please also show us how to trigger the custom validation when clicking the submit button?

  9. Hello ,

    This is very nice ..

    Why don’t you show us how to add it to vBulletin 3.8.7