Responsive Multi-Column Form

A responsive multi-column form with example media queries for a flexible layout.

Blueprint_ResponsiveMultiColumnForm

View demo Download source

This Blueprint is a simple, responsive multi-column form style that comes with example media queries for creating a switching layout. The form has three columns and depending on the screens size, they are shown in a specific manner. The form elements are 100% width so they adjust to the column size.

The HTML

<form class="cbp-mc-form">
	<div class="cbp-mc-column">
		<label for="first_name">First Name</label>
		<input type="text" id="first_name" name="first_name" placeholder="Jonathan">
		<label for="last_name">Last Name</label>
		<input type="text" id="last_name" name="last_name" placeholder="Doe">
		<label for="email">Email Address</label>
		<input type="text" id="email" name="email" placeholder="jon@doe.com">
		<label for="country">Country</label>
		<select id="country" name="country">
			<option>Choose a country</option>
			<option>France</option>
			<option>Italy</option>
			<option>Portugal</option>
		</select>
		<label for="bio">Biography</label>
		<textarea id="bio" name="bio"></textarea>
	</div>
	<div class="cbp-mc-column">
		<label for="phone">Phone Number</label>
		<input type="text" id="phone" name="phone" placeholder="+351 999 999">
		<label for="affiliations">Affiliations</label>
		<textarea id="affiliations" name="affiliations"></textarea>
		<label>Occupation</label>
		<select id="occupation" name="occupation">
			<option>Choose an occupation</option>
			<option>Web Designer</option>
			<option>Web Developer</option>
			<option>Hybrid</option>
		</select>
		<label for="cat_name">Cat's name</label>
		<input type="text" id="cat_name" name="cat_name" placeholder="Kitty">
		<label for="gagdet">Favorite Gadget</label>
		<input type="text" id="gagdet" name="gagdet" placeholder="Annoy-a-tron">
	</div>
	<div class="cbp-mc-column">
		<label>Type of Talent</label>
		<select id="talent" name="talent">
			<option>Choose a talent</option>
			<option>Ninja silence</option>
			<option>Sumo power</option>
			<option>Samurai precision</option>
		</select>
	<label for="drink">Favorite Drink</label>
		<input type="text" id="drink" name="drink" placeholder="Green Tea">
		<label for="power">Special power</label>
		<input type="text" id="power" name="power" placeholder="Anti-gravity">
		<label for="weapon">Weapon of choice</label>
		<input type="weapon" id="weapon" name="weapon" placeholder="Lightsaber">
		<label for="comments">Comments</label>
		<textarea id="comments" name="comments"></textarea>	
	</div>
	<div class="cbp-mc-submit-wrap"><input class="cbp-mc-submit" type="submit" value="Send your data" /></div>
</form>

The CSS

.cbp-mc-form {
	position: relative;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cbp-mc-form:before, 
.cbp-mc-form:after { 
	content: " "; display: table; 
}

.cbp-mc-form:after { 
	clear: both; 
}

.cbp-mc-column {
	width: 33%;
	padding: 10px 30px;
	float: left;
}

.cbp-mc-form label {
	display: block;
	padding: 40px 5px 5px 2px;
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}

.cbp-mc-form input,
.cbp-mc-form textarea,
.cbp-mc-form select {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	line-height: 1.5;
	font-size: 1.4em;
	padding: 5px 10px;
	color: #fff;
	display: block;
	width: 100%;
	background: transparent;
}

.cbp-mc-form input,
.cbp-mc-form textarea {
	border: 3px solid #fff;
}

.cbp-mc-form textarea {
	min-height: 200px;
}

.cbp-mc-form input:focus,
.cbp-mc-form textarea:focus,
.cbp-mc-form label:active + input,
.cbp-mc-form label:active + textarea {
	outline: none;
	border: 3px solid #10689a;
}

.cbp-mc-form select:focus {
	outline: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #10689a;
    font-style: italic;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #10689a;
    font-style: italic;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #10689a;
    font-style: italic;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #10689a;
    font-style: italic;
}

.cbp-mc-submit-wrap {
	text-align: center;
	padding-top: 40px;
	clear: both;
}

.cbp-mc-form input.cbp-mc-submit {
	background: #10689a;
	border: none;
	color: #fff;
	width: auto;
	cursor: pointer;
	text-transform: uppercase;
	display: inline-block;
	padding: 15px 30px;
	font-size: 1.1em;
	border-radius: 2px;
	letter-spacing: 1px;
}

.cbp-mc-form input.cbp-mc-submit:hover {
	background: #1478b1;
}

@media screen and (max-width: 70em) {
	.cbp-mc-column {
		width: 50%;
	}
	.cbp-mc-column:nth-child(3) {
		width: 100%;
	}
}

@media screen and (max-width: 48em) {
	.cbp-mc-column {
		width: 100%;
		padding: 10px;
	}
}

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 16

Comments are closed.
  1. 4

    is not working in chrome nor internet explorer, but yes it is working on firefox, dont know other browsers but thanks for the blueprint it looks really good.

  2. 5

    Hey Bro’s… It’s white on white font. Just sayin. I’m in chrome. Works fine.

    Mary mary… I like you more and more with this kind of stuff. Long time follower – first time commenter.

  3. 7

    This looks great, thank you very much! Can someone give me a good tutorial on how to actually make this work (send me an email with the results of the form)? I’ve been searching, but can’t figure it out yet.

    • 10

      It absolutely need in designing…
      If u want to show the user where did he/she clicked u can style the element so that it takes a different color or some specific style but not outline! It completely ruin the design!

  4. 11

    I really like this layout, but how would you change the css to properly display checkboxes and option buttons?

  5. 12

    The select boxes looked out of place for me at least.

    Adding the following CSS makes it a little cleaner in webkit browsers I think :)

    .cbp-mc-form select {
    -webkit-appearance: none;
    border: 3px solid #fff;
    border-radius: 0;
    }

    Great work anyway, keep them coming.

    • 14

      Hi Aaron,

      you need to have a processing page where the data will be sent to. in the form tag, set action=”” and maybe set method method=”post”

      Hope you got what me trying to tell you.

      regards

  6. 16

    Dear Mary, Thank you for this. I really like it and will see how i can work with it.

    For those who cant see the select options, please do the follow:

    open the component.css files and at line 42 add the following lines of code. Save and view on browser. Please do confirm that its working on all browers cause i only checked on chrome and FF.

    .cbp-mc-form select option {
    background: rgba(0,0,0,0.3);
    }

    Now, i am trying to figure out how to add a check box and options fields.

    regards

Comments are closed.