Код простой формы обратной связи для сайта на 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, а полноценный, рабочий пример будет выложен позже в другой статье.
Делаем форму обратной связи на сайте
Говорят, что если программист может написать форму обратной связи, он может написать всё.
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :
Чтобы сделать форму на странице, мы будем использовать такие теги:
— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
Логика работы PHP-программы будет такая:
Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.
3 способа. Как сделать форму обратной связи на html?
Существует несколько способов реализовать данную фичу у себя. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.
Способ №1. Форма обратной связи html + php.
Данный способ подойдет вам, если необходимо максимально расширяемое решение. Данную форму можно сделать какую угодно. Запрашивать любые данные у пользователей, которые вам необходимы. Можно сделать отправку файлов, капчу, отправку фото, адресов страниц от куда была совершена отправка и многое, многое другое.
Для данной формы вам потребуется:
Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.
Далее давай те напишем HTML код формы
Ну и конечно же файл CSS, что-бы все облагородить)
Вот, что получилось в итоге.
Способ №2. Сервис для формы обратной связи.
Сервисов форм достаточно много, мы разберем форму от яндекса. Сервис позволяет составить свою форму практически с любыми полями. Настроить тему, почту, уведомления. А так-же, все это, можно сделать без знаний программирования так как у таких сервисов есть конструктор, с помощью которого можно собрать все визуально, перетаскивая блоки и настраивая параметры.
Для данного способа вам понадобиться:
У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.
Я собрал вот такую форму на сервисе Яндекса.
Куча различных виджетов уже готовы и доступны для вас Уведомления на почту
После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.
Способ №3. Ссылка для отправки email.
Самый простой способ реализовать связь разработчика и пользователя. Оставить свою почту на сайте. Но мы ведь любим упрощать жизнь пользователям. Поэтому разместим не просто адрес, а ссылку адрес. Выглядит такая ссылка вот так:
Такую ссылку можно усложнить и задать сразу еще и тему к примеру
При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение. Также саму ссылку можно украсить с помощью CSS стилей, но это уже совсем другая история.
Создание формы обратной связи
Привет, друзья. Сегодня хочу рассказать вам о том, как сейчас я создаю формы обратной связи для получения контактных данных пользователя.
Статья давно на сайте, но пришло время актуализировать ее, ведь с момента написания прошло более 5 лет, что-то устарело, за некоторые моменты откровенно стыдно, а что-то не так доходчиво разжевано.
С этого момента обновления статей буду делать максимально полными и подробными, чтобы вам не приходилось ничего искать на других ресурсах. Это статья, изначально, была ориентирована на форму с перебросом на страницу благодарности после нажатия кнопки «отправить».
Мы реализуем как такой вариант, так и возможность вывода сообщения об успешной отправке без перезагрузки страницы.
Создание формы обратной связи – HTML разметка
Обычно? мне хватает двух-трех полей, так как нет смысла требовать от посетителя большего и раздражать его. Продажа, обычно, случается после разговора с консультантом или менеджером, а значит все детали можно узнать по телефону.
Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.
Но, как и обещал, в этой статье мы сделаем практически все возможные варианты полей. Сначала просто получим имя, телефон и почту, а потом будем постепенно усложнять, добавляя текстовую область, чекбокс и прикрепление файла.
В большинстве случаев, для создания формы обратной связи я использую такую разметку:
Знаю, что заголовок формы не согласован с кнопкой, но лень переделывать все скриншоты. Суть же не в этом совсем. Правда?
Давайте, кратко объясню, что тут к чему. В теге ‘form’ я размещаю два параграфа. В одном будет заголовок формы, а второй послужит для вывода сообщений и уведомлений, возникающих при отправке формы. Например, о том, что сообщение успешно отправлено в варианте, когда все происходит без перезагрузки.
Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.
Параметр ‘enctype’ в теге ‘form’ нужен для того, чтобы отправлять файл. Пока можете его не писать, но, если планируете сделать так, чтобы пользователь мог прикрепить вложение к письму, то нужно оставить все как есть.
Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.
Структура проекта
Здесь нас интересует папка ‘mail’. Именно тут и происходит вся магия.
Обратите внимание, что она лежит в корне сайта.
В первую очередь давайте разберем файл ‘config.php’. Тут задаются основные настройки формы.
Основные настройки формы
В принципе я объясняю комментариями в коде что и зачем, константы имеют интуитивно понятные имена, но давайте для новичков объясню все еще подробнее.
В начале идут константы, которые отвечают за проверку обязательно ли поле или нет и какое сообщение будет выводится в случае ошибки. Например, константы для имени
То есть если имя обязательно, но не было заполнено, появиться сообщение ‘Поле обязательно для заполнения’. Вот так:
Далее идет константа с сообщением, которое увидит пользователь при успешной отправке, давайте, пока, реализуем такой функционал, а потом с перебросом на страницу благодарности.
Можете вывести любое сообщение, которое подходит в вашем случае.
Теперь самое главное. Если прошлые вещи можно было оставить по умолчанию, то теперь нужно настроить отправку на почту. Так как в скрипте используется SMTP протокол передачи почты, то нужно узнать несколько параметров у вашего почтового сервиса. Это:
пароль и логин у каждого свои, а ‘HOST’ и ‘PORT’ для популярных почтовых сервисов я приведу в списке.
Сервис
HOST
PORT
Яндекс
ssl://smtp.yandex.ru
465
Gmail
smtp.gmail.com
465
Mail.ru
ssl://smtp.mail.ru
465
Будьте внимательны с этими параметрами, так как тут легко сделать ошибку и ничего приходить не будет.
С остальным все проще, объяснять по сути и нечего:
Обратите внимание, что почта, указанная в ‘const SENDER’ должна совпадать с почтой, которую указали в ‘LOGIN’.
Валидация формы перед отправкой
Я не стал очень сильно заморачиваться с валидацией, потому как всем, все равно, не угодишь и сделал валидацию на обязательность заполнения полей, а в случае с полем для ввода электронной почты то еще и на корректность ввода адреса.
Все вам понадобится дополнительная валидация, все это реализовано в файле ‘valid.php’.
Еще, я подумал, что было бы полезно сделать так, чтобы скрипт не отправлял данные, если не заполнено хотя бы одно из контактных полей. То есть телефон или email. Вот так я это реализовал.
Если вам это не нужно или у вас какой-то другой способ связи, поменяйте под свои нужды или удалите. Вот как это выглядит сейчас:
Отправка формы
Отправка формы осуществляется в файле mail.php, там нечего менять и настраивать. Оставьте как есть, если плохо разбираетесь в php. Если соберетесь добавить свои поля и, по какой-то причине не захотите скачать файл, предложенный мной ниже, где мы будем добавлять обещанный ранее функционал, то в тело письма, после валидации, необходимо передать переменные с данными полученными из формы. Делается это в 34 строке.
Также, в отправке формы и валидацие участвует файл ‘mail.js’. Именно он помогает реализовать отправку без перезагрузки страницы. Тут тоже ничего менять не нужно, если вы не планируете использовать страницу благодарности, а вам достаточно того, что уведомление об успешной отправке выводится в форме.
На этом, в принципе, с основной формой можно заканчивать. Дальше будут только «навороты».
Форма обратной связи с основными полями
Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.
Переброс на страницу благодарности
Итак, открываем файл ‘mail.js’, находим участок кода:
Внимательный читатель мог заметить, что мы передаем GET-параметр, когда указываем страницу для перехода и это не случайно, вы же не хотите, чтобы случайные посетители вашей страницы благодарности появлялись в статистике, если у вас будут настроены цели на посещение этой страницы, поэтому мы реализуем простейший механизм для переброса на главную, если они зашли на страницу без этого параметра в адресной строке. Конечно, шанс что пользователь все равно попадет сюда есть, но он гораздо меньше.
Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.
Если у вас уже страница в ‘html’, просто измените расширение. Это никак не повлияет на работоспособность.
Итак, давайте как обычно начнем с разметки. В принципе, это обычная html страница, которую вы вольны оформлять как душе угодно, но, чтобы сработал наш механизм, при котором случайному человеку не будет показываться страничка нам нужно обернуть ее в небольшой php-код.
В первой строке мы отлавливаем наш GET-параметр, и, если он совпадает с заданным, то показываем страницу, если нет, то перебрасываем пользователя на главную.
Кроме того, я закомментировал строку, при помощи которой можно автоматически возвращать посетителя на главную через заданный промежуток времени.
То есть это строка говорит, что через 4 секунды после открытия этой страницы, перекинь автоматически посетителя на главную страницу. За это время, человек успеет прочитать ваше сообщение и его благополучно вернет на главную.
Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.
Маска ввода номера телефона
Конечно же вам может понадобиться маска для ввода номера телефона. Я уже делал пару статей на эту тему, поэтому не буду слишком подробно описывать как это делается, просто покажу код.
Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.
Подключаем после jQuery. Я делаю это так:
Теперь необходимо инициализировать скрипт.
После этого маска успешно появилась в поле телефона:
С этим, думаю, более-менее понятно. Теперь давайте потихоньку добавлять поля для ввода сообщения, чекбокс с принятием пользовательского соглашения и файла.
Область для ввода сообщения
Конечно же многим из вас может понадобится поле для ввода сообщения. Для того, чтобы получить его мы воспользуемся тегом ‘textarea’. Добавьте следующую разметку в форму:
Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:
Теперь необходимо передать данные в файл валидации ‘valid.php’ и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.
Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.
Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:
Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’.
В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:
А затем, ниже, напишем проверку:
По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.
Теперь, если все сделали правильно, в письме будут приходить данные и из этого поля.
Еще раз повторюсь, если добавление этого поля показалось слишком сложным, то в конце статьи будет исходник, где можно просто в форме удалить лишнее инпуты, и все будет прекрасно работать.
Checkbox
Настало время добавить ‘checkbox’ с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.
Создаем разметку в форме, определяем в ‘config.php’ обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.
Итак, checkbox. Добавим разметку:
Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.
Идем в файл ‘config.php’ и делаем поле обязательным.
Далее открываем файл ‘valid.php’ и добавляем следующий код:
Теперь переходим в файл ‘mail.js’ добавляем ‘div’ в который будет выводится ошибка, если она есть, и обработчик ошибки:
Осталось в тему письма добавить переменную с текстом о принятии соглашения.
В принципе, если поле обязательно модно было этого и не делать, но пусть лучше будет.
Добавление файла
Многим может понадобиться возможность отправки файла, давайте реализуем и этот функционал. Я уже подготовил все, вам остается только добавить разметку и выбрать обязательное ли поле для заполнения.
Настройки в файле ‘config.php’:
Вот так теперь выглядит форма.
А вот так выглядят пришедшие данные.
Вот такая большая статья о создании формы обратной связи получилась.
Форма обратной связи с дополнительными полями
Создание простой формы на HTML, CSS и JavaScript
Дата публикации: 2011-02-23
От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.
Автор: Павел Карабило
Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1.
Для начала, давайте определимся, для чего мы будем создавать форму. Если бы мы создавали форму для регистрации на крупном портале, то нам пришлось бы разместить на ней поля для ввода имени, фамилии, логина пользователя, его адреса электронной почты, и, возможно, для его реального адреса, поле для пароля, и т.д. В общем, нам придется разместить на форме целую кучу полей, в которых мы запутаемся, а гости нашего сайта – тем более. Я решил сделать простейшую форму для самой простой гостевой книги, для этого мне понадобится:
поле для ввода имени автора сообщения;
поле для ввода адреса его электронной почты;
текстовую область для написания сообщения;
кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.
Добавляем форму обратной связи на сайт
Всем привет! В этой статье вы узнаете, как создать всплывающую форму обратной связи для html и wordpress сайтах. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.
К примеру, посетитель зашел на ваш сайт, просмотрел необходимую ему информацию, вроде бы уже готов заказать ваш товар или услугу, но вот звонить в другой город и тратить большие деньги ему совсем не хочется. Вот в такие моменты и приходит на помощь всплывающая форма обратной связи.
Создаем форму обратной связи на html
Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас.
Вставляем в нужное место на сайте следующий код:
По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.
Код вставлен, что мы видим?
Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:
Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.
Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.
Выглядит это вот так:
Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.
Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.
Подключаем скрипт перед закрывающимся тегом. Не забудьте поменять путь к файлу на свой. Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.
Для этого перед закрывающимся тегом вставьте следующий скрипт:
Как работает этот скрипт?
Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.
Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.
Добавляем всплывающую форму обратной связи на сайт
Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней.
Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.
Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой.
Далее создаем кнопку, при клике на которую будет вызываться форма.
И придаем ей стили.
Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline». Без этого всплывающая форма не будет открываться на сайте.
После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне. Для этого нужно заменить стили #inline со старых на новые.
В итоге у нас получается вот такая кнопочка.
При нажатии на которую открывается всплывающее окно с обратной связью.
Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.
Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php.
Форма обратной связи для wordpress
В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.
Еще нет сайта на данном движке? Рекомендую прочитать статью о том, как установить wordpress на свой домен.
После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.
Вводите название новой формы, выбираете поля, которые должны быть в форме. Обычно вполне хватает стандартных, которые добавлены автоматически. Сохраняете форму. После сохранения на экране появится шорткод, который нужно будет вставить на страницу, где должна будет отображаться контактная форма, например, на странице Контакты.
Копируете этот код, переходите на нужную страницу, в визуальном редакторе выбираете формат «Текст», вставляете этот шорткод и сохраняете страницу.
Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:
Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.
Делаем всплывающую форму обратной связи для wordpress
Я сам не люблю добавлять лишние плагины на данный движок, так как они грузят сайт, замедляя его работу. Поэтому для всплывающей формы использую обычно 2 варианта.
Первый способ уже был описан выше, поэтому сразу перейдем ко второму.
Для начала, вставляем следующий код сразу после открытия тега body.
Давайте разберемся что есть что:
Обратите внимание на то, что у вас id и название формы могут отличаться от моих. Новый код добавлен, теперь задаем ему стили.
Сохраняем код и проверяем. Теперь форма должна быть расположена по середине вашего экрана, а сзади нее полупрозрачный затемненный фон. Все хорошо, но осталось добавить последнее – скрипт, который будет открывать и прятать данную форму при клике на нужные кнопки.
Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.
Для начала рекомендую сделать все на локальном денвере, а уже затем перенести сайт на wordpress к себе на хостинг для дальнейшего тестирования. Ну вот кажется и все.
Мы рассмотрели с вами несколько вариантов создания формы для обратного звонка. Надеюсь, что у вас не возникнет проблем с внедрением формы на ваш сайт. Если же у вас возникнут проблемы или вопросы, вы всегда сможете получить консультацию в комментариях.
UPDATE 06.06.2018
Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:
А скачать исходники первых двух форм, вы сможете по ссылке
UPDATE 04.07.2018
По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.
Посмотреть пример, а также и скачать исходники обновленной формы обратной связи и всплывающей формы теперь можно online, по ссылкам:
Отдельного внимания зазлуживает реализация формы обратной связи на WordPress без использования плагинов.
Смотрите также
Зачем нужен хостинг на SSD
Твердотелые накопители получили широкое применение не только у персональных пользователей, но и у компаний, пр …
Какой домен для сайта выбрать: новый или старый?
Запуск сайта на старом домене позволяет обойти «песочницу» поисковых систем, но какие риски это несет? Давайте …
271 Комментариев — Развернуть
а можно поставить это все на сайте Joomla? Помогите разобраться нужно очень как поставить эту форму на лединг пейдже плиз
Добрый день. Данная форма не имеет привязки к движку. Ставить ее точно по такому же принципу, как и на любой сайт. Единственное вы не сможете добавить форму через плагин Contact7, так как он для движка WordPress.
Не приходят письма. Ошибок форма не выдаёт
Здравствуйте. Чтобы я мог что-то вам подсказать, нужно больше информации)
Пример отличный. Супер все работает. Автору — спасибо.
Вопрос вот в чем. Ситуация (при всплывающем окне): — пользователь не до конца заполнил и закрыл — отправил — зафиксировалось, что отправилось — отправилось с ошибкой или завис статус отправки При нажатии на крестик — закрыть форму — данные не сбрасываются. тоесть она остается в последнем состоянии, как вызывалась/заполнялась раньше. Предположим человек заполнил один раз — отправил. захотел второй раз отправить — а там говориться — уже отправлено… Как сбрасывать данные и приводить форму в первоначальный вид при нажатии на «закрыть» или при успешной отправке?
Добрый день. Все зависит от того, какую форму вы себе ставили. Просто на html или использовали плагин? При успешной отправке форма очищается самостоятельно.
Не совсем верно будет не давать пользователю давать отправить вторую форму. Быть может он ошибся с вводом телефона или почты, понял это и решил отправить еще раз форму с верными данными. А тут ему сообщение, что уже все, нельзя больше.
А для фиксации введенных данных в полях — можно использовать куки.
В большинстве случаев в этом нет необходимости, поэтому в статье и не рассматривались данные вопросы.
Однако.. как реализовать следующий функционал (форма из примера «всплывающая форма обратной связи» с использованием и JS и JQuery): 1 пример -пользователь открыл форму -заполнил поля — НЕ оправил. — нажал «закрыть» При повторном открытии формы — сохраняются данные — это нормально
2 пример -пользователь открыл форму -заполнил поля — ОТПРАВИЛ или в статусе «отправка…». При повторном нажатии на вызов окна говорится, что форма «отправлена» или в «отправке», если что-то не так. При «отправил»: — как сбросить данные, чтобы открывалась чистая форма, готовая к отправке При «отправка…» при нажатии на закрытие: — так же форма приходила в первоначальный вид — чистый, готовый к новому заполнению.
Не соображу как это сделать ((.
P.S. (дополнение) Естественно используется PHP.
Добрый вечер, Андрей. Проблем может быть несколько. 1. Ваш хостинг не позволяет отправлять письма с сайта. 2. Письмо попало в папку «Спам». Проверьте эту папку. Если письмо там — то просто нажмите кнопку «Это не спам», и письма должны будут приходить. 3. Глючат сервисы, возможно письмо придет с задержкой.
Все поля формы заполняются? В том числе и почта?
Мне, как начинающему, не понятно куда вставлять скрипты: в код страницы, в таблицу стилей или шаблон сайта? Можно уточнить?
Код формы можно вставить в подвал сайта. Обработчик sendmessage.php в корень сайта, стили в файл с css.
По ucoz подсказать не могу ничего. Никогда с ним не работал и вам не советую.
…..и к тому же ucoz не даёт загрузить файл с расширением php Можете помочь?
Тестирую код на денвере. В статье написано в форме такая строка: Пока action не поменял с # на sendmessage.php, ничего не работало и письма не отправлялись + срабатывала навигация по странице в самый верх. После замены письма отправляются. Но, после отправки отображается вместо моей страницы просто пустая страница с надписью true. Плюс никаких изменений кнопки и всплывающих сообщений об отправке не было. Скачал ваш пример и залил на хостинг страницу с формой, чтобы проверить. Такая же история: сообщения отправляются и на экране только true. Вопрос: как сделать, чтобы при нажатии на кнопку, письмо отправилось, текущая страница и навигация на ней не изменились и где-нибудь отобразилось сообщение об успешной отправке (например на кнопке или на фэнсибоксе?
Добрый день. Форма рабочая. Менять в ней ничего не надо, так как она и так после отправки заявки показывает, что форма успешно отправлена. Верните обратно в action #, иначе вы так и будете получать только страницу с true. А вот почему у вас не работает форма с ajax обработчиком — уже надо разбираться. В консоле какие ошибки показывает?
Пробовал открыть разными браузерами (хром, мозилла, макстон) и с денвера и с веба. При нажатии на кнопку просто скролл вверх и отправки нет.
У вас сайт на чем? Вордпресс или самописный движок?
Мой сайт на шаблоне от html5up. Там ничего замудреного, простой лэндинг. Но. Чтобы нам с вами было проще, в этом обсуждении я работаю конкретно с вашими исходниками и в последнем сообщении я написал ошибки не со своего сайта а с вашего примера. С моим сайтом пересечений нет. Ошибки абсолютно идентичны.
Форма работает на всех моих сайта + на всех клиентских сайтах. В ней нет ничего сложного, простая форма и обработчик. Почему у вас выдает такие ошибки сказать не могу, нужно смотреть детально и разбираться. К примеру файла normalize.css — здесь вообще нет. И то, что вам выдает сообщение об его отсутствии — это проблема скорее всего вашего шаблона.
Далее. В форме есть проверка на валидность введенных данных. Если что-то введено не так, то отправки не будет. Либо, если вы уберете поля для ввода e-mail, форма тоже не отправит, пока не будет изменен код обработчика.
Я не сомневаюсь, что у вас всё и везде работает. Но, конкретно пример и эти ошибки я обнаруживаю из вашего архива http://seoblognik.ru/wp-content/uploads/2016/05/hide-form.zip Повторюсь, что мой сайт и шаблон не пересекается с вашим примером. Что касается normalize.css, он запрашивается в файле index.html в папке «форма обратной связи» из вашего архива.
Посмотрю что там сегодня, и обновлю архив.
Когда обновите архив? У меня тоже не работает я полностью вставляю вашу форму и письма не уходят даже ошибки не выдает.
Форму обновил. Проверил на своем сайте, теперь все должно работать.
Так же проверил. Всё прекрасно работает. Большое спасибо!
Я то и пришел сюда по запросу форма обратной связи, другу нужна на сайт. И не удержался соблазну, как дитя пошалил. Спасибо огромное за форму, просто супер! Поставила, работает. Только вот хотела поменять сообщение, которое выдается после отправки. «Благодарю!» И не могу найти, откуда оно выводится. Не подскажете?
Успешно! Ваше сообщение отправлено 🙂
Напишите туда свое сообщение и оно будет показываться.
Тоже почему то не работает, работает только контроль заполнения e-mail, после нажатия на кнопку отправить форма очищается, никаких сообщений не выдается.
Александр, обновил вчера архив. Все должно работать.
Все работает, спасибо
Скажите а как сделать что бы какие то поля не были обязательные. И как добавить поля где в письме будет написано с какого сайта это пришло.
Вот здесь задаются условия проверки. Можно убрать из этого не нужные проверки.
добрый вечер. У меня после отправки нет сообщения что письмо отправилось. и письма так же не приходят на почту
Добрый вечер, Оксана. Нужно больше конкретики, чтобы ответить.
Спасибо за форму вернее код css и html никак не мог найти адаптивную подходящую форму, а ваша отлично подстраивается. Устанавливал на Modx отправка через Ajax все отлично.
Помогите пожалуйста у меня уже почти сутки не чего не получаеться. Пробую все кончено же методом тыка но то одно то другое.
Мне нужно на одной странице разместить две формы. 1 с эл. почтой и сообщением 2 только с номером телефона.
Я где есть вожу разные йди создаю два обработчика, и два скрипта проверки для каждого свои айди
Но то проверку не проходи то не отправляет.
Если создаю просто две полные формы все хорошо, но как только начинаю убирать что то все плохо.
Добрый день, Сергей.
1) Для двух и нескольких форм на сайте нужно обязательно менять все id, а так же name у форм + менять все это в обработчике. Также нужно будет создать второй файл sendmessage2.php. Вы все это сделали?
2) Для того, чтобы отправлялась форма без проверки валидности электронной почты, а только с номером телефона, нужно подправить обработчик.
jQuery(«#send2»).on(«click», function() < var emailval2 = jQuery(«#email2»).val(); var namevl2 = jQuery(«#name2»).val(); var namep2 = namevl2.length; var phonevl2 = jQuery(«#phone2»).val(); var ph2 = phonevl2.length;
Такой скрипт будет проверять заполнение двух полей: имени и телефона. Если нужен только телефон, то уберите «namep2 > 1 &&»
Не забудьте только скобочки потом поменять и поставить правильные.
У меня вообще такого кода нет!
Вот что тут нужно поменять
Вот в это варианте все отправляется. Если в первой форме оставляю эл. почту и сообщение тоже все уходит, но если я во второй форме оставляю только номер телефона не работает.
Так я же вам прислал новый обработчик для формы с телефоном!
В одну строчку это сделайте
Ваша заявка принята! Ожидайте.
Сделал, не работает.
И вот это удалите jQuery(«.modalbox»).fancybox();
Удалил, не работает
Вы консоль читаете? там все ошибки написаны!
Я вам уже писал ранее, что если только телефон, то удалите namep2 > 1 && И это var emailval2 = jQuery(«#email2»).val(); var namevl2 = jQuery(«#name2»).val(); var namep2 = namevl2.length;
и это if(namevl2 == false) < jQuery(«#name2»).addClass(«error»); jQuery(«#name2»).after(«поле заполнено не верно»); > else if(namevl2 == true)< jQuery(«#name2»).removeClass(«error»); >
Спасибо, все заработало! ))))
Привет! Установил. Спрятал скрипт в кнопку. При нажатии кнопки форма не появляется, сайт переходит на страницу #inline в чем может быть проблема?
Значит что-то не так сделали. Какую ошибку показывает в консоли?
Виктор, добрый день. Папку Спам проверяли?
да, может это быть связано с конфликтом библиотек jQuery, который присутствует на моем сайте jquery-1.7.1.min.js конфликтует похоже с jquery/3.1.0/jquery.min.js»
Если пишет, что сообщение отправлено, то дело не в конфликте. Нужно смотреть конкретно вашу форму, так сказать сложно.
папку спам проверил
я вообще не знаю php, в файле sendmessage.php кроме своей почты в строке «$sendto = «viktor-zel@mail.ru»; // Обязательно измените e-mail на свой» больше ничего менять не нужно?
Нет. Если вы не меняли саму форму или ее обработчик.
хорошо. продолжу эксперименты ))
Довольно часто еще бывает такое, что сами почтовые сервисы тупят и отправляют с огромной задержкой. Поэтому на своих сайтах еще использую смс уведомление о заявке, помимо письма.
Тоже пишет, что письмо отправлено, а на почту ничего не приходит может еще придет конечно, всего 30 мин прошло 🙂 Подскажите как Вы смс уведомление реализовали? У меня простой лендинг на html
Вариантов проблем масса. Каждую ситуацию нужно рассматривать отдельно.
сервер поддерживает отправку писем, php последняя версия, на хостинге несколько сайтов на которых стоят формы обратной связи, правда как модули к cms а тут на лендинге ни форма которая с шаблоном шла не работает ни различные которые пробовал. 🙁
Данная форма работает 100% =) Проверено уже, как на сотне клиентских сайтах, так и на всех своих сайтах.
я не сомневаюсь, что форма работает мне интересно почему у меня не работает. php файл сделал, в index.html прописал код как описано в инструкции, форма пишет что письмо отправлено, но не приходит. перепробовал разные e-mail, ничего не помогает
ЕВГЕНИЙ К. где консоль то находится? )))
Артем, правой кнопкой мыши — проинспектировать элемент — консоль.
Класс modalbox кнопке задан?
Чудеса, в файле стоит
Если не указать этот класс, то не будет срабатывать скрипт, вызывающий всплывающую форму.
он стоит. Я открываю сайт свой, правую кнопку мыши, исследовать и там стоит.
Тогда надо смотреть ваш сайт конкретно. Так не могу ничего сказать.
у меня еще лайтбокс стоит, может быть причиной проблем?
Легко. Особенно если сайт на wordpress. Довольно много конфликтов с этим. Как вариант, можно сделать так, как описано в блоке «ДЕЛАЕМ ВСПЛЫВАЮЩУЮ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS»
Вставил после body код, прикрутил стили. В итоге в верхнем левом углу надпись: обратный звонок и крестик. И все
Я вам могу посоветовать только перечитать статью и попробовать поставить все заново, следуя инструкции.
как подредактировать фон и местоположение кнопки — обратный звонок
Здравствуйте! у меня письма приходят, но на сайте дает ошибку: Ошибка 404 — страница не найдена
Похоже мы не можем найти что вам нужно Так бывает.
Может вы неправильно ввели URL, или страница, которую вы ищите была изменена, перемещена или удалена. Не грустите. Попробуйте сделать так:
Проверьте правильность URL и обновите страницу. Что мне нужно сделать, чтобы этого не было?
Вы весь код правильно скопировали?
Особенно обратите внимание на эту строчку
код скопировала весь и ошибок не дает
Скорее всего тогда идет конфликт со скриптами на вашем сайте. При клике на кнопку Отправить никуда перекидывать не должно, так как весь обработчик идет на Ajax.
Можно попробовать поочередно отключить остальные скрипты на сайте, и смотреть, перестанет ли появляться такая проблема или нет.
Все, спасибо, я нашла в чем причина.Все работает.
что то заполняешь форму пишет сообщение отправлено, а не приходит письмо, раньше все работало
Возможно проблема в хостинге
Подскажите как убрать почту и текст из формы
Сергей, смотрите выше в комментариях я выкладывал обработки без проверки валидности e-mail.
Приходит по почте вот с такими вопросительными знаками
Кодировку файла sendmessage проверьте.
Теперь наоборот, слева нормально, справа аероглифы
Номер телефона: апавпвапав
Не, просто откройте файл sendmessage и пересохраните его в UTF-8.
Чтобы прикреплять файлы нету информации?
Пока нет =) Может в дальнейшем.
Добрый вечер Евгений. Попробовал вашу форму. Изменил только свой е-майл в сендере и часть текстового наполнения. Всё выложил на ФТП и решил попробовать. Форма работает отлично, но сообщения на почту не приходят. Тестил на трех разных (яндекс, джмайл и майл). В папках СПАМ писем нет. Хостер Джино и с него нормально отправлялось на другой форме. В чем может быть ошибка?
А какую часть именно изменили?
Пытаюсь настроить форму на Joomla3.6. Форма появляется, но при нажатии на кнопку «отправить» ничего не происходит. В консоли висят слдующие сообщения: 10:28:53.748 Метод getAttributeNode() является устаревшим. Для его замены используйте метод getAttribute(). 1 mootools-core.js:108:287 10:28:55.351 Метод getPreventDefault() является устаревшим. Для его замены используйте метод defaultPrevented. 1 jquery-1.7.1.min.js:3:6598
Спасибо вам за проделанный труд, интересную и полезную статью, она очень помогла. Я слабо разбираюсь в этом, но нахожу это занятие увлекательным. Уже третий сайт делаю. Если с html и css еще более менее понятно, то ява и php темный лес. Тем не менее, я разобрался, что к чему. И поскольку я сверстал форму, подходящую к моему новому творению, я позаимствовал ваши скрипты и обработчик. Все это дело я воплотил в рабочий симбиоз. Безмерно благодарен вам, за помощь! В скрипт и обработчик я аналогично свойственному порядку добавил дополнительные поля на денвере все работает, письмо приходит с нужной инфой, ура! Только вот, теперь морочусь, пытаясь впихнуть невпихуемое, т.е. не зная, что и как работает в обработчике и скрипте, упорно стараюсь реализовать передачу файла. Так как в моей форме эта функция есть и она там, отнюдь не лишняя. Было бы здорово, если бы вы мне, да и многим другим юзерам помогли решить эту незаурядную задачу, хотя бы советом — в каком направлении двигаться. За ранее, благодарю Вас!
Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax. Не вылазит окно успешной отправки сообщения
Поставил форму, всё окей. Но вот когда нажимаю отправить, то просто висит надпись отправка… и всё.
Виктор, посмотрите консоль, какую там ошибку выдает. Скорее всего проблема в том, что указан не правильный путь к файлу sendmessage.
Добрый день! Мне нужно оставить только номер телефона, видел что такой вопрос уже поднимался, но не понял куда это вставить. Почему у Вас переменные стали с «2»? Нет готового исходника только с одним полем телефона? Спасибо.
Добрый. Переменные стали с 2, для того, чтобы разделить просто одну форму от другой. Вам это делать не нужно, если форма будет одна на сайте.
Здравствуйте, Евгений! у меня сайт без движка, когда загрузила форму обратной связи (первый вариант, описанный Вами), он выдал ошибку 405 — HTTP verb used to access this page is not allowed. The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access. Подскажите, пожалуйста, как исправить
Я сделала заявку в хостинг, после чего ошибка перестала выдаваться, но сообщения о том, что письмо отправлено, не появляется, письмо в почту не приходит, внизу страницы слева под сайтом появляется текст: ожидание кэша…, а потом сайт перезагружается
Хостинг написал такой ответ: При тестировании не обнаружено строки подключаемых библиотек fancybox. Рекомендуем выполнить дополнительную проверку на стороне используемых скриптов, либо обратиться к разработчикам сайта для решения проблемы. Хостинговых ошибок не зафиксировано. Помогите, пожалуйста, разобраться
Екатерина, добрый день! Подсказать ничего не могу, так как очень сложно найти причину, не видя сам сайт.
Возможно просто идет конфликт среди подключаемых скриптов.
спасибо огромно все работает. я использую локальный сервер и по началу ничего не получалось, а потом я наше все отправленные сообщения в папке сервера!
Добрый день. У меня в консоли выдаёт ошибку ReferenceError: msgval is not defined
И письмо не уходит.
Добрый день. Ошибка означает, что у вас либо нет, либо не правильно задано значение «msgval». Скорее всего вы просто убрали с сайта поле «ваше сообщение».
Мне как раз надо чтобы не было поле E-Mail и поле сообщение, только имя и телефон.
Тогда вам нужно немного изменить скрипт. Убрать из него проверку на заполнение текстового поля и e-mail. Если вы просто удалите их, но при этом не измените скрипт, то форма работать не будет.
А что именно надо там убрать? Я просто не силён в скриптах ((
Здравствуйте. Форма работает. Но периодически приходят письма с пустыми полями. Хотя если их не заполнить, то отправки не происходит. Как такое может быть?
Добрый день. Такое происходит, когда кто-то обращается к файлу обработчику напрямую. вашсайт.ру/sendmessage.php
Может его переименовать?
Попробуйте. Только не забудьте сменить название файла и в скрипте
Но в коде всё-равно видно название файла. Может можно как-то избежать обращения напрямую?
Посмотрите на моем сайте, я поставила вашу форму. Почему строка для почты такая растянутая? Как сделать так чтобы это поле было аккуратным и не сливалось с полем сообщения?
Добрый вечер. Замените стили на
Добрый день! Прикрутил Вашу форму к своему сайту, все работает отлично, спасибо большое! Подскажите пожалуйста, возможно ли добавить в форму обратного звонка с именем и телефоном еще поле «Удобное время для звонка» и возможно ли там реализовать возможность выбора диапазона времени?
Добрый день. Да можно. Если нет желания разбираться самим, могу настроить вам за символическую плату. Пишите в скайп foggis_store., решим ваш вопрос.
Добрый день! Как сделать почту необязательной?
Здравствуйте. Выше я уже писал скрипт, в котором почта не обязательная.
У меня есть проблема. Стоит 3 формы. На почту письма приходят, но вот не срабатывает аякс, то есть не закрывается окно. Просто стоит окно благодарности и в консоли выдаёт ошибку
Uncaught TypeError: Cannot read property ‘close’ of undefined at :1:16
Доброе. Идет конфликт скриптов у вас.
А как понять где именно? Я уже сутки маюсь.
Для начала нужно понять на чем сделан ваш сайт. Движок или чистый html.
Если на движке, возможен конфликт с другими fancybox или lightbox плагинами.
Если на html, можно попробовать поочередно отключать скрипты, и посмотреть, когда пропадет эта проблема.
Сайт сделан на Bootstrap, из скриптов стоит родной Bootstrap и скрипты от формы + маска. Отключал по очерёдно, но проблема не решилась.
А версия jquery? Попробуйте поставить 1.8.3
Версия стоит по умолчанию Bootstrap 1.12.4
Ну так попробуйте поставить jquery 1.8.3 =)
адрес сайта пришлите, посмотрю
Так а в чем проблема? Все же работает на сайте у вас.
Сама форма работает, но окно с благодарностью не закрывается, и в консоли показывает ошибку.
Так форма и не должна закрываться, она же не всплывающая. Закрываются только те, что открываются во всплывающем окне.
Понятно, тогда такой вопрос, а можно сделать, чтобы форма закрывалась?
Евгений! Буду очень благодарным, если подскажите как это сделать.
Рассматривать код каждого сайта, у которого возникают проблемы с формой — времени нет совсем. Могу натолкнуть на мысль.
В скрипте есть код setTimeout(«jQuery.fancybox.close()», 5000); — после успешной отправки сообщения, сплывающая форма закрывается. Так как у вас она не в модальном окне, вам эту строчку нужно заменить. Например, на:
А для формы #inline задать overflow:hidden;
Что именно криво в мазиле?
Попробуйте с хостинга отправить.
Спасибо за отличную статью. Но столкнулся с трудностью, может натолкнете умной мыслью куда копать? Скачал ваш архив со всплывающей формой для html все подключил как было написано, форма открывается, поля заполняются, проверка заполнения работает, но вот при нажатии кнопки отправить появляется надпись отправка… и ничего больше не происходит. По всему ajax не хочет общаться с файлом sendmessage.php. Не очень силен в ajax, как и в php, но путь к файлу указывается верно (проверял в консоли), ошибок в консоли не возникает никаких по скриптам. В принципе пробовал запускать Вашу версию из архива так как она там представлена, эффект тот же( Проверял и на локальной машине и на хостинге). Подскажите куда смотреть? или каким образом отладку произвести?
Добрый день. На локальной вроде и не должно работать. По поводу отправки, возможно причина в хостинге. Они часто блокируют отправку сообщений, чтобы избежать спам. Тем более, если хостинг бесплатный.
День добрый. форму поставил. пробую отправить. заполняю всё. пишет отправлено. а писем не получаю. помогите.
Форма без ввода почты? Только телефон и имя? Папку спам проверяли?
проверял на хосинге hostland.ru на других сайтах с отправкой проблем не было. Подскажите хостинг на котором гарантировано должна работать отправка
Сижу на beget.ru уже несколько лет. Все хорошо работает.
а что насчет jino.ru? я на этом хостинге работаю.
На джино сидел несколько лет назад. Не очень понравилось — были частые перебои. Сейчас не знаю, как они там, много времени прошло, возможно и исправились)
Здравствуйте! Ваша почтовая форма одна из самых лучших, которые я видел в интернете. У меня к вам убедительная просьба пожалуйста в связи с новым законом добавьте пожалуйста еще одно поле, «Я согласен с использованием моих персональных данных для обработки данного обращения», где необходимо будет поставить галочку о том что, клиент согласен с обработкой его персональных данных. Мне необходимо использовать две ваши формы обычную и со всплывающим окном, так чтобы они не мешали друг другу. Благодарю Вас за понимание, за Вашу почтовую форму. С уважением к Вам, наилучших пожеланий. Жду от Вас ответа и помощи. Евгений ______________________________________________________________________________________ С 1 июля ко мне может прийти штраф за сбор персональных данных. Если на моем сайте пользователь оставляет свою контактную информацию, например имя, телефон и адрес электронной почты, то на меня автоматически распространяются поправки в статье 13.11 КоАП, которые вступят в силу уже 1 июля. Разные виды нарушений, связанные со сбором, хранением и использованием контактной информации клиентов повлекут за собой административную ответственность: штраф от 1 тысячи (для физических лиц) до 75 тысяч рублей (для юридических лиц). Что необходимо сделать, чтобы не получить штраф? Обратите внимание: вы уже нарушаете закон, если не настроили ваш сайт в соответствии с перечисленными пунктами! — Разместите в открытом доступе на сайте информацию об обработке персональных данных пользователей. Если такой страницы нет, вас ждет штраф. — Не собирайте контактную информацию, которая не соответствует целям. Если у вас на сайте есть только форма обратного звонка, то не за чем в ней просить указать дополнительно еще и адрес электронной почты. Если вы собираете данные, для которых не прописаны цели, вас ждет штраф. — Каждый пользователь должен оставить письменное согласие о том, что знает об обработке вами его персональных данных и согласен с этим. Нет соглашения – вас ждет штраф. — Предоставляйте пользователю всю информацию о том, какие именно его данные вы храните и используете. И удаляйте их из базы по первому же требованию пользователя. — Храните данные в защищенном месте. На российском сервере или в любой точке мира – в законе не прописано, но лучше подстраховаться и выбрать российскую компанию. Это тот минимум, который просто необходимо соблюдать.
Добрый день. Пишите в скайп foggis_store., обсудим доработку.
Дмитрий, здравствуйте. А вы уверены, что ваш OpenServer отправляет реальные письма на почту?
Здравствуйте, поставил скачанный с вашего сайта материал себе на денвер, но письма не приходят. Почту прописал.
Добрый день! С денвера и не должны приходить.
На хостинг выгрузите, и форма будет работать.
Вставьте код формы и обработчик на всех страницах, на которых они должны отображаться)
но до этого я додумался кончено, не стал бы писать сюда. Вставляю и никак не отображает на других страницах. Только на главной имеется
Да обработчики забыл вставить. Спасибо вам за то что, помогаете тем людям которые нуждаются в этом, в том числе и мне. Благодарю)
Добрый день, прошу прощения, не подскажите как сделать так, что бы письмо отправлялся в почту отправителя, после того, как он его ввел? Заранее спасибо.
Не совсем понял что именно нужно? Чтобы письмо приходило на почту, которая была указана в форме? Т.е. каждый раз новый получатель?
на почту которая указана на форме, и на почту,которая указана в коде.
Попробовал, к сожалению не получилось.
Спасибо Вам огромное. Очень сильно выручили!
А поставить от спама, можно что нибудь?
Можно, но нужно искать информацию в гугле.
Одну форму оберните в вторую в И задавайте стили, исходя из id формы.
Установил форму, сообщения приходят, но все поля пустые, и кнопка зависает с «отправка…»
Смотрите консоль. Там все ошибки показываются.
В консоли ошибок нет
Значит что-то не так поставили. Не должно быть проблем с формой.
сделал на тестовом сайте, поставил всё тоже самое(тоесть не вручную, а просто файлы скопировал потому что там всё одно) и всё заработало.
Значит конфликт у вас где-то идет.
Добрый день. Как после отправки письма, перейти на предыдущую страницу?
Эта страница для всех посетителей имеет один адрес?
Замените строку setTimeout(«$.fancybox.close()», 1000); на setTimeout(window.location.href = «http://адрес.страницы»);
Теперь сообщения не отправляются и не выходит сообщение об успешной отправке.
Сообщения должны отправляться. Значит вы что-то не так вставили.
Смотри у меня только на главной кнопки работают (index.html) и выдают что сообщение отправлено, на почту письмо приходит.. А на остальных страницах при нажатии просто кнопка не выдает отчет что сообщение отправлено, и при проверки на почту письма нету..
Не видя сайт, и его код, я не могу ничего посоветовать.
В начале все было хорошо, но потом пошел спам. Куча писем приходит.
Танцы с бубном. Все поставил, скопировал только вашу форму, чтобы попробовать как работаете — ничего! Как не пытался… форма открывается, работает, но сообщения не приходят. С другого сайта где стоит форма обратной связи другая- все приходит ваша форма нет. Хостинг у них один. Куда рыть не знаю… Срок ожидания писем — сутки
У формы есть поле для ввода почты?
Все заработало. Скажите как можно защитить файл обработчик от стороннего доступа. В ветке писали уже об этом, что может идти спам, напрямую через файл обработчик, минуя страницу заполнения форм. По коду страницы можно увидеть где находится файл обработчик, и как я понял спамить через него.Как можно защититься?
Добрый день. Пробовал переделать форму не получается. Хотелось бы изменить немного. Оставить имя, телефон, и задание параметров — цифровых — но пробую переделать переменные — форма перестает работать. Не могли бы вы подсказать как проще переделать ее в таком направлении?
Добрый день. В обработчике стоит условие, что если поле email не заполнено корректно, то форма отправляться не будет.
Возьмите за основу второй обработчик, в котором нет email, там это условие убрано.
Евгений | 29.05.2017 16:45 Здравствуйте! Ваша почтовая форма одна из самых лучших, которые я видел в интернете. У меня к вам убедительная просьба пожалуйста в связи с новым законом добавьте пожалуйста еще одно поле, «Я согласен с использованием моих персональных данных для обработки данного обращения», где необходимо будет поставить галочку о том что, клиент согласен с обработкой его персональных данных. Мне необходимо использовать две ваши формы обычную и со всплывающим окном, так чтобы они не мешали друг другу. Благодарю Вас за понимание, за Вашу почтовую форму. С уважением к Вам, наилучших пожеланий. Жду от Вас ответа и помощи. Евгений ______________________________________________________________________________________ С 1 июля ко мне может прийти штраф за сбор персональных данных. Если на моем сайте пользователь оставляет свою контактную информацию, например имя, телефон и адрес электронной почты, то на меня автоматически распространяются поправки в статье 13.11 КоАП, которые вступят в силу уже 1 июля. Разные виды нарушений, связанные со сбором, хранением и использованием контактной информации клиентов повлекут за собой административную ответственность: штраф от 1 тысячи (для физических лиц) до 75 тысяч рублей (для юридических лиц). Что необходимо сделать, чтобы не получить штраф? Обратите внимание: вы уже нарушаете закон, если не настроили ваш сайт в соответствии с перечисленными пунктами! — Разместите в открытом доступе на сайте информацию об обработке персональных данных пользователей. Если такой страницы нет, вас ждет штраф. — Не собирайте контактную информацию, которая не соответствует целям. Если у вас на сайте есть только форма обратного звонка, то не за чем в ней просить указать дополнительно еще и адрес электронной почты. Если вы собираете данные, для которых не прописаны цели, вас ждет штраф. — Каждый пользователь должен оставить письменное согласие о том, что знает об обработке вами его персональных данных и согласен с этим. Нет соглашения – вас ждет штраф. — Предоставляйте пользователю всю информацию о том, какие именно его данные вы храните и используете. И удаляйте их из базы по первому же требованию пользователя. — Храните данные в защищенном месте. На российском сервере или в любой точке мира – в законе не прописано, но лучше подстраховаться и выбрать российскую компанию. Это тот минимум, который просто необходимо соблюдать.
Евгений К. | 29.05.2017 17:34 Добрый день. Пишите в скайп foggis_store., обсудим доработку.
Галочку будет играть роль в проверки формы?
Как создать форму обратной связи для сайта на облачных функциях
С помощью форм обратной связи на сайте можно организовать сбор отзывов от посетителей или приём заказов на услуги или товары.
Разберём пример HTML-страницы и облачной функции для отправки содержимого формы обратной связи на электронную почту:
Простая форма обратной связи
В этом примере сделаем форму, в которой спросим у пользователя его имя, телефон и обратную связь, которой он хотел бы поделиться: проблемой или идеей для сайта.
HTML внешнего вида формы обратной связи будет выглядеть так:
Приведённый код есть в нашем github-репозитории.
В коде по событию «submit» отправляется AJAX POST-запрос в облачную функцию с содержимым веб-формы. Для этого подключена jQuery, хотя вместо неё может быть другая реализация отправки POST-запроса. Чтобы форма выглядела красиво, использован Bootstrap4, но оформление может быть любым.
Перейдём к облачной функции, которая будет отвечать за обработку полученных данных.
Содержимое формы можно сохранять в СУБД, в Файловое Хранилище, отправлять на электронную почту, в Telegram, в Slack, в свою CRM-систему и так далее — вариантов много. Чтобы решить задачу наиболее общим способом, на каждое обращение будет реализована отправка письма на указанную в настройках функции электронную почту.
Код такой функции будет выглядеть так:
Приведённый код доступен в нашем github-репозитории.
Код превращает все полученные аргументы в форматированный JSON. Подключается к SMTP-серверу и отправляет письмо в виде текста.
Здесь нужно задать некоторые настройки в переменных окружения, в том числе для подключения к SMTP-серверу, например mail.google.com или mail.yandex.ru.
В итоге есть HTML-форма, которая шлёт AJAX запрос в облачную функцию. При этом URL облачной функции «спрятан» внутри Javascript-кода намеренно, чтобы тривиальные crawler-боты не могли слать спам через эту форму, обнаружив в ней атрибут action.
Форма обратной связи с CAPTCHA
Чтобы отсеивать любых ботов, создадим форму обратной связи с CAPTCHA.
Чтобы добавить CAPTCHA на форму, воспользуемся сервисом reCAPTCHA v3.
Переделать HTML из предыдущей главы в следующий:
Приведённый код доступен в нашем github-репозитории.
Таким способом можно защитить вызов облачной функции от crawler-ботов.
Для полной защиты нужно провалидировать результат проверки reCAPTCHA со стороны сервера. Это можно сделать так:
Приведённый код доступен в нашем github-репозитории.
Реализована форма обратной связи и обеспечена полноценная защита от спам-ботов.
Стилизованная рабочая форма обратной связи
Создание формы обратной связи с валидацией, оформлением, отправкой письма и описанием
Преимущество данной формы в том, что в ней нет необходимости ставить капчу и мучать тем самым ее отправителей, а не спамботов.
Валидация заполненных полей осуществляется средствами jQuery, плюс дополнительно можно добавить проверки на php
Так выглядит форма:
HTML код формы:
Немного о коде:
Комментарии:
Добрый день, письма не приходят на майл… в логах ошибка вот такая [Wed Jun 29 09:15:51 2022] [warn] [client 178.208.73.8] mod_fcgid: stderr: PHP Notice: Undefined index: frm_check in /home/httpd/vhosts/comilifo.md/httpdocs/send.php on line 23, referer: http://comilifo.md.mcpre.ru/contact.html
Ошибка должна пропасть, но письма вряд ли поэтому не приходят. Если пользуетесь телеграмом, лучше туда отправку сделать или использовать PHPMailer для отправки.
пользуюсь телеграмом, как это сделать?
Где взять token и chat_id поищите в интернете, там много статей, как сделать телеграм бота.
Сори, все гуд, сам неверно подключил
В css нету класса forma. В связи с чем она отображается не так как на фото
Подскажите. В чем может быть причина. При нажатии на кнопку ничего не происходит. http://valerape.beget.tech/ Сначал пытался вставить в сайт, потом уже просто создал отдельный для настройки. Версии jquery пробовал разные.
Или разместите script.js ниже формы
Спасибо. Сместил скрипт в конец и все заработало.
Письма отправляются, но сообщений об отправке нет. РНР8. Как исправить? Спасибо.
Александр, доброго времени суток. Возможно ли сделать вызов формы при нажатии на кнопку, всплывающим окном, допустим в шапке на сайте кнопка — |Заказать звонок| Посетитель нажимает и тут всплывающее окно. Заполните форму и мы вам перезвоним. В принципе форма у нас есть на сайте всплывающая. Но хотелось бы что бы посетитель мог ввести сообщение.
Приветствую. Друг, вроде всё сделал как ту указал. Но что-то не работает. Жму на отправить и ничего не происходит. Вот тут: ссылка Подскажи плиз, в чем я не прав?
перед Всёравно не работает. Почта то приходит, но после нажатия кнопки отправить не появляется сообщение об отправке, как у вас. Посоветуйте плиз как подключить библиотеку и какую версию, чтобы работало.
зы: «скрипт» в коде правильно написан, просто ваша форма комментария не пускает отправить, поэтому тут заменил.
Завтра днем погляжу, отпишу что не так, хорошо?
В PHP коде эта строчка есть? echo json_encode($return_arr);
да, конечно есть. Код в точности скопирован ваш, только заменен email.
Даже не знаю.. что то в php файле скорее всего. На ошибку форма срабатывает, а на успех — нет
я прошу прощения, что надоедаю, но может ещё будут мысли почему не работает? очень уж понравился ваш подход к формам.
Смотрите PHP, что то там. Я сейчас взял 1 в 1 вашу форму и 1 в 1 свой PHP-файл отправщик после отправления, форма скрылась и появилось — Ваше сообщение отправлено!
Заметил вот что: У меня на сервере стоит PHP 7.3.33 и форма не работает (письмо отправляется но после отправки не появляется сообщение об успешной отправке). Я поменял PHP на версию 7.4.26 и форма заработала нормально (появляется сообщение об успешной отправке). Но мой сайт (CMS Битрикс) на 7.4.26 не работает(. Может подскажете что такого в вашем коде, что не хочет обрабатываться на версии 7.3.33?
Разобрался. Прошу прощение за панику. Форма отлично работает. Спасибо Вам!
Подскажите пожалуйста как изменить надпись Ваше сообщение отправлено. В коде js меняю на Message sent но всеравно на руском остается. Спасибо!
Интересно как же заставить работать одновременно две формы, и почему не срабатывают две.
В JS нужно немного поменять, через each сделать форму. Никак не соберусь обновить тут коды…
Очень ждем, а то хотел как раз сделать интеграцию с несколькими формами, а оно не фурычит, ставит еще одну форму не хотелось бы
Если на коммерческой основе, то хоть сейчас:)
может уже есть вариант формы с адаптацией чтобы можно было несколько форм на странице использовать). Пожалуйста)
Обновил коды в статье, попробуйте. А с PHP помогло решение?
нет, не помогло. Решил просто разместить формы отдельно от сайта, на субдомене для которого установил версию PHP 7.4.26. В таком виде работает.
Подскажите пожалуйста, что в коде поменять чтобы не все поля были обязательными для заполнения. Например имя и текст сообщения обязательные, а телефон/мыло — не обязательные. Заранее огромное спасибо.
Под HTML кодом описание
Подскажите как поиграть с размерами? Форма не влазит в высоту, слишком большая, раза в 2 бы уменьшить и соответственно шрифт поменьше.
Смотрите по CSS, там даже не зная можно догадаться, проверить и поглядеть результат. Например: height: 50px; — высота верхних полей и кнопки min-height: 170px; — высота поля с доп. инфой
Вопрос такой: как вставить в js код — цель на отправку формы метрики?
Когда форма отправлена:
всё работает по кайфу
Добрый день! Спасибо за крутое решение… долго искал
Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы
Я про отправку файлов не писал в блоге, но можно почитать тут например. Или лучше использовать что то более профессиональное — PHPMailer
Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.
Нужно результат видеть, я же не могу угодать почему оно не работает
Как показать результат? Выполняю на openserver. При нажатии на кнопку ничего не происходит. Файл стилей и файл скрипта прописаны (отлинкованы)
Когда все прописано, работает как на примере. Ошибки какие-нибудь есть в консоле?
Выдает ошибку 404, типа файл не найден. При этом запрос уходит, а ответ говорит: 404 Not Found — файл сам по пути имеется, указан как со / так и без, разницы нет. Все равно ошибка 404. Есть предположение, что где-то в системе стоит запрет на открытие файлов php, как можно дать разрешение 1 файлу, send.php?
Если 404, то это не запрет php Скиньте результат сюда или в ВК/Телеграм
Добрый день! А файл jQuery как назвать необходимо?
Обратная связь для сайта
В этом посте научу вас и покажу, как вставить скрипт крутой формы обратной связи на любой сайт, блог или интернет-магазин.
Я предпочитаю использовать готовые формы для связи, чем городить каждый раз «велосипеды» и пытаться изобрести самую лучшую форму связи. Это лишнее — есть множество бесплатных решений, упрощающих коммуникацию между владельцем сайта и посетителями и при этом экономящие время вебмастера.
Формы обратной связи на сайт — что выбрать
Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 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, а так же онлайн конструкторов и генераторов
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить о способах создания форм обратной связи, заказа, контактных и других типов, которые могут понадобиться вебмастеру для организации удобной коммуникации со своими посетителями или клиентами.
Понятно, что при использовании Joomla и WordPress вопрос обратной связи или заказа можно решить использованием различных расширений или плагинов, но есть способы, которые подойдут абсолютно для любого проекта, построенного как на чистом Html, так и использующего движок Cms (скрипты, cms, конструкторы и генераторы форм обратной связи).
Для работы классической формы в Html требуется скрипт обработчика, который чаще всего пишется на языке Php, поэтому желательно, чтобы ваш хостинг имел его поддержку (правда, сейчас даже хостинги предоставляемые бесплатно поддерживают Php).
Хотя, существуют решения и не требующие поддержки Php, и о них тоже будет упомянуто в этой статье. Никаких особо подробных описаний по установке и настройке в этой статье не будет, ибо это лишь обзор имеющихся вариантов, которые сейчас можно найти в сети.
Буду вам крайне признателен, если вы в комментариях приведете свой пример создания систем обратной связи (желательно оригинальный, красивый и функциональный) со ссылкой на описание и страницу с примером (я пока нахожусь в процессе поиска идеального решения).
Формы обратной связи для Joomla и WordPress
Давайте посмотрим, как можно организовать обратную связь в Joomla и WordPress стандартными средствами или с помощью расширений.
В Джумле уже по умолчанию имеется бесплатный компонент «Контакты», реализующий данный функционал, о настройках которого вы можете прочитать по приведенной ссылке. Как правило, в дистрибутив этого движка по умолчанию включают самые стабильные расширения, но не всегда самые функциональные. Да и разработчики расширений для Joomla не спят и периодически появляются новые более функциональные решения.
Так вы можете скачать отдельный модуль обратной связи для Джумлы под названием Rapid Contact, который может дать вам новые возможности и функционал (см. демо). Про настройку и возможности этого модуля сможете прочитать здесь. К тому же, стандартный компонент в Joomla для реализации обратной связи не обладает достаточной гибкостью и не позволяет использовать защиту от спама (капчу), а также не позволяет создавать несколько разных контактных форм на сайте.
Эти проблемы решаются с помощью альтернативного компонента для этого движка под названием aiContactSafev, который позволяет создавать на сайте любое количество форм обратной связи (можно привязать их к разным E-mail адресам) и имеет возможность добавлять поле для загрузки файлов, равно как и любые другие типы полей.
В нем осуществляется проверка на правильность заполнения полей с выдачей сообщений об ошибках, а также aiContactSafev хранит архив всех отправленных данных и позволяет его просмотреть из админки Джумлы.
Этот компонент в своем составе имеет очень гибко настраиваемую капчу (ввод кода при отправке данных для зашиты от спама). Его можно бесплатно скачать для разных версий Джумла, а прочитать про его настройку вы сможете тут.
Теперь давайте поговорим за WordPress. Лично я пока еще не определился с этим и у меня на странице контактов красуется обычный E-mail, что в общем-то не очень здорово, ибо он уже давно попал в спам-базу, и если бы я не сумел привязать почту для домена через Google Apps к обычному ящику в Гмайле, то поток спама меня бы уже давно захлестнул с головой.
Но спаморезка Гугловской почты работает хорошо и даже чересчур хорошо, ибо и ваши письма, уважаемые читатели, иногда попадают под ее горячую руку, за что, пользуясь моментом, приношу свои извинения.
В общем-то в этом и состоит основное преимущество формы обратной связи — она позволяет сохранить инкогнито вашего почтового адреса для спамеров. Ну и еще она обычно оформлена в довольно приятную оболочку, что может добавить плюсик в отношении к вашему проекту пользователей, особенно это актуально для коммерческих ресурсов, когда удобная форма заказа или обратной связи может повысить конверсию (доход).
Собственно, по поводу WordPress. Есть один очень популярный и очень мощный плагин, который зовется Contact Form 7. Популярность его просто зашкаливает, а это значит, что что-то в нем такое есть. Правда для реализации функции капчи вам придется поставить еще дополнительный плагин Really Simple CAPTCHA.
Форму обратной связи можно будет вставить на любую страницу или в любой пост вашего блога на WordPress, а также в виджет. Фактически это своеобразный конструктор для WordPress, позволяющий обновлять информацию в форме без обновления страницы (на технологии ajax). Лично я испытывал этот плагин на KtoNaNovenkogo.ru примерно пару лет назад, и тогда он мне показался очень тяжелым и неуместно громоздким для реализации стоящих передо мною целей (обратная связь).
Понятно, что за это время Contact Form 7 мог стать уже гораздо более подходящим для реализации стоящих перед нами задач и поэтому предлагаю вам опробовать его в работе самостоятельно, опираясь на довольно подробное описание. Если вы пользуетесь каким-либо другим хорошим и легким плагином, то чиркните, пожалуйста, об этом пару слов в комментариях.
Так, это мы говорили про реализацию обратной связи в Joomla и WordPress с помощью соответствующих расширений.
Но существует еще несколько способов:
Создание формы самостоятельно. Для этого нужно будет написать ее код и оформить внешний вид с помощью Css стилей, а еще написать на Php для нее обработчик (в принципе, знаний, полученных из видеокурса Попова по Php, будет достаточно) и затем добавить CAPTCHA, проверку правильность заполнения полей и что-то еще. Сразу скажу, что сделать это будет не просто.
Все у того же Евгения Попова есть серия бесплатных уроков на его блоге, посвященных самостоятельному созданию обратной связи для сайта:
Три стратегии продвижения сайтов
Скачать (150 Мб)
Html для начинающих
Скачать (340 Мб)
Css для начинающих
Скачать (700 Мб)
Работа с сайтом в Dreamweaver
Скачать (140 Мб)
Как получить домен и купить хостинг
Скачать (120 Мб)
Как создать свой видеокурс
Скачать (600 Мб)
Как вы можете видеть, знаний и времени потребуется довольно много. Поэтому можно будет для ускорения воспользоваться уже готовыми скриптами или же онлайн конструкторами и генераторами форм.
В интернете можно найти довольно много скриптов различных форм — от самых простых (однако, требующих от вашего хостинга поддержку Php) до очень навороченных, которые устанавливаются на сайт подобно полноценной CMS и требуют для своей работы не только поддержку PHP, но и базы данных.
Данные скрипты можно будет установить и использовать практически для любого проекта — как статического (на Html), так и динамического (на Cms). В общем-то, довольно-таки удобный и универсальный инструмент, но вам придется, скорее всего, перебрать много вариантов, чтобы найти что-то подходящее именно вам.
Php скрипты форм обратной связи для сайта
Итак, давайте рассмотрим сначала несколько скриптов, которые можно бесплатно скачать и установить на свой сайт. Простенький, но довольно наглядный вариант (использующий капчу для защиты от спама) можно будет бесплатно скачать отсюда. Есть вариант обратной связи:
Там и форма заказа для сайта:
Он представляет из себя архив, содержащий в себе папку, которую нужно будет скопировать в корневую директорию своего сайт (или в любую другую). Далее на странице с контактами вы указываете ссылку с прописанным в ней путем до файла «index.php» из папки «sendmail». Для моего блога это было бы примерно так:_https://ktonanovenkogo.ru/sendmail/index.php (если бы я скопировал каталог со скриптом в корневую папку).
Настройки осуществляются с помощью редактирования содержимого файла «config.php» из директории «sendmail»:
В первой строчке вы указываете адрес почтового ящика, на который будут приходить письма, отправленные с помощью этой формы, а во второй строчке указываете желаемую кодировку текста (utf 8, windows 1251). В ряде последних строчек Php кода вы сможете поменять подписи к полям формы обратной связи или заказа. Вот и все.
Данная форма хорошо отлажена и работает стабильно, но вот ее внешний вид, возможно, покажется кому-то слишком спартанским. Лично мне очень нравятся варианты, где с помощью ajax выводятся сообщения об ошибках заполнения полей и об успешной отправке сообщения. Такие формы не требуют для этого перезагрузки страницы и производят очень приятное впечатление на посетителей.
Существует довольно привлекательный скрипт под названием Super AJAX Contact Form (можно использовать его и для заказа), построенный на основе PHP и jQuery с использованием Ajax:
Скачать его можно будет с сайта разработчика. Правда все надписи в полях будут англоязычными, но вы потом всегда сможете поменять их на русские, внося изменения в соответствующий файл скрипта и используя Google translate при необходимости.
Установка его на сайт ничем не отличается от описанной ранее и заключается в копировании папки со скриптом в корень, а на странице контактов останется только прописать ссылку до файла «index.php» (для моего блога:_https://ktonanovenkogo.ru/code/index.php).
Настройки формы обратной связи производятся в файле «\code\assets\xml\config.php», где можно прописать как отдельный E-mail для различных тем, так и один для всех (смотрите об этом подробнее в видеоуроке).
В Super AJAX Contact Form осуществляется проверка правильности заполнения всех полей и сразу же (без перезагрузки страницы — ajax во всей красе) выдаются подсказки над соответствующими полями, что сильно повышает юзабилити обратной связи:
При успешной отправке данных также выдается соответствующее сообщение. Это помогает пользователю понять, что именно сейчас происходит:
У меня возникли только замечания по работе капчи и желание интегрировать данную обратную связь в свою страницу с контактами, ибо открывать форму в отдельном окне без внедрения в дизайн блога мне кажется не совсем оптимальным решением. В общем-то на странице автора видеоурока в комментариях приводится решение этих проблем и вы можете с ними ознакомиться.
Ну и на затравочку хочу привести пример скрипта обратной связи, который можно сравнить с мини Cms, ибо у него есть своя админка, мастер установки, и для его работы вам потребуется создать базу данных (или использовать уже имеющуюся). Взамен вы получаете очень функциональный конструктор, позволяющий реализовать практически все, что угодно.
Данный скрипт называется Генератор форм обратной связи, скачать его можно совершенно бесплатно по приведенной ссылке. Обратите внимание, что для скачивания доступны три версии скрипта, которые отличаются только используемой в них капчей:
Скрипт осуществляет проверку на заполненность всех полей формы, на правильность ввода E-mail адреса, защищает от спама с помощью капчи и позволяет добавлять в практически любые дополнительные поля (загрузка файла, чекбоксы, радиокнопки, поля со множественным выбором и т.д.).
Особенностью установки этого скрипта обратной связи является использование им базы данных, которую вам нужно будет предварительно создать или же использовать уже имеющуюся (его таблицы будут помечены в ней своим префиксом, что поможет их затем без труда удалить при необходимости). Я уже писал про то, как создать базу данных в cPanel или скачать, установить и настроить phpMyAdmin.
Для описания процесса установки и настройки данного скрипта потребуется написание отдельной статьи, поэтому предлагаю вам скачать и посмотреть подробный видеоурок по этому поводу, где также будет приведено описание процесса интеграции скрипта в дизайн вашего сайта.
Конструкторы и генераторы форм обратной связи
Есть довольно много онлайн конструкторов и генераторов форм обратной связи. Например, этот сервис предлагает вам довольно удобный и функциональный интерфейс для создания конструкций практически любой сложности. На первом шаге вам предложат выбрать цветовую схему:
После чего вам нужно выбрать из левой части окна нужные поля для будущей формы и затем, щелкая по ним, произвести их более тонкую настройку (задать подписи полей на русском языке, выбрать ширину поля, сменить тип и ввести предварительный текст):
Добавленные поля можно менять местами простым перетаскиванием мыши, удалять и повторно редактировать:
В общем, интерфейс этого онлайн конструктора очень и очень современный и удобный. После того, как вы расположите все нужные вам поля в нужном порядке и приведете все нужные им настройки, можете нажать на кнопку сохранения (расположена внизу). На следующей странице вам предложат перейти к просмотру и скачиванию скрипта обратной связи или же вернуться к редактированию:
То, что кнопка «Submit» осталась не переведенной, не есть большая проблема, ибо это можно будет сделать непосредственно в полученном коде.
Есть одно «но» — с помощью этого онлайн конструктора вы получите только Html код, а вот Php обработчик данных вам придется использовать свой. О том, где взять обработчик, можете узнать из этого видеоурока.
Обратная связь для Html сайтов (без Php)
Есть онлайн сервисы, предоставляющие бесплатно свои собственные Php обработчики, которые будут расположены на их серверах. К такому типу относится конструктор на ip-whois:
Не фонтан, конечно же, в плане изысков дизайна, но зато такую форму можно создать за пять секунд и еще за минуту поставить абсолютно на любой сайт, даже расположенный на хостинге без поддержки Php.
После настройки внешнего вида и добавления нужных полей нажмите на кнопку «Просмотр», а затем на кнопку «Настроил» и скопируйте код. Вставьте его на страницу контактов и нажмите на расположенную под кодом кнопку «Вставил».
После этого вводите адрес страницы вашего сайта, куда вставили код и E-mail адрес, на который должны приходить сообщения пользователей, отправленные через эту самую форму.
Есть еще один очень похожий по функционалу генератор форм обратной связи. Созданные с помощью него конструкции тоже можно будет размещать на хостингах без поддержки Php (достаточно указать адрес страницы и E-mail, на который будут отправляться сообщения). Рассказывать про него много я не буду, ибо он по своей сути очень похож на описанный чуть выше конструктор.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (44)
Хорошая подборочка. Могу посоветовать еще 20 форм, качественно оформленных с помощью jQuery http://followdesign.com/development/2011/11/18/jquery-css-i-php-v-sozdanii-i-oformlenii-kontaktnyh-form-chast-1.html
Пользуюсь ContactMeForm — очень доволен, довольно простой, более приятный внешний вид
Я использую Super AJAX Contact Form — доволен как слон 🙂
Мне очень нравится Contact Form 7, но при отправке сообщения пишет «Ошибка отправки сообщения, попытайтесь позже.» В чем может быть проблема? Хостер говорит, что проблема на моей стороне.
Шикарный пост, широкий выбор. Поэкспериментирую как-нибудь, пока стоит Contact Form 7.
Подскажите пожалуйста, установил на сайт (CMS Joomla) AJAX Contact Form, все работает, только не отображаются русские символы.
Очень помогли Дмитрий в подборке контактной формы. Спасибо
подскажите пожалуйста, чем рисовать такие 3d изображения, как у вас в анонсе этой статьи
Наконец то дошли руки, установил себе форму обратной связи от
no-spam.su/ — спасибо Дмитрий!
Взял, любезно Вами предложенный файл программы form, теперь получается есть вопрос к вам! Буду благодарен за ответ?
Встречались ли Вы Дмитрий, или кто либо другой с проблемой кодировки?
По умолчанию выставленная кодировка windows-1251 дает возможность на почте гугла лицезреть только английские символы.
Вся кириллица приходит в «кракозябрах», требуя кодировки utf-8!
Залез в админку, — поменял кодировку, и ничего не произошло, такие же иероглифы. Странно. Полез в скрипт, вроде бы нашел где прописана кодировка, — поменял и в скрипте и в админке — вообще все пишло на почту в «кракозябрах».
Где проблема, кто подскажет. Спасибо!
И в продолжение. Как то странно, на сайте no-spam.su/ не работает форма обратной связи для того, чтобы этот вопрос направить разработчикам?
P/S в благодарность за ответ, по нажимал на кнопочки ретвита!
Я установил форму, сообщения на почту отправляются, но подтверждение оботправке почему то на английском и сверху над Ф.И.О, фраза тоже на английском. Как исправить на русский.
Ребят,кто-нибудь разобрался с кодировкой с сайта no-spam.su/.
Если разобрались,то подскажите где ошибка.Спасибо!
Здравствуйте! Понравилась Super AJAX Contact Form.
Однако ее не достаток в том, что после отправки письма не очищаются поля. То есть после заполнения всех полей можно отправлять не ограниченное количество сообщений создавая, таким образом, большую нагрузку на сервер вплоть до его падения.
У меня есть один вопрос?
Как допустим в скрипт Super AJAX Contact Form при переходе на этот скрипт с сылки _http://мой_сайт/as/broken/iaai/index.php?mode=lot&auctionID=0&itemID=11905592&RowNumber=3 Или любой другой
добавить эту ссылку к тексту письма. Чтоб можно уже было получить с письмо с указанием этой ссылки. Пож помогите решить вопрос.
А как создать форму с возможностью прикрепления какого либо файла, например, архива.
Подскажите пожалуйста, как это всё настроить, при условии что у меня сайт расположен на моём домашнем серваке. Сам ставил апач и прочее. Видимо что-то не до настроил, не уходят письма, ошибок от апача нет. (Только не совсем апач, lighttpd)
Ведь где-то же должны храниться учётные данные, с которых идёт отправка почты? Где это вбивать? К домену подключена почта гугла.
Или хоть на какую тему гуглить? Третий день же мучаюсь.
Вот конструктор формы http://help-komputers.ru/forma_obratnoi_svyazi.html с возможностью прикрепления файлов.
Спасибо. Подскажите на счет Super AJAX Contact Form, как сделать чтоб она была развернута на моей странице, какой код вставить в хтмл редактор Ворд Пресс.
Очень большое спасибо.
Спасибо большое за скрипт! Очень помогли!
Вот еще нашел очень удобный сайт в котором можно создать свою форму,
http://www.jotformeu.com/ (сайт англоязычный, но все интуитивно понятно)
Посоветуйте, что можно сделать с обратной связью если сайт работает в системе BERTA?
Здравствуйте! Классная подборка по теме, попробовала несколько, но одна некорректно отображается, другая классно смотрится, но не работает. Сделала на main-ip.ru, зарегистрировала как положено сайт, но при нажатии на кнопку «отправить» открывается мой аккаунт гугловской системы пользовательского поиска. Техподдержка сайта не отвечает. Может, поможете понять причину такого косяка?
Мы используем форму обратной связи от http://consultant-web.ru еще можно общаться в реальном времени, очень классная штука
САЙТ СУПЕР, пост очень полезный
Очень понравился конструктор (в т.ч. с отправкой файла) на http://www.jotformeu.com/. Все части настраиваются. Создала форму, установила на html-сайте (код занимает 2 строчки). Работает четко, не нужно указывать страницу, на которую его ставишь, ставится на сколько хочешь страниц.
Все остальное, о чем тут писали, что можно поставить на html, пробовала, везде свои косяки: где-то платно, где-то оправка файла не проходит.
Здравствуйте! Я по генератору форм http://web-masterpro.ru. Почему сообщения приходят в виде крокозябры, когда поля заполняются на русском. А на англ. нормально все. И еще вопрос, как убрать ссылки с страниц админки с генератором, где они находятся? Спасибо!
Бьюсь с комментариями на страницы сайта как у Вас.
Попробовал со страницы:http://myrusakov.ru/php-comment.html.
В денвере все красиво и успешно.
НО! вывожу на сервер: hostland.ru
Идея М.Русакова хорошая и здесь на вашей странице все удачно.
Что Вы можете посоветовать?
Вы забыли сказать, что перед установкой форм описанных перед Super AJAX Contact Form на Вордпресс необходимо установить плагин Exec-PHP иначе они не заработают.
Добрый день. Использую Super AJAX Contact Form, все работает, но нужно, чтобы на почту, которую пользователь вписал в форму, отправлялось письмо с уведомлением о заказе.
Подскажите, как можно это сделать с Super AJAX Contact Form.
Заранее благодарна за ответ.
Уже разобралась. Прикрутила скрипт отправки почты в начало файла send.php
Поставил aiContactSafev и все работает, только подтормаживает. До этого ставил CK forms на почту приходили пустые письма и ошибка ява, так и не понял в чем дело.
Пользуюсь формой от http://consultant-web.ru/about/8.php, понравилось что вместе с сообщение передается полная информация об отправителе.
Кто то поможет написать скрипт к такой форме?
БИТАЯ ССЫЛКА В абзаце
Данный скрипт называется «Генератор форм обратной связи», скачать его можно совершенно бесплатно по приведенной ссылке. Обратите внимание, что для скачивания доступны три версии скрипта, которые отличаются только используемой в них капчей:
Вопрос по доставке
Пользуюсь конструктором formdesigner.ru, всё устраивает, да может на бесплатном тарифе не все функции можно использовать, но для простой формы хватает.
По мне, так быстрей взять какой-нибудь конструктор и там сделать форму. Это особенно хорошо работает, если ты не программист. Я, например, ucalc.pro использую для форм и форм расчетов.
Еще есть stepFORM.io для форм и опросников очень даже отличный вариант, рекомендую т.к. уже полгода использую и особых нареканий нет.
Ссылка на «конструктор на ip-whois» ведет не на него.
Куча различных виджетов уже готовы и доступны для вас 
Уведомления на почту
Привет, друзья. Сегодня хочу рассказать вам о том, как сейчас я создаю формы обратной связи для получения контактных данных пользователя.
