Responsive form design

Developer
Jelmer
Size
4,074 Kb
Views
12,144
  1. Responsive form design Previews
  2. Responsive form design HTML Codes
  3. Responsive form design CSS Codes

How do I make an responsive form design?

Flat responsive form. Design totally based on https://www.ben.nl/sim-only?looptijd=1&bellen=regelmatig&internet=regelmatig. Only uses CSS. And works.. What is a responsive form design? How do you make a responsive form design? This script and codes were developed by Jelmer on 02 December 2022, Friday.

Responsive form design Previews
IQ Test

Responsive form design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive form design</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form> <p>Just a fun experiment. Resize browser for responsexy.</p> <fieldset> <legend>Subscription type</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" /> <label for="radio-choice-1"> Basic <span>You get basic stuff for this one</span> <strong>$5/mo</strong> </label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> Extended <span>This is already a lot more</span> <strong>$10/mo</strong> </label> </fieldset> <fieldset> <legend>Amount of awesome</legend> <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3"> Modest user <span>Affordable and functional</span> <strong>100</strong> </label> <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice-4" /> <label for="radio-choice-4"> Average user <span>Just a right amount of normal</span> <strong>200</strong> </label> <input type="radio" name="radio-choice-2" id="radio-choice-5" value="choice-5" checked /> <label for="radio-choice-5" class="most-chosen"> Active user <span>For active peeps</span> <strong>400</strong> </label> <input type="radio" name="radio-choice-2" id="radio-choice-6" value="choice-6" /> <label for="radio-choice-6"> Power user <span>Pretty rad this one</span> <strong>800</strong> </label> <input type="radio" name="radio-choice-2" id="radio-choice-7" value="choice-7" /> <label for="radio-choice-7"> Extreme user <span>You get ALL the awesome stuff</span> <strong>1.000</strong> </label> </fieldset> <button>Submit</button>
</form>
<p class="footer">Design totally based on <a href="https://www.ben.nl/sim-only?looptijd=1&bellen=regelmatig&internet=regelmatig">ben.nl/sim-only</a></p>
</body>
</html>

Responsive form design - Script Codes CSS Codes

@import "//fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin";
*,
*:before,
*:after { box-model: border-box;
}
body { color: #333; font: 20px/1.5 "Roboto Condensed", sans-serif; background: #eee; min-width: 420px;
}
form,
fieldset,
legend { padding: 0; margin: 0;
}
form { width: 50%; margin: 50px auto; overflow: hidden;
}
fieldset { margin: 60px 0; position: relative; border: 1px solid #ddd;
}
legend { font-weight: 600; position: absolute; top: -40px; border: 0;
}
input[type=radio] { display: none;
}
label { font-size: 17px; font-weight: bold; line-height: 1; cursor: pointer; display: block; padding: 15px 10px 15px 50px; position: relative; border-top: 1px solid #ddd; background: white; whitespace: no-wrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.15s ease; transition: all 0.15s ease;
}
label:first-of-type { border: 0;
}
label:before { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #d0d0d0;
}
label span { color: #b7b7b7; font-weight: normal; position: absolute; left: 35%;
}
label strong { color: #00aeef; text-align: right; float: right;
}
label:focus, label:hover, label:active, input:checked + label { color: white; background: #00aeef; border-color: white;
}
label:focus span, label:hover span, label:active span, input:checked + label span,
label:focus strong,
label:hover strong,
label:active strong,
input:checked + label strong { color: white;
}
label:focus:before, label:hover:before, label:active:before, input:checked + label:before { left: 13px; top: 13px; width: 12px; height: 12px; border: 4px solid white; background: #00aeef;
}
.most-chosen:after { content: "MOST CHOSEN"; color: white; font-size: 12px; font-weight: normal; background: #333; position: absolute; right: 12%; top: 13px; display: block; padding: 5px 7px;
}
button { color: white; background: #00aeef; border: 0; padding: 10px 15px; float: right;
}
button:focus, button:hover, button:active { background: #333; outline: 0;
}
p { color: #666;
}
a { color: #00aeef;
}
.footer { text-align: center;
}
@media all and (max-width: 1000px) { .most-chosen:after { content: none; }
}
@media all and (max-width: 800px) { label { padding-bottom: 35px; } label:before { top: 25px; } label span { font-size: 14px; display: block; margin-top: 5px; left: auto; } input:checked + label:before, label:focus:before, label:active:before, label:hover:before { top: 24px; } button { width: 100%; float: none; }
}
@media all and (max-width: 550px) { label { padding: 15px 10px 15px 50px; } label:before { left: 14px; top: 14px; } label span { display: none; } input:checked + label:before, label:focus:before, label:active:before, label:hover:before { left: 13px; top: 13px; }
}
Responsive form design - Script Codes
Responsive form design - Script Codes
Home Page Home
Developer Jelmer
Username jelmerdemaat
Uploaded December 02, 2022
Rating 4.5
Size 4,074 Kb
Views 12,144
Do you need developer help for Responsive form design?

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!

Jelmer (jelmerdemaat) Script Codes
Name
A Pen by Jelmer
How to force download a file with JavaScript
Replaced content cannot have pseudo elements
Justified divs, attempt 3
A pure CSS slideshow
CSS only slider
Check comment length to filter unuseful ones
Justified divs, attempt 4
Simple responsive photo slider gallery
Little loading spinner
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!