Създайте динамична форма за контакти с jQuery

Иван Пенчев October 11, 2011 CSS, HTML & CSS, jQuery, Интернет

Винаги е добре, един уеб сайт да разполага с лесен и удобен начин за връзка. Формата за контакти трябва да е лесно откриваема, да предлага бързо изпращане на съобщението и известна динамичност.

В този урок ще направим една хубава форма за контакти, а с помощта на jQuery тя ще е лесно достъпна и с интуитивен и динамичен интерфейс.

Преди да започнем можете да разгледате демо на това, което ще създаваме или да изтеглите работните файлове, използвани в урока.

demo      download

Е, нека започваме вече!

Стъпка 1 – HTML

Първоначално ще изградим структурата на нашия html файл. Създайте нов документ с име по избор( добре е файла да се казва index.html за целите на урока). Html страницата ще съдържа една главна част(div) с идентификатор – container, а в нея ще добавим допълнителен div таг, съдържащ самата форма за контакти, както и бутона за отварянето и. Като цяло html файла трябва да изглежда по следния начин(можете да го изтеглите от работните файлове на урока):

<!DOCTYPE html>
<html>
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> Форма за контакти с jQuery - Демо - E-uroci.net </title>

	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
	<div id="overlay"></div>
	<div id="container">
		<div id="top-line"></div>
		<div id="contacts-container">
			<div id="contacts-form">
				<h3> Контакти </h3>
				<p> Ако имате някакви въпроси,
				препоръки, критики към нас или просто
				искате да поговорите с някого,
				не се колебайте да ни пишете. </p>
				<form method="post" action="">
					<div class="one">
						<label>Име: <em>*</em></label>
						<input type="text" name="real_name" />
					</div>

					<div class="one">
						<label>Имейл адрес: <em>*</em></label>
						<input type="text" name="email" />
					</div>

					<div class="one">
						<label>Текст: <em>*</em></label>
						<textarea cols="" rows="" name="message"></textarea>
					</div>

					<div id="contacts-btns">
						<button id="send-btn" name="send-btn">
<img src="assets/images/accept.png" alt="" /> Изпрати Съобщението</button>
						<button id="close-btn" name="close-btn">
<img src="assets/images/cancel.png" alt="" /> Затвори</button>
					</div>
				</form>
			</div>
		</div>

		<div id="contacts-open">Контакти</div>

		<div id="content">
			<!-- Съдържание на сайта ви -->
		</div>
	</div>

	</body>
</html>

Сега нека направим малко обяснение по html-а на страницата.

Първо е възможно някои от читателите да се запитат какво е това <!DOCTYPE html> – това е декларацията на html 5, която ще използваме. Ако искате да научите повече относно DOCTYPE можете да прочетете урока “Що е то DOCTYPE” във FridayCode.

Нека продължим по-напред. Страницата ни съдържа стандартния мета таг, указващ кодировката на сайта – в случая utf8, а също така сме включили и стила на сайта (“main.css”), който предстои да създадем. Последната част от head е добавянето на библиотеката jQuery, тъй като интерактивността на формата за контакти ще се базира именно на jQuery. Ако не знаете какво е това jQuery, можете да се “запознаете” с него чрез нашия урок “Запознайте се с jQuery”.

Преминаваме към съдържанието. Първия таг, който виждаме е div с идентификатор(id) overlay. За какво ще ни служи той? Ще го използваме, за да изсветлим съдържанието, докато е отворена(активна) формата за контакти. По подразбиране overlay ще бъде скрито, което ще укажем в стила на сайта, а при нужда ще го покажем с полупрозрачност (opacity) около 0.7. Всичките тези действия ще бъдат извършени от jQuery.

След като сме декларирали div тага – overlay – вече е време да отворим един div с id – container , който ще съдържа абсолютно цялото съдържание на сайта, включително – формата за контакти и самия уеб сайт. За целите на урока в този container ще имаме само формата за контакти и бутон за отварянето и, а колкото до div тага content, намиращ се след  contacts-container – в него ви остава да разположите съдържанието на сайта си.

Стъпка 2 – CSS

Време е да стилизираме нашата форма за контакти, а и цялата страница до известна степен.

Направете си една папка с име css  при html файла и създайте нов файл с име main.css. Името на css файла и разположението му е по ваш избор, но ако то е различно от използваното в урока трябва да смените пътя до стила(href) на ред 7 от предоставения html по-горе.

Ето го и самия css файл.

body {
	background: #efefef;
	padding: 0;
	margin: 0;
	font-size: 12px;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
}

p {
	text-indent: 7px;
}

form .one {
	display: block;
	padding: 7px;
}

button {
	width: auto;
	height: 30px;
	background-color: #f5f5f5;
	outline: none;
	border: 1px solid #a3b0d3;
	padding-left: 7px;
	padding-right: 7px;
	cursor: pointer;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

button img {
	float: left;
	margin-right: 5px;
}

button#send-btn {
	color: #709214;
}

button#send-btn:hover {
	background-color: #E6EFC2;
	border: 1px solid #bbd97d;
}

button#close-btn {
	color: #db2826;
}

button#close-btn:hover {
	background-color: #f9cbca;
	border: 1px solid #db2826;
}

label {
	display: block;
	padding: 3px;
	font-weight: bold;
}

input {
	width: 97%;
	height: 21px;
	border: 1px solid #73b2cb;
	background-color: #f7f7f7;
}

textarea {
	width: 97%;
	height: 130px;
	border: 1px solid #73b2cb;
}

#container {
	width: 100%;
	height: 100%;
}

#content {
	position: absolute;
	width: 500px;
	top: 20%;
	left: 40%;
}

#overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #e8e9eb;
	opacity: 0;
	display: none;
}

#top-line {
	width: 100%;
	height: 3px;
	background: #3a4f83;
	z-index: 0;
}

#contacts-open {
	width: 140px;
	height: 17px;
	position: absolute;
	top: 0;
	right: 240px;
	background: #3a4f83;
	padding: 5px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	z-index: 2;
	-moz-border-bottom-left-radius: 7px;
	-moz-border-bottom-right-radius: 7px;
	-webkit-border-bottomleft-radius: 7px;
	-webkit-border-bottomright-radius: 7px;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

#contacts-form {
	width: 315px;
	height: 440px;
	background: #fff;
	border: 1px dotted #cecece;
	padding: 7px;
}

#contacts-form h3 {
	font-size: 14px;
	font-weight: normal;
	border-bottom: 1px solid #cecece;
	padding-bottom: 5px;
	text-indent: 7px;
}

#contacts-container {
	display: none;
	position: absolute;
	right: 240px;
	top: 0;
	z-index: 3;
}

 

Както можете сами да се убедите ако притежавате известни познания по css, тук не е използвано нищо необичайно, но все пак ще се впуснем в някои обяснения.

Първоначално може би обърнахте внимание на използваните на места –webkit-border-radius,
-moz-border-radius или просто border-radius. Тези свойства са част от CSS3 и предоставят заобляне на ъглите на елементите към които принадлежат. А може би някой ще се зачуди – Защо ли пък се прави едно и също нещо 3 пъти? Отговорът е, че различните браузъри подържат това свойство по различен начин. –webkit  осигурява поддръжка на всички webkit браузъри – например Chrome или Safari. –moz дава поддръжка на Firefox, докато просто border-radius се подържа от IE и от версии 4+ на Firefox.

Сега малко за самото позициониране на елементите. Почти всичко в страницата е с абсолютна позиция т.е. всеки елемент се наглася спрямо рамките на документа чрез указани “координати” със свойствата top, left, bottom, right. Това ни позволява да нагласим формата за контакти в горната част на страницата и при нейното отваряне да няма разместване на останалите елементи.

Чрез свойството z-index указваме на всеки елемент с абсолютно позициониране колко напред да се намира т.е. можете да си представите това като наредени слоеве, при които всеки се намира зад някой друг. За да разберете по-добре какво представлява z-index разгледайте следното изображение:

zindex

По този начин се позиционират и елементите в страницата, използвайки z-index.

И за последно по css-а – #overlay и #contacts-container притежават свойство display:none; което ще ги прави “невидими” докато не бъде натиснат бутона за отваряне на формата за контакти

( #contacts-open ) и jQuery кода не промени свойствата им.

 

JavaScript (jQuery)

И като за последно ни предстои наистина да направим формата за контакти интерактивна, което, както може би вече разбрахте, ще осъществим с JavaScript и по точно, познатата ни вече библиотека – jQuery. Следният участък с jQuery код може да отделите в самостоятелен JavaScript файл или да го “вградите” в самия HTML. В този урок ще използваме “вграждането”, но вие можете да направите нещата както прецените за добре(несъмнено по-добрия вариант е отделен файл). Следва и jQuery кода, който предстои да разгледаме по-подробно:

$(document).ready( function() {

	$("#contacts-open").live("click", function() { 

		if( $("#contacts-container").is(":hidden") )
		{
			$("#contacts-container").slideDown();
			$("#overlay").css('opacity', '0.7').fadeIn();
		}

	});

	$("form").submit( function() {

		return false;

	});

	$("#close-btn, #overlay").click( function() {

		$("#contacts-container").slideUp("slow", function() { 

			$("#overlay").css('opacity', '0').hide(); 

		});

	});

});

Започваме с обичайната проверка дали документа е зареден, което при jQuery се изпълнява по следния начин:

$(document).ready( function() {
	// Тук стои останалата част от jQuery
});

След като всичко е готово можем да пристъпим към изпълнението на кода при възникване на подходящото събитие. Но какво ще изпълняваме? Първо искаме при цъкване върху бутона за отваряне на формата за контакти тя наистина да се отвори. Е, нека го направим:

$("#contacts-open").live("click", function() { 

		if( $("#contacts-container").is(":hidden") )
		{
			$("#contacts-container").slideDown();
			$("#overlay").css('opacity', '0.7').fadeIn();
		}

	});

 

Бутона за отваряне на формата е с уникално id – #contacts-open. Когато бъде засечено събитието “click” върху него т.е. когато някой го “цъкне” ще трябва да разкрием полетата за попълване, които се намират в елемент form с id – #contacts-container. За всеки случай ще проверим дали въпросният елемент е скрит и ако е така го показваме с ефект – слайдване надолу(slideDown) – и в същото време ще вземем да изсветлим и фона, така че това, което искаме да се вижда – формата за контакти, да се открои от останалото съдържание.

След като вече сме цъкнали на бутона за отваряне, може да сме се отказали да пишем съобщение и да поискаме да затворим въпросната форма за контакти. За да направим това ще добавим още един участък от код:

$("#close-btn, #overlay").click( function() {

		$("#contacts-container").slideUp("slow", function() { 

			$("#overlay").css('opacity', '0').hide(); 

		});

	});

 

Какво пък прави и това? Ами сега ще го разгледаме. Във HTML-а на формата ще вече си имаме бутонче с id – close-btn, а #overlay ни служи като фон, с чиято помощ замъгляваме съдържанието, при отваряне на текстовите полета. Именно тези два елемента ще следим за кликване, когато формата за контакти е отворена. Ако потребителя желае да излезе(да я затвори) той най-вероятно ще цъкне бутона “Затвори” или някъде настрани по съдържанието.

Когато това се случи, затваряме или по-точно скриваме #contacts-container, което представлява формата ни, и след като бъде напълно скрита отново показваме останалото съдържание в сайта на фокус, като скриваме и слоя #overlay.

И накрая още нещо по точката за jQuery! Какво прави следния участък от код?

$("form").submit( function() {

		return false;

	});

 

Ами, до този момент не прави нищо. Тук следим за изпращане на съдържанието на формата за контакти. Преди return false; е нужно да поставите участък с код, който чрез post или get заявка да изпраща съдържанието асинхорнно към сървъра. Но повече по тази тема ще обсъдим в някой от следващите ни уроци, че да не ви отегчавам прекалено много. А ако бързате – не се колебайте, а пишете.

Всичко това е цялата работа по създаването на нашата форма за контакти. Лесно, нали? Ако не мислите така или сте се оплели в обясненията ми, винаги можете да ми пишете на имейл адрес: ivanpenchev@e-uroci.net или да питате в коментарите. А така ще помогнете и на други със същите затруднения, нали?

Също така ако сте открили някаква грешка – независимо дали е по кода или по-текста(пунктуационна или правописна) можете отново да ми пишете, тъй като все пак и аз не знам всичко.

Надяваме се урокът да ви е бил полезен и интересен. Приятно учене с е-уроци!

Tags:

Related Posts

1 Comment

  1. Hrist0 says:
    October 12, 2011 at 9:35 am

    Svejo: (thumb up) (thumb up) (thumb up) (thumb up) (thumb up) (thumb up) (thumb up) (thumb up)
    :) :) :) :) :) :) :)

    Like or Dislike: Thumb up 0

    Reply

Leave a Comment


Designed by WPZOOM