скрипт формы обратной связи для сайта

Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.

В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.

Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.

Чтобы сделать у себя на сайте такое, нам понадобится:

Сервер для PHP

Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.

Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:

Готовим страницу с формой

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

Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :

Чтобы сделать форму на странице, мы будем использовать такие теги:

— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.

— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.

Ещё мы воспользуемся тегом

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

Логика работы PHP-программы будет такая:

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!

Что дальше

Дальше как обычно — улучшаем.

Источник

Обратная связь для сайта

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

Я предпочитаю использовать готовые формы для связи, чем городить каждый раз «велосипеды» и пытаться изобрести самую лучшую форму связи. Это лишнее — есть множество бесплатных решений, упрощающих коммуникацию между владельцем сайта и посетителями и при этом экономящие время вебмастера.

Формы обратной связи на сайт — что выбрать

Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 5 минут, настройка — ну пусть еще 5.

У меня такой скрипт есть, писал я его конечно не сам. Я им с вами поделюсь и расскажу, как пользоваться — в качестве бонуса к основной статье.

Основная проблема которая стоит перед вебмастерами в вопросе установки формы для заказа звонка на сайте — совместимость, универсальность.

Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

Остальным-то что делать?

Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

Программисты конечно могут написать самостоятельно подобный скрипт обработки данных на PHP, оформить внешний стиль, прикрутить к нему капчу, добавить проверку правильности ввода полей (в т.ч. email) на странице, добавить поля для загрузки файлов, сделать эту форму на AJAX без перезагрузки.

Но, во-первых, подобные действия могут делать только квалифицированные программисты, к которым средний блоггер не относится. Во-вторых — это трата времени и окупается она только при частом возникновении подобной потребности.

Я же предлагаю сэкономить:

И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

HTML&PHP форма (и скрипт) обратной связи для блога, сайта

Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Как выглядит конфиг внутри («\code\assets\xml\config.php»):

Конфиг для настройки полей («\code\assets\xml\fields.php»):

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

Преимущества этой формы над предыдущей:
— более эстетично привлекательная
— используется проверка полей, ошибки выводятся через AJAX
— подробнейшая инструкция по установке и настройке внутри
— есть подсказки под полями

Например, посмотрите как в этой форме связи выводятся ошибки:

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

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

Вы также можете посмотреть интересный видеоурок по данному скрипту:

Итак, вы познакомились с двумя функциональными скриптами и можете выбрать свой. Но не торопитесь, потому что вас еще ждет третий PHP-cкрипт формы обратной связи для блога. Тот, которым я пользуюсь уже наверное года два с лишним.

Установка готовой бесплатной формы обратной связи на сайт

Итак, на одном сайтов установлена вот такая «кнопка»:

Если нажать на нее, вниз «выпадет» форма обратной связи:

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:

Очень удобно. Вот код для работы формы как в первом случае:

div id = «form» >
p > a style = «text-decoration: none; border-bottom: 1px dotted; cursor: pointer;» id = «forma0» > Заказать звонок / a > / p >

div id = «forma1» style = «display:none; background-color: #fff;» >
script src = «sendmailforms/jquery.maskedinput-1.2.2.min.js» type = «text/javascript» > / script >
link rel = «stylesheet» type = «text/css» href = «sendmailforms/form.css» / >
script src = «sendmailforms/wait_for_call.js» type = «text/javascript» > / script >
script src = «sendmailforms/ajaxupload.js» type = «text/javascript» > / script >
script src = «sendmailforms/upload_file.js» type = «text/javascript» > / script >
div class = «call-me-form» title = «Заказать звонок» button = «Заказать звонок» style = «width: 200px» > / div >
/ div >
script >
$(«#forma0»).toggle(function() <
$(«#forma1»).slideDown(«slow»);
>, function() <
$(«#forma1»).slideUp(«slow»);
>);
/ script >
/ div >

Расшифровываю: в скрытом div-блоке подгружается скрипт и все что с ним связано, этот блок при помощи JavaScript открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.

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

Приведу содержимое конфиг-файла

Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

После отправки номера, пользователю увидит ваше сообщение, которое также можно задать.

Скачать форму можно по ссылке, либо с этого блога.

Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

1. Он присылает URL страницы, с которой была отправлена заявка через форму.

2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

И он тоже позволяет загружать файл, то есть ничем не уступает.

Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.

А комментариях давайте делиться своими наработками и ссылками, раз я уже поделился, теперь ваша очередь. Буду очень рад если вы поделитесь своими проверенными решениями или приведете примеры как сделали форму обратной связи у себя на сайте.

Источник

Код простой формы обратной связи для сайта на HTML и PHP

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему используется HTML и PHP?

Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.

Структура кода реализации обратной связи для сайта

Далее приведен алгоритм работы обратной связи:

В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.

Код формы обратной связи на HTML

Вначале приведем исходный код простой формы обратной связи для сайта на HTML:

Рассмотрим атрибуты формы

Далее внутри тега находится контейнер

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

Отправка письма PHP скриптом

Приведем код простого скрипта для отправки письма

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

проверяем или используется метод POST

Далее проверяем или были высланы данные с полей ввода

Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.

Оформление формы обратного звонка для сайта CSS

Приведем код CSS оформления для формы обратной связи сайта.

Разберем подробнее код.

Подпись и поле ввода обернуты в контейнер div :

Для этого дива присвоим отступы сверху и снизу:

Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:

Аналогично для подписей и полей ввода:

Настраиваем красивый внешний вид подписей и полей ввода:

Звездочку делаем красной:

Оформляем кнопку «Отправить» :

При наведении на кнопку настраиваем изменение цвета:

Скачать исходный код формы обратной связи

Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.

Источник

3 способа. Как сделать форму обратной связи на html?

Существует несколько способов реализовать данную фичу у себя. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.

Способ №1. Форма обратной связи html + php.

Данный способ подойдет вам, если необходимо максимально расширяемое решение. Данную форму можно сделать какую угодно. Запрашивать любые данные у пользователей, которые вам необходимы. Можно сделать отправку файлов, капчу, отправку фото, адресов страниц от куда была совершена отправка и многое, многое другое.

Для данной формы вам потребуется:

Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.

Далее давай те напишем HTML код формы

Ну и конечно же файл CSS, что-бы все облагородить)

Вот, что получилось в итоге.

Способ №2. Сервис для формы обратной связи.

Сервисов форм достаточно много, мы разберем форму от яндекса. Сервис позволяет составить свою форму практически с любыми полями. Настроить тему, почту, уведомления. А так-же, все это, можно сделать без знаний программирования так как у таких сервисов есть конструктор, с помощью которого можно собрать все визуально, перетаскивая блоки и настраивая параметры.

Для данного способа вам понадобиться:

У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.

Я собрал вот такую форму на сервисе Яндекса.

Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту

После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.

Способ №3. Ссылка для отправки email.

Самый простой способ реализовать связь разработчика и пользователя. Оставить свою почту на сайте. Но мы ведь любим упрощать жизнь пользователям. Поэтому разместим не просто адрес, а ссылку адрес. Выглядит такая ссылка вот так:

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение. Также саму ссылку можно украсить с помощью CSS стилей, но это уже совсем другая история.

Источник

12 лучших PHP скриптов для создания Контактных форм

Контактные формы необходимы для каждого веб-сайта. Они побуждают посетителей вашего сайта взаимодействовать с вами, потенциально уменьшая количество спама, которое вы получаете.

Для бизнеса это взаимодействие с посетителями увеличивает шансы превратить их в клиентов или покупателей и тем самым увеличить доход.

Независимо от того, нужна ли вам простая контактная форма из трех полей или более сложная, которая предлагает множество опций и функций, вы обязательно найдете нужную PHP контактную форму здесь, в наших 12 лучших PHP скриптах для создания Контактных форм на CodeCanyon.

1. Quform- Responsive AJAX Contact Form

Есть причина, по которой Quform- Responsive AJAX Contact Form является одной из самых продаваемых PHP контактных форм в CodeCanyon. Эта универсальная AJAX контактная форма может быть адаптирована к форме регистрации, форме предложения или любой другой необходимой форме. Имея множество других настроек, Quform- Адаптивная AJAX Контактная Форма призвана поддерживать самого взыскательного пользователя.

Пользователь DigitalOxide говорит:

«Этот скрипт невероятный! Это очень подробные инструкции, примеры и очень много функций. Я не могу придумать ничего, что бы мне когда-либо понадобилось (в том, что касается форм), что этот скрипт не может выполнить!»

2. KONTAKTO

Пользователь vholecek говорит:

«Дизайн выдающийся, и автор очень чутко реагирует на вопросы. Я ломал голову над разработкой шаблона, и автор разобрался с ним менее, чем за 24 часа.»

3. ContactMe

Пользователь ddglobal говорит:

«Отличный плагин для контактной формы. Отличный код, разнообразие и гибкость, невероятно быстрая и выдающаяся поддержка!»

4. PHP Form Builder

Другой топ-продавец CodeCanyon, PHP Form Builder включает плагин jQuery live validation, который позволяет вам создавать любой тип формы, подключать вашу базу данных, вставлять, обновлять или удалять записи и отправлять электронную почту с помощью настраиваемых шаблонов HTML/CSS.

Пользователь sflahaut говорит:

«Отличный продукт, содержащий готовые к использованию примеры всех типов форм. Документация отличная и поддержка клиентов является исключительной, как многие другие комментировали ранее. Я очень рекомендую этот плагин, поскольку он может сэкономить много времени, особенно для разработчиков, у которых не так много веб опыта, как у меня.»

5. Contact Framework

Contact Framework уже давно существует, и с каждым новым обновлением он становится лучше и лучше. Его простой, но современный дизайн имеет три темы и пять цветов, что дает вам множество возможностей для настройки и интеграции в дизайн вашего сайта.

Пользователь fatheaddrummer говорит:

«Удивительная гибкость. Формы выглядят потрясающе. Выдающаяся поддержка клиентов!»

6. SLEEK Contact Form

Совершив свой дебют в 2017 году, SLEEK Contact Form является одним из новейших PHP скриптов для создания форм на CodeCanyon. Благодаря простому и стильному дизайну и функциональности, он идеально подходит для творческих людей или тех, кто хочет привнести немного классного стиля в контактную форму своего веб-сайта.

Пользователь thernztrom говорит:

«Именно то, что я хотел. Хорошая поддержка от автора!»

7. Ultimate PHP, HTML5 & AJAX Contact Form

Ultimate PHP, HTML5 and AJAX Contact Form заменяет чрезвычайно успешную AJAX Contact Form и позволяет вам легко размещать и управлять автономной контактной формой на любой странице вашего PHP веб-сайта.

Пользователь geudde говорит:

«Прекрасный код и безупречная документация. Я встроил форму на свой веб-сайт менее, чем за 10 минут, и большая часть этого времени была проведена в Google для reCAPTCHA. Я купил форму AJAX того же автора несколько лет назад. Новая версия намного элегантнее и легко вписывается в мой сайт.»

8. Perfect Contact Us Form

Пользователь andreahale говорит:

«Отличная поддержка и супер быстрое время отклика. Быстро помогли мне с изменениями, которые я хотел внести в форму.»

9. Contact Form Generator

Пользователь Enrico333 говорит:

10. Feedback Form

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

Feedback Form позволяет вашим пользователям оценивать ваш продукт или услугу и получать подробную информацию, необходимую для улучшения вашего бизнеса. Feedback Form очень проста в использовании и может быть добавлена на любой сайт за короткий промежуток времени.

Пользователь diwep06 говорит:

11. ContactPLUS+ PHP Contact Form

ContactPlus+ это чистая и простая контактная форма, которая состоит из трех стилей: не стилизованная версия, которую вы можете построить в соответствии с вашим вкусом, обычную форму с необходимой для контактной формы информацией, и более полную форму для размещения адреса.

Пользователь itscody говорит:

«Он пошел дальше, чтобы убедиться, что это сработало так, как я хотел, с очень сложным дизайном моего сайта.»

12. Easy Contact Form With Attachments

Хотя это не самая красивая контактная форма в этом списке, плагин Easy Contact Form With Attachments, безусловно, является одним из самых простых для добавления на ваш сайт. Кроме того, для конфигурации требуется только ваш адрес электронной почты и информация о компании. Форма предлагает пять различных тем на выбор и, как следует из названия, позволяет отправлять вложения файлов.

Пользователь powerj говорит:

«Отличная поддержка! Прекрасное качество кода и лучшее обслуживание клиентов!»

Заключение

Эти 12 лучших PHP скриптов для создания контактных форм только малая часть продуктов, доступных на рынке Envato, поэтому, если ни одна из них не соответствует вашим потребностям, есть много других отличных вариантов, которые вы можете предпочесть.

И если вы хотите улучшить свои навыки PHP, ознакомьтесь с очень полезными бесплатными руководствами PHP, которые мы предлагаем.

Источник