Üç aşamalı üyelik paneli

By

login panel
Genelde  üyelik formlarında tek sayfalık form örnekleri kullanılır birçok web sitesi tarafından. Kimi websiteleri fazla bilgi istediğinden  form sayfasının fazla  uzun olmaması için üyelik formunu bir kaç sayfa halinde kullanırlar ve bundan dolayı ziyaretçi tek sayfa yerine üç sayfadan oluşan sıkıcı üyelik formları ile başetmek zorunda kalıyor.  Bazı sitelerde kullanıcılar sayfa yenilenmeden aşamalı olan form alanlarını doldurabiliyorlar buda çok nadir görülen örneklerden.

Ruby On Tails tarafından jQuery ve Css3 ile  hazırlanmış olan bu form örneğinde sayfa yenilenmeden tek bir sayfada bir kaç tane form aşamasını geçebiliyorsunuz.   Üyelik formunda bir bölümü doldurduktan sonra kullanıcı next butonuna basıyor ve doldurmuş olduğu sayfa küçülüp kayboluyor yerine diğer aşama geliyor. Toplam üç aşama olarak hazırlanmış olan bu üyelik formu örneğinde en son aşamada kullanıcılar submit deyip üyelik işlemini tamamlıyor. Hatalı  doldurulmuş bölümleri tekrar düzeltebilmek için geri butonuda mevcut ayrıca üst kısımda progress bar kullanıldığı için  kullanıcı hangi aşamada olduğunu görebiliyor. Bu aşamaları istediğiniz kadar çoğaltmak yine size kalmış bir durum.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
	height: 100%;
}

body {
	font-family: montserrat, arial, verdana;
	background-color:#999999;
}
/*form styles*/
#msform {
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
}
#msform fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;

	box-sizing: border-box;
	width: 80%;
	margin: 0 10%;

	/*stacking fieldsets above each other*/
	position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
/*inputs*/
#msform input, #msform textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}
  •  Body etiketleri arasına eklemeniz gereken bölümler.

Html : 


  • Account Setup
  • Social Profiles
  • Personal Details

Create your account

This is step 1

Social Profiles

Your presence on the social network

Personal Details

We will never sell it

Js dosya adresleri : 


 JavaScript : 



Leave a Comment

Your email address will not be published.

You may also like

Trend