Как да създадете Ajax-базиран HTML5 / CSS3 формуляр за контакт
Формулярът за контакт е смъртоносно съществен за всеки уебсайт, тъй като действа като пратеник, който предава мнението или запитванията на посетителите на уебмастъра. Има безброй форми за контакт в интернет, но за съжаление повечето от тях не ви обясняват вътрешните работни части, така че тук идва подробен урок, който ще ви научи да създадете разширена форма за контакт от нулата, базирана на поп технологията, HTML5 и CSS3.
Като се има предвид естеството на уеб-базирана форма за контакт с електронна поща, ние също трябва да се потопим в две отделни полета за приложения, което е PHP backend кода за изпращане на имейли и jQuery функции за богат потребителски интерфейс. До края ще останем с напълно динамична и функционална форма за контакт, написана с по-късна персонализация.
Започнете сега, за да създадете своя собствена разширена форма за контакт!
Пряк път до:
- Демо - Погледнете какво правите
- Изтегляне - Изтегляне на всички файлове (php + css)
Структуриране на заявлението
За да започнете, ще ви е необходим някакъв вид уеб сървър, който да работи. Ако работите с Windows машина, WAMP е може би най-добрият вариант. Потребителите на Mac имат подобна програма, наречена MAMP, която е също толкова лесна за инсталиране.
Тези пакети ще създадат локален сървър на вашата машина с пълен достъп до PHP. Алтернативно, ако притежавате сървърно пространство или имате пълен достъп до сървър в отдалечено място, можете да го използвате вместо това. Няма да се нуждаем от бази данни на MySQL, които би трябвало да опростят нещата малко.
След като сървърът е настроен създайте нова папка за поставяне на приложението. Можете да назовете това каквото искате, тъй като не е вредно или дори свързано с крайния продукт. Структурата на папките ще се използва, когато имате достъп до файловете си в уеб браузър. Един прост пример би бил HTTP: //localhost/ajaxcontact/contact.php
Нека изградим нашите файлове!
Ще работим само в рамките на 2 основни файла. Първо ще се нуждаем от ядро .PHP файл, за да приюти не само нашата логика на приложението, но също така и фронтенда HTML маркиране. По-долу е даден примерен код от нашия начален файл.
Формуляр за връзка с HTML5 / CSS Ajax с jQuery
За начало ние сме написали опростен раздел в нашия документ. Това включва и общ Doctype декларация за HTML5 и някои елементи на HTML / XML документ. Те не са точно необходими, но ще улеснят процеса на визуализация в по-старите (и по-новите) браузъри. Също така никога не боли да предложи повече информация.
Малко по-надолу можем да видим 2 реда точно пред затварящия ни таг. Първата включва нашата jQuery скрипт от онлайн хранилището на Google Code. Това е необходимо, за да работят нашите динамични грешки на страниците. Непосредствено под това имаме включване на основен CSS документ съдържащи всички наши стилове на страници.
Вътре в нашия документ имаме няколко съдържащи раздели задържане на основна форма за контакт. Това съдържа 3 входни елемента за име на потребителя, имейл адрес, и лично съобщение. HTML маркировката е сравнително стандартна и не бива да пренебрегва съзнанието на някой междинен разработчик.
Имейлът ви бе изпратен. Huzzah!
Тук имаме основна PHP условен код вложени в контейнери с няколко страници. Това проверява за зададената стойност на име на променлива
$ emailSentи ако е равна на true, тя ще покаже съобщение за успех.Вътре в нашия HTML формуляр
Най- още твърдение е това, което ще се изпълни при зареждане на първа страница, тъй като първоначално няма да има съдържание, което да се изпрати. Вътре тук ще включим a кратка колекция от форми и a бутона за изпращане.
Грешка при изпращането на формуляра
Може да сте забелязали, че има друго условен блок непосредствено след стартовата форма. Това проверява за име на променлива $ hasError и ще покаже съобщение за грешка при потвърждение. Този резервен метод е използва се само ако JavaScript е деактивиран в браузъра и по този начин не може да генерира динамични грешки.
Докрай можем да намерим отделни PHP променливи се проверява. Изявленията се регулират, ако формулярът вече е бил подаден само с частично попълнени данни. Това е друга резервна система, която показва съдържанието на вече попълнените полета - хубав трик за правилното потребителско изживяване!
Непосредствено след завършване на формуляра, малкото jQuery функции написахме. Първо ще разговаряме за тях, тъй като те са по подразбиране за изпълнение на натоварването. Ако обаче браузърът не приеме JavaScript, по подразбиране можем да разчитаме на нашия PHP код.
Отваряне към jQuery
Най-лесният начин да започнете да говорите по тази тема е да влезете направо инча. Ще разбия отделните блокове по ред, така че да можете да видите какво всъщност проверява скрипта за.
Въпреки това, ако се загубите само прегледайте файловете с кодове на проекта. Всички пълни блокове са предварително написани и добре документирани в уебсайта jQuery. За да започнем, отваряме кода, подобен на всеки друг:
Ако сте запознати обратни извиквания може да забележите пост () функцията има вграден набор от параметри. Обратните обаждания са по-малки функции, които се наричат при отговор на данни от друга функция.
Така например, когато нашите jQuery.post () функцията успешно изстрелва електронна поща, която ще извика своя вътрешна функция, за да покаже плъзгащата анимация. Целият код може да бъде написан в неговия собствен блок и да бъде преместен на друго място. Въпреки това заради този урок е много по-лесно да напишете обратно извикване като вградена функция.
Пробив на нашето PHP
Последното препятствие, което трябва да споменем, е логика зад PHP процесора. Това е бекенд системата, която всъщност ще бъде обадете се на пощенска функция и изпрати съобщението. Целият код, използван в примерите по-долу, може да бъде намерен директно в горната част на нашата главна .PHP файл, преди всеки HTML изход.
Има и няколко вътрешни стила, които освежават страницата. Тук няма нищо ново, за да не навлизаме в подробности. Както и да е styles.css Документът е включен в кода на проекта и съдържа елементарни техники на CSS3.
За да започнете, отворете нашата PHP клауза и проверете ако формулярът е изпратен дори. Най- POST променлив “подадено” всъщност беше скрито поле за въвеждане, добавено в самия край на нашата форма. Това е полезен начин проверете дали потребителят е подал нещо затова не губим ресурсите на сървърите.
След това имаме 3 отделни ако / друго проверка на декларацията, за да се види ако всяко поле за въвеждане е попълнено. Тук няма да включвам всяка част от логиката, тъй като всички те са много повтарящи се в природата. Въпреки това, за да ви дам кратък пример, включих долупосочената клауза за проверка на електронната поща:
// се нуждаят от валиден имейл, ако (trim ($ _ POST ['email']) === ") $ emailError = 'Забравихте да въведете имейл адреса си.'; $ hasError = true; else if (! preg_match) ("/ ^ [о.в.: алум: у.св.-s0-9_.-**@[a-z0-9.-]\t _POST ['email']))) $ emailError = 'Въведохте невалиден имейл адрес.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP ще изреже цялото празно пространство от стойността и ще провери дали нещо не е останало. Ако е така, имаме подробна информация Редовен израз (Regex) за да проверим дали входният низ на нашия потребител съвпада с шаблон за електронна поща.
Вие със сигурност не трябва да разбирате как
preg_match ()работи за изграждане на този скрипт. Това е полезна функция за определят правила и изисквания за успешен тип данни, но командва напреднали познания по програмиране, които наистина да разберат. В този сценарий ние гарантираме, че потребителят въвежда само няколко символа за избор, включва и @ символ, последван от 2-4 знака представляващи a Домейн от първо ниво.След като всички наши логики преминават и не връщаме грешки, е време да изпратите нашето съобщение! Този бит код ще определи отделни променливи за персонализиране на нашето имейл съобщение и настройка на някои заглавия на пощата за процеса.
// при липса на грешки за грешки нека да ви изпратим имейл сега! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Изпратено съобщение от'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Име: $ name nEmail: $ email \ t $ headers = 'From:'. ' <'.$emailTo.'>'. "\ t 'Отговаряте на: ' . $ Имейл; поща ($ emailTo, $ subject, $ body, $ headers); // настройваме стойността на булев завършване на TRUE $ emailSent = true;Ако се чудите как кодът ще разбере вашия имейл адрес, това е частта, която трябва да попълните. Първата променлива в нашия комплект е озаглавена.
$ emailToи трябва да съдържат което и да е имейл адрес, който ще получи съобщението.Вътре в нашата
$ тялопроменлива се възползваме от\ Нразделител за добавяне на нови редове в съобщението. Това добавя малки разположения за име на изпращател, имейл адрес, последвана от почивка за техните съдържанието на съобщението. Разбира се, можете да прекарвате времето си в преглед на дисплея, но тази структура работи добре.заключение
Това затваря нашия урок за разширена форма за контакт. Ако искате да оформите своите елементи по отношение на моите, можете да проверите моя пример styles.css в кода на проекта. Въпреки това, страницата е структурирана достатъчно добре, че можете да проектирате свой собствен поглед и усещане много лесно.
Чувствайте се свободни да изтеглите изходния код и да разгледате какво съм направил малко по-близо. Хубаво е да се следва урок, но да имаш директен достъп до източника на проекта може да бъде безценен. Също така включих и кратка стилова таблица, за да направя персонализирането по-лесно, благодаря за Вашия поглед!
