Create your own Responsive Web Form without using any framework

I am sure there are many examples or samples on building or creating simple Responsive Web Form. But I guess this will be really useful for every front end web developer out there, know why? In this example I have transformed most complicated web forms approaches into responsive, which is compatible in Mobile or Tablets with different resolutions available out there and most important browser compatible.

Pure CSS Responsive Web Form Framework from WittySparks
Pure CSS Responsive Web Form Framework from WittySparks

In this responsive web form framework I just want to keep this form as simple as possible & want to keep this clean and more like an handy framework so that any one can apply colors or skin it easily with just minor tweaks of CSS. As you know we have to use media queries to achieve the browser and device compatible.

Here is a quick steps of what I have done:

  1. Created a basic HTML
  2. Created a DIV based grid to place labels and inputs (As I want to avoid tables as far as possible)
  3. Then created basic styles for form elements and
  4. Changed the media queries as desired

Have a look at this demo first and then can check the below styles and html to achieve the same:

Example 1 | Example 2 | Download

Here is the HTML Code:

<form name="wittysparks" id="ws" method="post" action="#">
<div class="divform">
	<div class="r">
		<div class="c"><label for="Firstname">First Name:</label><input id="Firstname" name="Firstname" type="text" /></div>
		<div class="c"><label for="Middlename">Middle Name:</label><input id="Middlename" name="Middlename" type="text" /></div>
		<div class="c"><label for="Lastname">Last Name:</label><input id="Lastname" name="Lastname" type="text" /></div>
		<div class="c"><label for="Email">Email:</label><input id="Email" name="Email" type="text" /></div>
	</div>
	<div class="r">
		<div class="c"><span class="fheading">Membership</span><input id="rdiobox" name="rdiobox" type="radio" value="Premium" /><label for="rdiobox">Premium</label> <input id="rdiobox2" name="rdiobox" type="radio" value="Free" /><label for="rdiobox2">Free</label></div>
		<div class="c"><span class="fheading">Newsletter</span><input id="chkbox" name="chkbox" type="checkbox" value="Checkbox" /><label for="chkbox">Yes / No</label></div>
		<div class="c"><label for="Telephoneno">Tel:</label><input id="Telephoneno" name="Telephoneno" type="text" /></div>
		<div class="c"><label for="DOB">D.O.B:</label><input id="DOB" name="DOB" type="text" /></div>
	</div>
	<div class="r">
		<div class="c"><label for="Occupation">Occupation:</label><input id="Occupation" name="Occupation" type="text" /></div>
		<div class="c"><label for="Country">Country:</label><select name="Country" id="Country"><option selected="selected">U.S</option><option>India</option></select></div>
		<div class="c"><label for="City">City:</label><select id="City" name="city"><option selected="selected">New York</option></select></div>
	</div>
	<div class="r">
		<div class="c frwd"><label for="Comments">Comments:</label><textarea id="Comments" name="Comments" rows="3"></textarea></div>
	</div>
	<div class="r">
		<div class="c"><input name="button" type="submit" value="Submit" /></div>
	</div>
</div>    
</form>

Below is the CSS code I have come up with to achieve this responsive web form:

body{ font:normal 12px/25px Arial, Helvetica, sans-serif}
.divform{display:table;border-collapse:collapse}
.divform .r{display:table-row}
.divform .c{display:table-cell;padding:5px 0px;vertical-align:middle}
input[type="text"], select, label{height:30px}
input[type="text"], select, textarea, label, input[type="submit"]{margin:0 5px}
input[type="text"], select, textarea{padding:5px;width:96%;border:1px solid #CCC;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);border-radius:4px}
input[type="submit"]{margin-top:15px;background-color:#F5F5F5;color:#444444;border:1px solid rgba(0, 0, 0, 0.1);padding:5px;font-weight:bold;box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);border-radius:4px;background-color:#F5F5F5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat:repeat-x}
input[type="radio"], input[type="checkbox"]{margin:0 0 0 2%;padding:0;vertical-align:middle}
input[type="text"], select, textarea, .divform, .divform .r, .divform .c, form{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}

/* iPads (portrait and landscape) */
@media only screen and (min-width:480px) and (max-width:1024px){
body{ font:normal 16px/30px Arial, Helvetica, sans-serif}
.divform, .divform .r, .divform .c{display:block}
.divform .r{clear:both}
.divform .c{width:50%;float:left;padding-left:10px;padding-right:10px}
.divform .c:nth-child(2n+3){clear:left}
label, .fheading, input[type="submit"]{margin-left:0;text-indent:0}
input[type="submit"]{padding-left:20px;padding-right:20px}
textarea, input[type="text"], select{width:100%;margin:0}
input[type="radio"], input[type="checkbox"]{margin:0 5px;padding:0;vertical-align:middle}
.ver2 .c{width:35%}
.ver2 .c:nth-child(2n+2){width:65%}
.c.frwd{width:100%;}
.c.frwd textarea, .c.frwd input[type="text"], .c.frwd select{width:100%}
.ver2 .frwd.c:nth-child(2n+2){width:100%}
}

/* Smartphones (portrait and landscape) */
@media only screen and (max-width:480px){
body{ font:normal 16px/30px Arial, Helvetica, sans-serif}
h1{margin:0 0 20px 0}
label, .fheading, input[type="submit"]{margin:0;text-indent:0}
.divform, .divform .r, .divform .c{display:block}
.divform .r{clear:both}
input[type="text"], select, textarea{width:100%;margin:0}
input[type="radio"], input[type="checkbox"]{margin:0 2%}
input[type="submit"]{width:100%;margin-top:20px}
}

/* Only Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select{text-indent:5px;line-height:24px}
}

Hope this helps and saves lot of valuable time for many front-end web developers out there.

Why not share your opinion about this and let us know your valuable feedback or any suggestions or comments to enhance this further, would love to hear from you all.

  • wel_de_bob

    It’s a really nice example but since it relies on code it is still a template or mini framework type of approach though. Since you’re talking about ‘saving lot of valuable time for front-end web developers’ you should give this app a try: http://www.coffeecup.com/osx/web-form-builder/

    The app helps building responsive web forms using a drag and drag approach

  • http://www.wittysparks.com/ Sravan Kumar

    CoffeeCup Web Form Builder looks amazing – sure I would give it a try! – Thanks for the share and the one which I have built is a kind of custom framework which is quite flexible to use across any existing or new application.

  • Vivekanand

    This helps me a lot, thanks for sharing…

  • bill

    sravkum,

    Email me…. i have a starbucks giftcard for you!!

    Thanks for the from!