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