No Description Available
1
This kind of registration and appointment booking form can be used on many places like on slider,banner and section.
Step by step form is smart way to collect data, where we collect data from user in steps.
This sidebar contact form is used to get user query form the same page.
Semantic Ui Sidebar Demo with Semantic Ui Calender.
let modal = document.getElementById('myModal'); function register(){ modal.style.display = 'block'; } function myCloseBtn(){ modal.style.display = 'none'; } var a = document.getElementById('sideNav'); function myNav(){ a.style.display = 'block'; } function backArrow(){ a.style.display = 'none'; }
<div id="bg"></div> <header id="header"> <div class="row"> <div onclick="myNav()" class="icon"> <i class="fas fa-bars"></i> </div> <div class="brandin"> <h1>Pixon</h1> </div> </div> </header> <div id="myModal" class="modal"> <div class="modal-content"> <div class="closebtn"> <span onclick="myCloseBtn()" id="closebtn" href="#">×</span> </div> <label for="">Name</label> <input type="text" id="id1"> <label for="">Email</label> <input type="text" id="id2"> <label for="">Password</label> <input type="password" id="id3"> <input class="check" type="checkbox"><p>Are you agree with our Terms & Conditions ?</p> <input type="submit" class="btn" value="Submit" onclick="myfunction()"> </div> </div> <section id="Box"> <div class="heading"> <h1>Your schedule Appointment</h1> <p class="para1">Get instant help from your daily life stuff.</p> <div id="red"> <button class="btn btn-register" onclick="register()">Register and get Help</button> </div> </div> <div class="content"> <div class="box"> <ul> <li><span></span><strong>How may I help you,Bro ?</strong></li> <li><span></span><strong>I don't know I can helped</strong></li> <li><span></span><strong>That's deep. Let me help.</strong></li> </ul> </div> </div> </section> <div class="sidenav" id="sideNav"> <div onclick="backArrow()" class="close"> <span><i class="fas fa-arrow-left"></i></span> </div> <div class="sidenav-content"> <div class="img"> <div class="profil"> <img src="demos/images/9big.jpg" alt=""> <label for="">Sia Williums</label> <span>Developer</span> </div> </div> <div class="social"> <ul> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-pinterest"></i></a></li> <li><a href="#"><i class="fab fa-google-plus"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> </ul> </div> <div class="menu"> <ul> <li><a href="#"></a><span class="icon-2"><i class="fas fa-tachometer-alt"></i></span>Dashbord<span class="icon3"><i class="fas fa-angle-left"></i></span></li> <li><a href="#"><span class="icon-2"><i class="fas fa-chart-line"></i></span>Statistics<span class="icon3"><i class="fas fa-angle-left"></i></span></a></li> <li><a href="#"><span class="icon-2"><i class="fas fa-bell"></i></span>Notification<span class="icon3"><i class="fas fa-angle-left"></i></span></a></li> <li><a href="#"><span class="icon-2"><i class="fas fa-dollar-sign"></i></span>Revenues<span class="icon3"><i class="fas fa-angle-left"></i></span></a></li> <li><a href="#"><span class="icon-2"><i class="far fa-money-bill-alt"></i></span>Payments<span class="icon3"><i class="fas fa-angle-left"></i></span></a></li> </ul> </div> </div> </div>