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
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="[email protected]" 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.
Go through the following stuff and collect more related information –
24 Replies to “How To Make Simple Responsive Form Using CSS/HTML”
HI!
I have a website about betting tips and prediction, and I want to put a form like this on a page, and the result occur on another page not on my e-mail.
Thanks!
this is really a nice step for the learner you gave to us.. thnanks!
Hello! sultansulahudin,
Your feedback is highly appreciated. Always feel free to use FormGet in future too.
Thanks & Regards,
FormGet.com
You can also join us on :
facebook : https://www.facebook.com/FormGet?ref_type=bookmark
twitter : https://twitter.com/hashtag/formget
google plus : https://plus.google.com/+Formget
How to make it go into my email then ???
I tried out this form and when I displayed on IE it does not look as pretty as on google chrome.
I figured it out. You need to have .
Thanks..
Hello David,
Thank you so much for looking into it.
The issue will be fixed soon.
Hi !!!!!!!!! this is only form design but it is unresponsive
Hi MD Aquib,
Thank you for looking into it !!
Keep reading our other blog posts.
Hi,
I tried the above code in crome browser, when i zoom the page to its maximum i found that heading content is exceeding the form layout.
I’d likie to thank you for the efforts yyou have put in writing this blog.
I am hoping to check out the same high-grade
blog posts by you in tthe future as well. In fact, your creative writing abilities has motivated me to get my own blog now 😉
Hello a6 envelopes,
That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
Regards,
FormGet Team
Hello,
I have a question regarding the reciver of the massage how do i know where it ends up and where do i change it?
Besides that, really nice work.
Hello Lukas,
Thanks for your appreciation.
In the above tutorial the form is not coded for any specific purpose, so if you wish to save your form data in to the database you need to follow up this post : https://www.formget.com/insert-data-in-database-using-php/
And to use mail function in your form that will send the mail after form submission use this tutorial guide :
https://www.formget.com/send-an-email-on-form-submission-using-php/
Hope that will help you.
Regards,
FormGet Team.
I can get the text input field to look exactly as you have shown but how do you suggest styling a drop-down menu to look like the others?
Thanks,
Hector
how does the form know where to send message? nothing in code telling it what email to send to.
This is awesome…
This site works well. Have to learn lot in this
i want to place a responsive comment box on my website.
I need to tell you that where is the source code of PHP. If it is available than it will be very good.Overall nice form you made. Thanks.
Thank you for a very nice read, there has to be anyway I could subscribe to your
content?
The demonstrating teamwork skills article is absolutely
the most effective i have read today.
excellent blog I’m a massive footy fan from Sweden
Thank you. This was helpful