Materialize Css Registration form in Popup
Materialize Css Registration form in Popup– We can use materialize form elements in modal to create registration form. Here in this article we are going to explain how you can create Registration form in modal. You can use our online editor to edit and run the code online.
Materialize Css Registration form in Popup Example
Here is a simple registration form which contains the basic fields for registration.
Example:
<script>
$(document).ready(function(){
$('.modal').modal();
});
</script>
<style>
.modal{max-height:90% !important;} //increase default height
</style>
<!-- Modal Button -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Regiister Modal</a>
<!-- Modal Body -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Register</h4>
<div class="col s6">
<form class="">
<div class="row">
<div class="input-field col s12">
<input id="Name" type="text" class="validate">
<label for="Email">Name</label>
</div>
<div class="input-field col s12">
<input id="Email" type="email" class="validate">
<label for="Email">Email</label>
</div>
<div class="input-field col s12">
<input id="Phone" type="text" class="validate">
<label for="Phone">Phone</label>
</div>
<div class="input-field col s12">
<input id="Password" type="password" class="validate">
<label for="Password">Password</label>
</div>
<div class="input-field col s12">
<input id="CnfPassword" type="password" class="validate">
<label for="CnfPassword">Confirm Password</label>
</div>
<div class="input-field col s12">
<button type="submit" class="waves-effect waves-light btn">Register</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
|
Output of above example-
For Modals Tutorials – Materialize Css Modal
For Form Elements Tutorials – Materialize Css Form
Advertisements
