فرم عضویت در خبرنامه به سبک مینیمالیستی

145

در این مقاله قصد دارم شما همراهان و دوست دارن وب سایت اُکسیما را با طراحی یک فرم عضویت در خبرنامه فوق العاده زیبا و جذاب و به سبک مینیمالیستی، آشنا کنم. شما از این فرم می توانید در وب سایت خود به نحوی زیبا استفاده نمائید و به کمک آن، ایمیل های مخاطبین خود را جمع آوری کنید. شما به کمک این فهرست می توانید با مخاطبین خود در ارتباط باشید و آن ها را تحریک کنید تا از وب سایت شما بازدید کنند و فروش خدمات و محصولات وب سایت خود را افزایش دهید.

»» شما می توانید در ویدئوی فوق، دمویی از این فرم عضویت در خبرنامه به سبک مینیمالیستی را مشاهده کنید.

اگر علاقه مند شده اید که طراحی و پیاده سازی این فرم عضویت در خبرنامه را یاد بگیرید با ادامه ی این مقاله همراه شوید تا گام به گام آن را طراحی و پیاده سازی نمائیم.


گام اول : کدهای HTML


ابتدا یک فایل با پسوند html ایجاد نمائید و به عنوان مثال، نام آن را index قرار دهید.


گام دوم : تعیین فونت


سپس در بخش head فایل index.html کد زیر را قرار دهید تا از فونت های گوگل در این اسکریپت استفاده نمائیم:


گام سوم : کدهای CSS


حال در محلی که فایل index.html خود را ایجاد کردید یک پوشه با نام css ایجاد کنید و سپس در آن یک فایل با پسوند css قرار دهید و نام آن را به عنوان مثال، style قرار دهید. سپس آن را با یک ادیتور باز کنید و کدهای زیر را در آن کپی کنید:

	
	html, body, main {
	  height: 100%;
	  background: #57bafc;
	}

	* {
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	}

	input, button {
	  font-family: "Nunito", sans-serif;
	}

	main, form {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: center;
	  -ms-flex-align: center;
	  align-items: center;
	  -webkit-box-pack: center;
	  -ms-flex-pack: center;
	  justify-content: center;
	}
	main input, form input {
	  width: 500px;
	  height: 166.6666666667px;
	  background: #fff;
	  border: none;
	  border-radius: 133.3333333333px;
	  color: #57bafc;
	  font-size: 41.6666666667px;
	  text-transform: uppercase;
	  font-weight: 600;
	  padding: 10px 100px;
	  outline: none;
	  cursor: pointer;
	  -webkit-transition: all 250ms;
	  transition: all 250ms;
	  position: relative;
	}
	main input[readonly], form input[readonly] {
	  cursor: not-allowed;
	}
	main input:invalid, form input:invalid {
	  -webkit-box-shadow: none;
	  box-shadow: none;
	}
	main input::-webkit-input-placeholder, form input::-webkit-input-placeholder {
	  color: #57bafc;
	  text-align: center;
	  opacity: 1;
	}
	main input:-ms-input-placeholder, form input:-ms-input-placeholder {
	  color: #57bafc;
	  text-align: center;
	  opacity: 1;
	}
	main input::-ms-input-placeholder, form input::-ms-input-placeholder {
	  color: #57bafc;
	  text-align: center;
	  opacity: 1;
	}
	main input::placeholder, form input::placeholder {
	  color: #57bafc;
	  text-align: center;
	  opacity: 1;
	}
	main input:not(.active):not(:-moz-read-only):hover, form input:not(.active):not(:-moz-read-only):hover {
	  opacity: 0.9;
	}
	main input:not(.active):not(:read-only):hover, form input:not(.active):not(:read-only):hover {
	  opacity: 0.9;
	}
	main input.active, form input.active {
	  cursor: initial;
	  width: 1115px;
	  left: 166.6666666667px;
	  padding: 10px 357.1428571429px 10px 100px;
	}
	main input.active::-webkit-input-placeholder, form input.active::-webkit-input-placeholder {
	  text-align: left;
	}
	main input.active:-ms-input-placeholder, form input.active:-ms-input-placeholder {
	  text-align: left;
	}
	main input.active::-ms-input-placeholder, form input.active::-ms-input-placeholder {
	  text-align: left;
	}
	main input.active::placeholder, form input.active::placeholder {
	  text-align: left;
	}
	main input.active + button, form input.active + button {
	  display: block;
	  font-weight: 100;
	}
	main input.expand, form input.expand {
	  -webkit-animation: expand 1s forwards ease-out;
	  animation: expand 1s forwards ease-out;
	}
	@-webkit-keyframes expand {
	  0% {
		width: 500px;
	  }
	  10% {
		width: 1200px;
	  }
	  35% {
		width: 1100px;
	  }
	  50% {
		width: 1120px;
	  }
	  100% {
		width: 1115px;
	  }
	}
	@keyframes expand {
	  0% {
		width: 500px;
	  }
	  10% {
		width: 1200px;
	  }
	  35% {
		width: 1100px;
	  }
	  50% {
		width: 1120px;
	  }
	  100% {
		width: 1115px;
	  }
	}
	main input.collapse, form input.collapse {
	  -webkit-animation: collapse 1s forwards ease-out;
	  animation: collapse 1s forwards ease-out;
	}
	@-webkit-keyframes collapse {
	  0% {
		width: 1115px;
	  }
	  10% {
		width: 384.6153846154px;
	  }
	  35% {
		width: 515px;
	  }
	  50% {
		width: 490.1960784314px;
	  }
	  100% {
		width: 500px;
	  }
	}
	@keyframes collapse {
	  0% {
		width: 1115px;
	  }
	  10% {
		width: 384.6153846154px;
	  }
	  35% {
		width: 515px;
	  }
	  50% {
		width: 490.1960784314px;
	  }
	  100% {
		width: 500px;
	  }
	}
	main input + button, form input + button {
	  display: none;
	}
	main button, form button {
	  width: 333.3333333333px;
	  height: 142.8571428571px;
	  background: #57bafc;
	  border: 0;
	  border-radius: 133.3333333333px;
	  position: relative;
	  left: -178.5714285714px;
	  color: #fff;
	  font-size: 41.6666666667px;
	  text-transform: uppercase;
	  cursor: pointer;
	  outline: none;
	  z-index: 2;
	}	
	
	

حال بابد فایل style.css را به فایل index.html ضمیمه کنیم. برای این منظور، کد زیر را در بخش head فایل index.html قرار دهید:


گام چهارم : کدهای Javascript


حال در قسمتی از صفحه index.html که قصد دارید خبرنامه خود را ایجاد نمائید یک تگ script ایجاد کنید و کدهای زیر را در بین آن کپی نمائید:

	
	var Element = /** @class */ (function () {
		/**
		 Class constructor
		 **/
		function Element(options) {
			if (options === void 0) { options = {}; }
			/**
			 * global properties of the node
			 * @type {{}}
			 */
			this.node = {};
			/**
			 * The location where we should insert the generated node
			 * @type {{}}
			 */
			this.where = {};
			/**
			 * Events binbed to the node
			 * @type {{}}
			 */
			this.events = {};
			/**
			 * The created element
			 */
			this.element = null;
			for (var key in options) {
				if (this.hasOwnProperty(key)) {
					this[key] = options[key];
				}
			}

			this.createNode();
			return this.element;
		}
		/**
		 Bind events to the node
		 **/
		Element.prototype.bindEventsListeners = function () {
			for (var key in this.events) {
				this.element.addEventListener(key, this.events[key]);
			}

		};
		/**
		 Create the node
		 **/
		Element.prototype.createNode = function () {
			var node = document.createElement(this.node.name);
			if (this.node.content)
				node.innerHTML = this.node.content;
			for (var key in this.node.attrs) {
				node.setAttribute(key, this.node.attrs[key]);
			}

			this.where.destination.insertAdjacentElement(this.where.position, node);
			this.element = node;
			if (this.element && this.events) {
				this.bindEventsListeners();
			}
		};
		return Element;
	}());
	// ---------------
	// FUNCTIONS
	// ---------------
	/**
	 * On input click
	 * @param e
	 */
	function inputClick(e) {
		var target = e.currentTarget, classes = target.classList;
		if (!classes.contains('collapse') && !classes.contains('expand') && !classes.contains('active') && !target.getAttribute('readonly')) {
			var animationEnd_1 = function () {
				target.removeEventListener('webkitAnimationEnd', animationEnd_1);
				target.removeEventListener('animationend', animationEnd_1);
				classes.remove('expand');
				target.focus();
			};
			classes.add('active', 'expand');
			target.addEventListener('webkitAnimationEnd', animationEnd_1);
			target.addEventListener('animationend', animationEnd_1);
			target.setAttribute('placeholder', 'EMAIL');
		}
	}
	/**
	 * On input blur
	 * @param e
	 */
	function inputBlur(e) {
		// Do not hesitate to tell me if you have a cleaner solution to get the active element inside the blur event ! :)
		setTimeout(function () {
			var input = e.target, button = input.nextSibling, target = document.activeElement, classes = input.classList;
			if (!classes.contains('expand') && classes.contains('active') && target !== button) {
				var placeholder = input.dataset.placeholder, animationEnd_2 = function () {
					input.removeEventListener('webkitAnimationEnd', animationEnd_2);
					input.removeEventListener('animationend', animationEnd_2);
					classes.remove('collapse');
					input.blur();
				};
				classes.add('collapse');
				classes.remove('active');
				input.addEventListener('webkitAnimationEnd,', animationEnd_2);
				input.addEventListener('animationend', animationEnd_2);
				input.value = '';
				input.setAttribute('placeholder', placeholder);
			}
		}, 10);
	}
	/**
	 * On form submit
	 */
	function formSubmit(e) {
		e.preventDefault();
		var input = e.target.querySelector('input[type=email]');
		input.dataset.placeholder = 'THANK YOU!';
		input.setAttribute('readonly', true);
		input.focus();
		input.blur();
	}
	// ---------------
	// NODES CREATION
	// ---------------
	var main = new Element({
		'node': {
			'name': 'main'
		},
		'where': {
			'destination': document.querySelector('body'),
			'position': 'beforeEnd'
		}
	}), form = new Element({
		'node': {
			'name': 'form'
		},
		'where': {
			'destination': main,
			'position': 'beforeEnd'
		},
		'events': {
			'submit': formSubmit
		}
	}), input = new Element({
		'node': {
			'name': 'input',
			'attrs': {
				'type': 'email',
				'placeholder': 'NOTIFY ME',
				'data-placeholder': 'NOTIFY ME',
				'required': 'required'
			}
		},
		'where': {
			'destination': form,
			'position': 'beforeEnd'
		},
		'events': {
			'click': inputClick,
			'blur': inputBlur
		}
	}), button = new Element({
		'node': {
			'name': 'button',
			'content': 'SEND',
			'attrs': {
				'type': 'submit',
				'placeholder': 'NOTIFY ME',
				'data-placeholder': 'NOTIFY ME'
			}
		},
		'where': {
			'destination': input,
			'position': 'afterEnd'
		}
	});	
	
	

به پایان این مقاله رسیدیم. امیدوارم که این اسکریپت فوق العاده برای شما نیز مفید باشد.

پیوست ها :
  • این مقاله دارای پیوست نمی باشد.
loder | اُکسیما
»» نویسنده مقاله
علیرضا رئیسی | اُکسیما

علیرضا رئیسی
»» پشتیبانی مقاله

تیم پشتیبانی اُکسیما به صورت 24 ساعت در هر زمان و مکان، پاسخگوی تمامی سوالات و ابهامات شما در مورد این مقاله خواهند بود. بدین منظور شما می توانید از طریق روش های زیر از پشتیبانی فنی این مقاله برخوردار گردید. تیم پشتیبانی این اطمینان خاطر را به شما دانشجویان گرامی خواهند داد که در سریع ترین زمان ممکن پاسخگوی شما عزیزان باشند.


به اشتراک بگذارید ...

دوستان و همراهان گرامی : آیا تمایل دارید این مقاله را با دوستان و آشنایان خود در تلگرام به اشتراک بگذارید؟

[ مشاهده همه ]

مقاله های پیشنهادی

PjtZ8 | اُکسیما
فرم عضویت در خبرنامه به سبک مینیمالیستی

نویسنده: علیرضا رئیسی
145
T4bEX | اُکسیما
اسلایدر تصویر Untitled Slider با CSS

نویسنده: علیرضا رئیسی
90
odn1i | اُکسیما
طراحی مفهومی ارسال لیست کالا

نویسنده: علیرضا رئیسی
124
polygon_drawing | اُکسیما
ابزار نقاشی چند ضلعی

نویسنده: حسین رئیسی
181
matisse | اُکسیما
کتابخانه Matisse

نویسنده: حسین رئیسی
317
fancybutton | اُکسیما
کتابخانه FancyButton

نویسنده: حسین رئیسی
252
flutter_reactnative | اُکسیما
مقایسه Flutter و ReactNative

نویسنده: حسین رئیسی
425
best_language | اُکسیما
8 زبان برتر برنامه نویسی برای یادگیری در سال 2018

نویسنده: حسین رئیسی
369
android_library | اُکسیما
۲۵ کتابخانه برتر اندروید در سال 2018

نویسنده: حسین رئیسی
249
ui_ux | اُکسیما
تفاوت بین طراحی UX و UI چیست؟

نویسنده: حسین رئیسی
396
realm | اُکسیما
دیتابیس Realm

نویسنده: حسین رئیسی
186
fuchsia | اُکسیما
Fuchsia چیست؟

نویسنده: حسین رئیسی
352
dialogbuilder | اُکسیما
کتابخانه DialogBuilder

نویسنده: حسین رئیسی
126
progressbutton | اُکسیما
کتابخانه ProgressButton

نویسنده: حسین رئیسی
150
placeholderview | اُکسیما
PlaceHolderView نمایشی برای تمام لیست ها

نویسنده: حسین رئیسی
130
common_traits_programmers | اُکسیما
۹ ویژگی مشترک برنامه نویسان بزرگ

نویسنده: حسین رئیسی
218
code_books | اُکسیما
9 مورد از بهترین کتاب های برنامه نویسی

نویسنده: حسین رئیسی
227
programmer_warning | اُکسیما
10 اشتباه در یادگیری برنامه نویسی که درست نمی باشند

نویسنده: حسین رئیسی
88