Responsive Material Form v.2

Developer
Nikhil Krishnan
Size
7,122 Kb
Views
24,288
  1. Responsive Material Form v.2 Previews
  2. Responsive Material Form v.2 HTML Codes
  3. Responsive Material Form v.2 CSS Codes
  4. Responsive Material Form v.2 JS Codes

How do I make an responsive material form v.2?

Responsive material form using by jQuery and sass.. What is a responsive material form v.2? How do you make a responsive material form v.2? This script and codes were developed by Nikhil Krishnan on 19 November 2022, Saturday.

Responsive Material Form v.2 Previews
IQ Test

Responsive Material Form v.2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Material Form v.2</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1> Responsive Material Form v.2</h1>
<section class="contact-wrap"> <form class="material-form"> <div class="input-block floating-field"> <label>First Name</label> <input value="" type="text" class="form-control"> </div> <div class="input-block floating-field error"> <label>Email ID</label> <input value="[email protected]" type="text" class="form-control"> </div> <div class="error-label">Email ID already exists.</div> <div class="input-block"> <input placeholder="Enter Something" value="Non-Floating Field" type="text" class="form-control"> </div> <div class="select-block"> <label>Drop Down</label> <div class="custom-select"> <div class="active-list">Australia</div> <input type="text" class="list-field" value="Australia" /> <ul class="drop-down-list"> <li>Australia</li> <li>India</li> <li>UAE</li> <li>USA</li> </ul> </div> </div> <div class="form-note">Some notes, Lorem ipsum dolor sit amet.</div> <div class="select-block"> <label>Dropdown 1</label> <div class="custom-select"> <div class="active-list">0</div> <input type="text" class="list-field" value="0" /> <ul class="drop-down-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <div class="select-block"> <label>Dropdown 2</label> <div class="custom-select"> <div class="active-list">0</div> <input type="text" class="list-field" value="0" /> <ul class="drop-down-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <div class="input-block floating-field textarea"> <label>Drop your message here</label> <textarea rows="3" class="form-control"></textarea> </div> <button class="btn square-button material-btn">Send</button> </form>
</section>
<!-- follow me template -->
<div class="made-with-love"> <a target="_blank" href="https://codepen.io/nikhil8krishnan">Nikhil Krishnan</a> | copyright &copy; 2016 | All rights reserved.
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Material Form v.2 - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900);
.material-form { padding: 15px; background-color: #fff;
}
.material-form .input-block { background-color: #fff; border-bottom: solid 1px #c8c8c8; width: 100%; height: 50px; padding: 0; position: relative; margin-bottom: 20px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.material-form .input-block::before { content: ''; position: absolute; left: 50%; width: 0%; bottom: 0; height: 2px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-color: #2196f3;
}
.material-form .input-block.focus { border-color: #fff;
}
.material-form .input-block.focus label { color: #2196f3; top: 0; font-size: 13px;
}
.material-form .input-block.focus::before { left: 0%; width: 100%;
}
.material-form .input-block.has-value { background-color: #fff;
}
.material-form .input-block.has-value label { top: 0; font-size: 13px;
}
.material-form .input-block.error { border-color: #fff;
}
.material-form .input-block.error::before { left: 0%; width: 100%; background-color: #d50000;
}
.material-form .input-block.textarea { height: auto;
}
.material-form .input-block.textarea .form-control { height: auto; resize: none; padding-top: 20px; font-family: 'Roboto', sans-serif;
}
.material-form .input-block.floating-field { padding: 2px 0 0; height: 62px;
}
.material-form .input-block.floating-field.textarea { height: auto;
}
.material-form .input-block label { position: absolute; left: 0; top: 29px; width: 100%; height: 20px; margin: 0; font-weight: 500; z-index: 1; color: #939393; font-size: 13px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; line-height: 16px; white-space: nowrap; overflow: hidden;
}
.material-form .input-block .form-control { background-color: transparent; padding: 4px 0 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; height: 100%; width: 100%; position: relative; z-index: 2; font-size: 14px; font-weight: 500; color: #3c3c3c;
}
.material-form .input-block .form-control:focus { outline: none;
}
.material-form .input-block .form-control:focus label { top: 0;
}
.material-form .error-label { color: #d50000; margin-top: -15px; font-size: 14px; margin-bottom: 10px;
}
.material-form .form-note { font-size: 13px; color: #939393; margin-top: -15px; margin-bottom: 15px;
}
.material-form .square-button { background-color: #39a1f4; color: #fff; font-size: 20px; text-transform: uppercase; font-weight: 700; text-align: center; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0; height: 60px; border: none; cursor: pointer; width: 100%;
}
.material-form .square-button:hover, .material-form .square-button:focus { background-color: #0d8aee;
}
/*dropdown list as ul li method*/
.select-block { background-color: #fff; width: 100%; padding: 12px 0 0; position: relative; margin-bottom: 20px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.select-block label { position: absolute; left: 0; top: 32px; height: 20px; width: 100%; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; margin: 0; font-weight: 500; z-index: 1; color: #939393; font-size: 12px; line-height: 10px; white-space: nowrap; overflow: hidden;
}
.select-block .active-list { width: 100%; height: 52px; padding: 0; color: #c9c9c9; position: relative; z-index: 2; font-weight: 500; cursor: pointer; font-size: 0; white-space: nowrap; overflow: hidden; padding-right: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.select-block .active-list:after { content: "▼"; position: absolute; right: 0; background-color: #fff; top: 50%; width: 20px; padding-left: 5px; text-align: left; height: 52px; line-height: 52px; color: #939393; font-size: 14px; margin-top: -26px;
}
.select-block.added label { top: 0; font-size: 13px;
}
.select-block.added .active-list { color: #3c3c3c; font-size: 12px;
}
.select-block.added.focus label { top: 0;
}
.select-block.focus label { top: 0; font-size: 13px; color: #2196f3;
}
.select-block.focus .active-list { font-size: 12px;
}
.select-block.focus .custom-select { border-color: #fff;
}
.select-block.focus .active-list:after { content: "▲"; color: #3c3c3c;
}
.select-block.focus .custom-select::before { left: 0%; width: 100%;
}
.select-block .custom-select { border-bottom: solid 1px #c8c8c8; display: inline-block; height: 52px; position: relative; padding: 0; width: 100%; line-height: 52px;
}
.select-block .custom-select::before { content: ''; position: absolute; left: 50%; width: 0%; bottom: 0; height: 2px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-color: #2196f3;
}
.select-block .custom-select .list-field { width: 100%; height: 52px; padding: 0 15px; position: absolute; top: 0; left: 0; display: none;
}
.select-block .custom-select .drop-down-list { width: 100%; height: auto; max-height: 250px; overflow-x: auto; z-index: 99; padding: 0; margin: 0; position: absolute; top: 100%; margin-top: 2px; left: 0; background-color: white; display: none; -moz-box-shadow: rgba(0, 0, 0, 0.11765) 0px 1px 6px, rgba(0, 0, 0, 0.11765) 0px 1px 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.11765) 0px 1px 6px, rgba(0, 0, 0, 0.11765) 0px 1px 4px; box-shadow: rgba(0, 0, 0, 0.11765) 0px 1px 6px, rgba(0, 0, 0, 0.11765) 0px 1px 4px;
}
.select-block .custom-select .drop-down-list li { padding: 10.5px 15px; cursor: pointer; font-size: 12px; line-height: normal; background-color: #fafafa; background-color: #fff; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.select-block .custom-select .drop-down-list li input[type="checkbox"] { margin: 0; margin-right: 8px; position: relative; top: 1px;
}
.select-block .custom-select .drop-down-list li label { font-weight: normal; cursor: pointer; display: block;
}
.select-block .custom-select .drop-down-list li:hover { color: #3c3c3c; background-color: rgba(0, 0, 0, 0.05);
}
.select-block .custom-select .drop-down-list .add-new { border-top: solid 1px #c8c8c8; padding: 15px; color: #3c3c3c;
}
.select-block .custom-select .drop-down-list .add-new i { font-size: 16px; margin-top: 3px; color: #939393;
}
@media (min-width: 768px) { .contact-wrap { width: 600px; margin: auto; } .material-form .input-block label { font-size: 18px; line-height: 14px; } .material-form .input-block .form-control { font-size: 18px; } .select-block label { font-size: 18px; line-height: 14px; } .select-block.added .active-list { font-size: 18px; } .select-block.focus .active-list { font-size: 18px; } .select-block .custom-select .drop-down-list li { font-size: 15px; } .material-form { padding: 30px; }
}
/*----page styles---*/
*,
html { margin: 0; padding: 0;
}
body { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyMDAxYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkMjQ3NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e2001a), color-stop(100%, #dd2476)); background-image: -moz-linear-gradient(left, #e2001a, #dd2476); background-image: -webkit-linear-gradient(left, #e2001a, #dd2476); background-image: linear-gradient(to right, #e2001a, #dd2476); font-family: 'Roboto', sans-serif;
}
.contact-wrap { padding: 15px;
}
h1 { color: #fff; padding: 40px 0 0; margin: 0; font-size: 30px; text-transform: uppercase; font-weight: 700; text-align: center;
}
h1 small { font-size: 18px; display: block; text-transform: none; font-weight: 300; margin-top: 10px; color: #ff1631;
}
.made-with-love { margin-top: 40px; padding: 10px; clear: left; text-align: center; font-size: 10px; font-family: arial; color: #fff;
}
.made-with-love i { font-style: normal; color: #fff; font-size: 14px; position: relative; top: 2px;
}
.made-with-love a { color: #fff; text-decoration: none;
}
.made-with-love a:hover { text-decoration: underline;
}

Responsive Material Form v.2 - Script Codes JS Codes

//Important Note
//This pen Copyrighted (c) 2016 by Nikhil Krishnan (https://codepen.io/nikhil8krishnan/pen/ALLLkv). If you have any query please let me know at [email protected].
//material contact form animation
var floatingField = $('.material-form .floating-field').find('.form-control');
var formItem = $('.material-form .input-block').find('.form-control');
//##case 1 for default style
//on focus
formItem.focus(function() { $(this).parent('.input-block').addClass('focus');
});
//removing focusing
formItem.blur(function() { $(this).parent('.input-block').removeClass('focus');
});
//##case 2 for floating style
//initiating field
floatingField.each(function() { var targetItem = $(this).parent(); if ($(this).val()) { $(targetItem).addClass('has-value'); }
});
//on typing
floatingField.blur(function() { $(this).parent('.input-block').removeClass('focus'); //if value is not exists if ($(this).val().length == 0) { $(this).parent('.input-block').removeClass('has-value'); }else{ $(this).parent('.input-block').addClass('has-value'); }
});
//dropdown list
$('body').click(function() { if ($('.custom-select .drop-down-list').is(':visible')) { $('.custom-select').parent().removeClass('focus'); } $('.custom-select .drop-down-list:visible').slideUp();
});
$('.custom-select .active-list').click(function() { $(this).parent().parent().addClass('focus'); $(this).parent().find('.drop-down-list').stop(true, true).delay(10).slideToggle(300);
});
$('.custom-select .drop-down-list li').click(function() { var listParent = $(this).parent().parent(); //listParent.find('.active-list').trigger("click"); listParent.parent('.select-block').removeClass('focus').addClass('added'); listParent.find('.active-list').text($(this).text()); listParent.find('input.list-field').attr('value', $(this).text());
});
Responsive Material Form v.2 - Script Codes
Responsive Material Form v.2 - Script Codes
Home Page Home
Developer Nikhil Krishnan
Username nikhil8krishnan
Uploaded November 19, 2022
Rating 3.5
Size 7,122 Kb
Views 24,288
Do you need developer help for Responsive Material Form v.2?

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!

Nikhil Krishnan (nikhil8krishnan) Script Codes
Name
A Pen by Nikhil Krishnan
My template
ICON TRANSFORMATION MENU
Loving Car - Pure CSS with animation
Profile Theme
Canvas Paint
Jquery Toggle Button
THUMBNAIL HOVER EFFECTS
Mouse Wheel Animation
Fixed table header
Create amazing love letters 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!