Today is a  mobile-internet era. Users love to surf net on their cells.

So, it’s been a hike in mobile web users year by year. Therefore, more focus is required to make your websites mobile-friendly.

In this aspect, your form should be user friendly on small screen too. Whether it’s about website login or signup process or completing purchase order, giving good user experience on small screen is the key.


 

Below is our complete code with download and live demo option

create responsive form


You are acquiring traffic on your site from different devices. So, it’s best to design your forms compatible for all devices.

You can have a basic idea that shows how to create responsive form for your site.

Here is a codes for creating responsive form:

Note : we have used special link tag in which media is used to define the screen size for a particular css, that will be implemented in that.

<link rel="stylesheet" media="screen and (max-width: Xpx) and (min-width: Ypx)" href="style.css" />

 

Responsive Form Code Details


HTML File – resform.html


<!DOCTYPE html>
<html>
<head>
<title>FormGet Responsive Form</title>
<!-----Including CSS for different screen sizes----->
<link rel="stylesheet" type="text/css" href="responsiveform.css">
<link rel="stylesheet" media="screen and (max-width: 1200px) and (min-width: 601px)" href="responsiveform1.css" />
<link rel="stylesheet" media="screen and (max-width: 600px) and (min-width: 351px)" href="responsiveform2.css" />
<link rel="stylesheet" media="screen and (max-width: 350px)" href="responsiveform3.css" />
</head>
<body>
<div id="envelope">
<form action="" method="post">
<header>
<h2>Example of Responsive Form</h2>
<p>This is my form. Fill it out. It's Awesome.</p>
</header>
<label>Your Name</label>
<input name="name" placeholder="Ashley Peterson" type="text" width="100px;">
<label>Email Id</label>
<input name="email" placeholder="yourname@gmail.com" type="text">
<label>Contact Number</label>
<input name="contact" placeholder="123456789" type="text">
<label>Website URL</label>
<input name="website" placeholder="www.yoursite.com" type="text">
<label>Message</label>
<textarea cols="15" name="message" placeholder="Message" rows="10">
</textarea>
<input id="submit" type="submit" value="Send Message">
</form>
</div>
</body>
</html>

 

CSS Files –

Below is our HTML styling in which we have used different css files that works based on screen sizes.

CSS for screen size greater than 1200px

1. responsiveform.css

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
/* With these codes padding and border does not increase it's width and gives intuitive style.*/

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
padding:0;
font-family: 'Roboto Slab', serif;
}
div#envelope{
width: 55%;
margin: 10px 30% 10px 25%;
padding:10px 0;
border: 2px solid gray;
border-radius:10px;
}
form{
width:70%;
margin:4% 15%;
}
header{
background-color: #4180C5;
text-align: center;
padding-top: 12px;
padding-bottom: 8px;
margin-top: -11px;
margin-bottom: -8px;
border-radius: 10px 10px 0 0;
color: aliceblue;
}

/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
}
input[type=submit]
{
margin-bottom: 20px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
background-color: #4180C5;
color: aliceblue;
font-size:15px;
cursor:pointer;
}
#submit:hover
{
background-color: black;
}
textarea{
width:100%;
padding: 15px;
margin-top: 10px;
border:1px solid #7ac9b7;
border-radius:5px;
margin-bottom: 20px;
resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: #4697e4;
}

 

2. responsiveform1.css

CSS for screen size (max-width:1200px and min-width:601px)

div#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}

 

3. responsiveform2.css

CSS for screen size (max-width:600px and min-width:351px)

h2{
font-size:16px;
}
p{
font-size:14px;
}
label{
font-size:12px;
}
input[type=submit]{
padding:5px;
}
input[type=text]{
padding: 8px;
}
div#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}

 

4. responsiveform3.css

CSS for screen size (max-width:350px)

input[type=submit]
{
padding:4px;
font-size:12px;
}
input[type=text]{
padding: 8px;
}
label{
font-size:12px;
}
h2{
font-size:15px;
}
p{
font-size:12px;
}
div#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}

 

Conclusion:

It’s good to put forms that adapt to varying display sizes, on desktops, laptops, tablets and phones. This was all about making your form responsive with HTML/CSS. Keep reading our other blog posts for getting more coding tricks.