Developers are growing much more comfortable using CSS3 properties in major website projects. This has opened a treasure chest full of neat ideas for responsive layouts, page structures, and of course form fields. Advancing CSS3 techniques offer a wide array of solutions for previously complicated page effects.
Recently I stumbled onto a free form PSD which was then rebuilt into an HTML/CSS CodePen. The form itself is very clean, minimalist, and designed to be responsive. This stood out to me as a form you might see on a detailed job application page. I took the original design and expanded the concept to include another row of fields, custom submit button, and a some iOS7 checkbox switches. Read on to learn how to build responsive css3 form fields yourself and take a peek at my live sample demo below:
Live Demo - Download Source Code
Getting Started
First I'm setting up a local HTML5 page with an external CSS file named styles.css. After testing out a few different plugins I chose Switchery - an open source JavaScript library for creating iOS-style ON/OFF switches. Luckily this doesn't require jQuery so all you need to do is download a local copy of the CSS & JS files from the GitHub repo.
<!doctype html> Horizontal Application Form - Template Monster Demo
Moving down into the page body things can seem a little muddied. The page is contained within a div using the ID #wrapper centered and fixed on the page. At the very top I've placed a large header using the font Laila from Google Web Fonts.
Looking at the form itself I don't have any specific HTML attributes other than onsubmit. This will stop the form submission process for my demo since I don't have an actual page to accept the form data. This blank template is perfect for customization so edit the code to whatever best suits your own design.
You'll notice that each row in the form has a different class of divs. The separate sections relate to .col-2, .col-3, and .col-4 respectively. These column widths are generated using CSS to ensure the perfect amount of space for each input field. Each individual div is meant to give the impression of a small block in an application form. The internal labels and input fields are surrounded by grey borders and lots of padding.
At the very bottom .col-submit is a fullwidth container centering the submit button. As the page shrinks smaller each field block will also shrink to maintain the same ratio. Once the page goes below 850px each form field is displayed as a blockline element. This forces each input to have its own line in the form, offering a lot more space to mobile users.
CSS Design
Most of the general page structure was copied and revamped from the original CodePen edit. I've changed the colors and updated how the input fields animate when focused. I think this redesign looks a lot cleaner because it makes the white background feel more like flat paper, rather than digitally textured.
form {
display: block;
margin: 30px;
overflow: hidden;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
font-size: 0;
}
form > div > label {
display: block;
padding: 20px 20px 10px;
vertical-align: top;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
color: #939393;
cursor: pointer;
}
form > div.switch > label {
padding: 16px 20px 13px;
}
.col-2, .col-3, .col-4 {
border-bottom: 1px solid #e4e4e4;
}
form > div > .col-4 {
height: 86px;
}
label > input {
display: inline-block;
position: relative;
width: 100%;
height: 27px;
line-height: 27px;
margin: 5px -5px 0;
padding: 7px 5px 3px;
border: none;
outline: none;
color: #555;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: bold;
font-size: 14px;
opacity: .6;
transition: all linear .3s;
}
.col-submit {
text-align: center;
padding: 20px;
}
label > select {
display: block;
width: 100%;
padding: 0;
color: #555;
margin: 16px 0 6px;
font-weight: 500;
background: transparent;
border: none;
outline: none;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
opacity: .4;
transition: all linear .3s;
}
label > input:focus, label > select:focus {
opacity: 1;
}
Each of the column classes are setup on the div items to describe the size of content. There is no distinction between individual rows so the design implicitly assumes you know how many divs should appear. All of the padding and spacing is applied using label elements attached to the input fields.
I really like this effect because it makes the mobile experience so much easier. Since each label is tied onto the related input you can click anywhere in the div and it'll automatically select the field. Very handy when it comes to mobile users who rely on finger taps.
@media(min-width: 850px){
form > div { display: inline-block; }
.col-submit { display: block; }
.col-2, .col-3, .col-4 { box-shadow: 1px 1px #e4e4e4; border: none; }
.col-2 { width: 50% }
.col-3 { width: 33.3333333333% }
.col-4 { width: 25% }
.col-submit button { width: 30%; margin: 0 auto; }
}
The media queries posted above signify how the individual columns should form. Percent-based widths take into account the full width of the container which makes everything clean and responsive. Using this method all of the basic styles are meant for the responsive theme first. So the media queries actually target how the form will look beyond 850px width.
Some people may find this confusing and it's perfectly fine to rewrite the code if that would help. But other developers prefer working from mobile first and building out because it forces critical thinking. Focusing on the simplest mobile elements will allow the interface to scale up naturally.
Creating the iOS Switches
Assuming you've already included the Switchery CSS and JS files we can move onto the setup. There's not a whole lot of code required and the snippets are available for free on the Switchery website. Since this plugin doesn't use jQuery the code samples are written in plain JavaScript.
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
The JS code might seem a little confusing but hopefully you can understand the basics. With regular JavaScript it's difficult to select all elements without a special loop or function. The elems variable uses .querySelectorAll to match every element using the switch class. In this case I'm using the default class .js-switch.
Then below this variable we have a forEach() loop running through each of the selected elements. Since everything is run manually through JavaScript the code new Switchery must be executed for each checkbox or it will just look like a typical HTML field. So for each element passed into the function(parameter html) we apply the Switchery method.
To learn a bit more about the code check out the Switchery documentation. It has a lot of code snippets which explain how to run the plugin with a single switch, and the purpose of multiple switches on the same page. Of course these switches are not required to get the horizontal form design working on your website. I just think it's a nice little extra feature to expand the design qualities of the interface.
Wrapping It Up
I really like the style of this form because it feels so clean and fits nicely into any page background. You could even try restyling the design to fit on a page with clearer typography, different background color, or even field input icons. Similarly if you want to grab the original PSD by Andrew Coyle check the Dribbble page for a download link. And like always my tutorial code is open source and free to use in any project so be sure to download a copy.
Responsive CSS3 Horizontal Application Form Fields FAQ
CSS is the language for describing the presentation of sites on the Web.
CSS is used to determine the styles of your documents, including design, layout and layout variations on different devices and screen sizes. You can place CSS styles inside the tag of a document with a built-in style sheet, or attach a separate CSS file that will define your styles from the outside.
On most sites, the feedback form fields are no more than 300 pixels wide. A form with a maximum width of 320 pixels will fit a screen of any smartphone without scaling.
Nevertheless, on some layouts, there are forms placed on the entire width of the browser. Their fields are embedded in a line, including the Submit button. Such forms take up a whole section.
There are 3 ways to insert CSS:
- you can use global CSS styles by adding CSS rules to the container of the HTML document;
- you can add a link to an external .css file containing all the necessary rules;
- or, you can use internal CSS to apply rules to a specific element.