• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Technology / Programming / Create your own CSS Responsive Web Form without using any framework

Create your own CSS Responsive Web Form without using any framework

Programming January 22, 2013 by Sravan Kumar Kandagatla

I am sure there are many examples or samples on building or creating a 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 the most complicated web form approaches into responsive, which is compatible in Mobile or Tablets with different resolutions available out there and most important browser compatible.

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 a handy framework so that anyone can apply colors or skin it easily with just minor tweaks of CSS. As you know we have to use media queries to achieve browser and device compatibility.

Here is a quick step 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 a 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.

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
Launch Offer
Rocket.net - Managed WordPress hosting
Rocket.net - Managed WordPress hosting
$1 for first month, $25/month

A highly secured WordPress hosting platform powered by Cloudflare enterprises with customized services for agencies, eCommerce, and small businesses.

  • PageSpeed Guarantee
  • Ultra Secure Platform
  • FREE Migrations
  • Automatic Updates
Try for $1.00 Our Review
We earn a commission if you make a purchase, at no additional cost to you.

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Kim Dotcom takes the dotcom world by storm
Next Post: World slimmest and lightest Sony Xperia Tablet Z is releasing in Japan! »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for Sravan KumarSravan Kumar says

    January 24, 2013 at 8:58 pm

    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.

  2. Profile picture for VivekanandVivekanand says

    January 26, 2013 at 10:20 pm

    This helps me a lot, thanks for sharing…

  3. Profile picture for billbill says

    September 18, 2013 at 11:26 pm

    sravkum,

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

    Thanks for the from!

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure