Enhance Required Form 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.

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!