The Awesome Responsive Form

Developer
Daniel
Size
2,377 Kb
Views
14,168
  1. The Awesome Responsive Form Previews
  2. The Awesome Responsive Form HTML Codes
  3. The Awesome Responsive Form CSS Codes

How do I make an the awesome responsive form?

Yea, hoourrayyyy It's just a responsive and a awesome form. What is a the awesome responsive form? How do you make a the awesome responsive form? This script and codes were developed by Daniel on 04 September 2022, Sunday.

The Awesome Responsive Form Previews
IQ Test

The Awesome Responsive Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Awesome Responsive Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="envelope">
<form action="" method="post">
<header>
<h2>The Awesome Responsive Form</h2>
<p>Fill it out. Drag the corners. Enjoy the ride!</p>
</header> <p></p>
<label>Your Name</label>
<input name="name" placeholder="Mr. Form" 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.mrform.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>

The Awesome Responsive Form - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:400);
input[type=text]{color:#444;}
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { margin:0; padding:0; font-family: 'Open Sans Condensed', sans-serif;
}
div#envelope{ width: 55%; margin: 10px 30% 10px 25%; padding:10px 0;
}
form{ width:70%; margin:4% 15%; /*just for markup during dev.*/ background:gainsboro;
}
header{ background-color: grey; text-align: center; padding-top: 12px; padding-bottom: 8px; margin-top: -11px; margin-bottom: -8px; color: aliceblue;
}
/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{ margin-bottom: 20px; margin-top: 10px; width:100%; padding: 15px; background-color: #efefef;border:0;color:#444;
}
input[type=submit]{ margin-bottom: 20px; width:100%; padding: 15px; background-color: grey;border:0px; color: #fff; font-size:15px; cursor:pointer;
}
#submit:hover { background-color: dimgrey;}
textarea{
width:100%;
padding: 15px;
margin-top: 10px;
border:1px solid #efefef;
margin-bottom: 20px;
resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: transparent;
}
div#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}
@media screen only and (max-width:1200px)and(min-width: 601px;){ div#envelope{ width: 80%; margin: 10px 30% 10px 11%; }
}
@media only screen and (max-width:600px) and (min-width:351px) { body{background-color:#444;} 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%; }
}
@media screen only and (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%; }
}
The Awesome Responsive Form - Script Codes
The Awesome Responsive Form - Script Codes
Home Page Home
Developer Daniel
Username deeman
Uploaded September 04, 2022
Rating 3
Size 2,377 Kb
Views 14,168
Do you need developer help for The Awesome Responsive Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel (deeman) Script Codes
Name
A Pen by Daniel
Sitemap for footer
Dropdown Menu
Simple Responsive Navigation,
Box w. images v0.1
Tabelldata-TTSTAT-2
Tabelldata-TTSTAT
Gridwork
Subleveled Menu - Responsive and simple
RWD Table v1.0
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!