Форма обратной связи с Ajax без перезагрузки страниц
Блог
Делимся с Вами своими знаниями и новостями
15.10.2015

Форма обратной связи с Ajax без перезагрузки страниц

Форма обратной связи с Ajax без перезагрузки страниц

Форма обратной связи с Ajax без перезагрузки страниц, чтобы пользователь остался там, где писал сообщение для нас, а не отправлялся сайтом куда-либо. Форма будет реализована с помощью HTML, CSS, PHP, JavaScript с технологией Ajax. Собственно последнее и даст нам возможность сделать так, чтобы форма получила данные из PHP скрипта и не осуществляла перезагрузку страницы сайта.

Итак, давайте сразу начнем. Успешно реализованный пример можно посмотреть здесь – mst-info.ru.

Форма связи на сайт

Первым делом давайте добавим наш код в  HTML. Заметьте Вы можете использовать данный скрипт и в различных CMS, ресурсов он много от Вас не съест, а работает очень шустро, так что пользуйтесь. Ну да ладно. Вот наша форма.

Форма обратной связи как видно самая обычная. Я предполагаю, что Вы уже знакомы с CSS и оформите форму самостоятельно, если же Вы не знаете что это, то сначала ознакомьтесь с CSS. Итак, вот форма, Вы ее оформили, она красивая, но ясен красен не работает. Но это ничего, сейчас поправим. Но забегу немного вперед, я в этой форме еще небольшую проверку, аля каптча сделал. 🙂 Тоже иногда люди спрашивают. Да и еще, в форме используется атрибут required – он нужен для того, чтобы дать указание браузеру, что данное поле обязательно для заполнения. Но мы сделаем еще и свою дополнительную проверку. Как видно из формы, при нажатии на кнопку она нас отправит на обработчик send.php. Кстати, в своей форме сделайте корректную ссылку.

Обработчик формы обратной связи с Ajax без перезагрузки страниц

Пояснение к форме ниже. Переменная $sub – тема сообщения, там где мой емейл указан, укажите свой, чтобы все работало корректно. Данный скрипт принимает данные отправленные из нашей формы обратной связи и осуществляет их проверку. Тут же и каптча наша проверяется, можете добавлять дополнительные поля по аналогии с этими, а также осуществлять их проверки на наличие каких-либо данных и так далее.

Огромное внимание уделите результату обработчика, это очень важно. Смотрите скрипт при успешном результате выводит данные, и наш ajax обработчик, сейчас мы его напишем, эти данные проверяет, поэтому советую тут оставить все как есть, я имею ввиду OK и Error.

Последний штрих

Так, форма обратной связи, кстати, уже будет работать, но, она будет нас отсылать на этот вот send.php. Поэтому пришло включить немного магии и сделать все красивенько. Для этого подключаем библиотеку jQuery, если Вы этого еще не сделали. Подключаем ее перед закрывающимся тегом </head>. Код ниже.

После подключения этого скрипта к нашему сайту, мы создаем третий файл, либо непосредственно в код пишем, в принципе я предполагаю, что Вы уже используете какие-либо скрипты на javascript и сможете воткнуть мой код куда нужно, если же нет, то ниже jQuery вставляем следующий код.

Собственно и все. Особое внимание обратите на путь к файлу send.php и пропишите его согласно Вашему расположению этого файла на сервере на Вашем. В остальном форма прекрасно себя зарекомендовала. И отлично работает. Вопросы? Если есть, ниже там у меня комментарии к статье. Пишите. Мне важно Ваше мнение.

P.S. Решение проблемы отправки файлов через форму AJAX

Друзья. Тут мне многие в личку задают вопросы, что форма не работает, если, например, отправлять файл, прикрепляя его к форме. Это действительно так. Работать метод serialize() не будет. Поэтому используйте вместо предыдущего кода следующий, все остальное остается без изменений.

Не забывайте, что Вы можете выводить любое сообщение, что формирует Ваш PHP файл. По всем вопросам пишите.

Комментарии:

Свяжитесь с нами уже сейчас




Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.
Онлайн заявка


Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.