Обратная связь для сайта с помощью скриптов форм на html и php, а так же онлайн конструкторов и генераторов

Обратная связь для сайта – Интернет работа

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

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

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

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

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

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

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

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

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

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

Быть в наличии в одной из ваших бесконечных папок со скриптами.
Работать всегда и везде.
Не требовать танцев с бубном при встраивании на сайт.

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

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

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

Время.
Деньги.
Трудозатраты.

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

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

Скачать скрипт формы (.zip, 169Кб)

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

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

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

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

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

— можете сразу вставить на страницу, при помощи кода

Пример кода:

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

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

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

Скачать (.zip, 72.4Кб)

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

Как выглядит конфиг внутри («codeassetsxmlconfig.php»):

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

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

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

— есть подсказки под полями

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

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

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

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

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

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

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

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

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

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

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

Источник: https://blogwork.ru/obratnaya-svyaz-dlya-sajta/

Создаем форму обратной связи на PHP

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = “

Вернуться назад

“;

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

if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['mail']) and !empty($_POST['message'])){ //внутрення часть обработчика
} else { echo “Для отправки сообщения заполните все поля! $back”; exit;
}

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST['name'] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo “Для отправки сообщения заполните все поля! $back” и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim(strip_tags($_POST['name']));
$phone = trim(strip_tags($_POST['phone']));
$mail = trim(strip_tags($_POST['mail']));
$message = trim(strip_tags($_POST['message']));

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

mail('почта_для_получения_сообщений@gmail.com', 'Письмо с адрес_вашего_сайта', 'Вам написал: '.$name.'
Его номер: '.$phone.'
Его почта: '.$mail.'
Его сообщение: '.$message,”Content-type:text/html;charset=windows-1251″);

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

'почта_для_получения_сообщений@gmail.com' – сюда между кавычек вставляете свою почту
'Письмо с адрес_вашего_сайта' – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
'Вам написал: '.$name.'Его номер: '.$phone.'Его почта: '.$mail.'Его сообщение: '.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом делаем перенос строки, чтобы сообщение в целом было читабельно.
Content-type:text/html;charset=windows-1251 – в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

Кодировка указанная в «голове» документа (), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

Проверка формы на адекватность вводимых данных

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

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

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

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

Теперь по пунктам забираем состав проверки:

Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
Записываем его содержимое в переменную
Собственно сама проверка формы на совпадение с заданными нами символами. (/^[A-Za-zА-Яа-я ]*[A-Za-zА-Яа-я ]+$/ – могут использоваться только буквы русского и английского алфавитов; /^[0-9+][0-9- ]*[0-9- ]+$/ – первый символ это «+» или цифра, дальше могут быть только цифры; /^[A-Za-z0-9][A-Za-z0-9._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*.)+[A-Za-z]+$/ – первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
Пользователю выводится это сообщение о ошибке.
Происходит выход из скрипта проверки.

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

Полный код страниц формы

Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:

index.php
mail.php
style.css

Подводя итоги

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

Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

О защите от спама я напишу в следующих статьях.

Источник: https://vaden-pro.ru/blog/php/forma-obratnoy-svyazi-php

Генератор форм обратной связи для сайта!

Автор: Александр Борисов

/ Дата: 2010-10-29 в 18:21

Привет читатели моего блога.

Генератор форм обратной связи — что это? А это такая штука, которая поможет вам без использования вских скриптов, плагинов и кодов создать на своем сайте красивую форму обратной связи. Статья поможет вам правильно использовать генератор форм обратной связи.

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

Но об этом позже.

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

Оказывается в интернете существуют готовые ресурсы (генераторы форм обратной связи), которые дают вам готовый HTML код формы, вы вставляете его в любом месте на своем сайте и все! Готово! Связь налажена.

Форма обратной связи от сервиса Main-ip:

Я выбрал вот этот сервис – http://main-ip.ru

Проходим по ссылке, нажимаем «Создать форму»

1. Настраиваем форму и нажимаем «Генерировать» 2. Снизу появиться ваша готовая форма — нажимаем «Получить код» 3. Копируем появившийся HTML код формы и вставляем его на своем сайте

4. Регистрируемся в базе данных сервиса (указываем ссылку, где вы установили форму и e-mail на который будут приходить сообщения от посетителей вашего сайта )

5. Проверяем работоспособность формы.

Конечно же, на многих конструкторах сайтов уже имеются готовые скрипты и плагины форм обратной связи, но порой такие сервисы будут просто необходимы, к примеру если мы используем сайт на Wep Page Maker, Macromedia dreamweaver и т.д.

Пользуйтесь. Очень нужный и полезный сервис. Теперь и вы знаете что при помощи вот такого генератора форм обратной связи, саму форму сделать не так уж и трудно! Дело пяти минут. Сейчас я уже не использую генератор формы обратной связи для блога, но раньше как раз эта форма и стояла…

В заключении полезное видео, в котором одна девочка рассказывает как сделать форму обратной связи для блога wordpress без генератора, но используя один плагин:

P.S. Как вам статья? Советую получать свежие статьи на e-mail, чтобы не пропустить информацию о новых бесплатных видеокурсах и конкурсах блога!

C уважением, Александр Борисов

Источник: http://isif-life.ru/dlya-sajta/generator-form-obratnoi-svyazi-dlya-saita.html

Обратная связь – создаем форму для сайтов на HTML/PHP в Joomla и WordPress

Трудно сейчас представить сайт без формы для обратной связи.

Поэтому если на вашем ресурсе контактного раздела нет — стоит его установить. Разберемся, как это сделать.

Решения для организации обратной связи

Естественно, что сейчас существует несколько способов организации обратной связи на сайте: от универсальных скриптов на php до плагинов и модулей для CMS. То есть, необходимости писать код вручную, как видите, нет.

Можно воспользоваться следующими универсальными решениями:

прибегнуть к услугам бесплатных онлайн-сервисов, которые автоматически генерируют код HTML формы связи. Но при этом файл обработки php нужно будет писать и ставить самостоятельно. Вот один из ресурсов для этих целей
Обратиться к помощи бесплатных онлайн-сервисов, генерирующих код HTML и предоставляющих обработчики данных на php, которые зачастую размещаются на серверах этих сервисов. Один из примеров подобных ресурсов здесь.
Найти в Интернете бесплатные скрипты для установки формы обратной связи. Этот вариант применим для людей, знающих на определенном уровне HTML и PHP, ведь скрипт в любом случае придется адаптировать конкретно под свой сайт.

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

Простая установка форм обратной связи в HTML

Рассмотрим одну из популярных программ для написания и установки HTML-форм обратной связи с капчей. Широкий их выбор представлен, например, на этом сайте. Сайт русскоязычный, определиться с выбором будет просто, а сама установка займет не более трех минут.

Но для начала следует не забыть внести поправки в стандартный файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.

Папку с исправленными файлами нужно скопировать в корневой каталог сайта, но перед этим ограничив ее индексацию в файле Robots.txt (Disallow: /sendmail-zakaz).

По сути, это все — если действия выполнены правильно, готовая форма будет выглядеть так:

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

После того, как все необходимые параметры внесены, следует ввести проверочную капчу и нажать на кнопку «Генерировать», а после — «Получить код».

Полученный код нужно просто скопировать на выбранную страницу сайта.

Можно сделать простую контактную форму собственноручно. Для этого нужно создать файл form.php и сохранить в нем следующий код:

Для функционирования формы нужен файл-обработчик. Назовем его mail.php и сохраним в такой код:

В итоге получится такая форма связи:

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

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

Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».

Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».

Источник: https://wildo.ru/kontaktnaya-forma-na-sajt-sposoby-ustanovki

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

Рассмотрим как сделать скрипт обратной связи для лендинг страниц.

Подключается к любой форме обратной связи с любым количеством полей, без исправления файла mail.php.

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

создаем index.html

Создадим в шаблон index.html.

Создаем документ, нажимаем восклицательный знак и клавишу tab, плагин emmet разворачивает новый документ в тело body добавим форму.

В форме прописываем три скрытых поля это название

Затем идут произвольные поля, которые видим в браузере.

В конце документа подключаем jquery и файл скрипта scrip.js.

Добавляем в index.html код.

Send

Открываем index.html в браузере и видим саму форму.

Создаем scrip.js

Разберем теперь файл скрипта scrip.js , который подключили.

Основной смысл скрипта, чтобы ajax отправлял методом post любую форму на наш файл mail.php.

Нужно изменить только селектор формы, которую хотим обрабатывать form и путь до mail.php, если у нас лендиг пейдж и файл в корневой папке, то путь не меняем.

В скрипте есть функция .don после того как отправилось письмо идет alert, который можно менять.

Например, добавить класс скрытому диву, который будет всплывать с красивой формой.

Затем сбрасывается форма th.trigger (reset), можно сделать редирект на другую страницу, например.

Получился код в sublime text.

$(document).ready(function() {$(“form”).submit(function() {var th = $(this);$.ajax({type: “POST”,url: “mail.php”,data: th.serialize()}).done(function() {alert(“Thank you!”);setTimeout(function() {th.trigger(“reset”);}, 1000);});return false;});});

Создаем mail.php

Третий файл это mail.php. Сперва мы берем метод post.

Прописываем обязательные скрытые поля в index.html.

Затем идет массив foreach по всем ключам post запроса, с дополнительной проверкой, если поле скрытое, то оно не добавляется в табличку, которая придет на почту.

Файл mail.php sublime text.

123456789101112131415161718

Источник: http://sdelatlending.ru/skript-obratnoj-svyazi-dlya-lendingov.html

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

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

Ваше имя: Ваш E-mail: Ваш телефон: Текст сообщения: Я добровольно отправляю свои данные Отправить

В файле main.css накидаю простенькие стили для оформления:

* { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 16px; background-color: #fff; } .container { max-width: 500px; margin: 50px auto; padding: 20px; border-radius: 4px; background-color: #ebebeb; box-shadow: 0 0 3px #666; } h2, .field-block { margin-bottom: 20px; } .field-block label, .field-block .field { display: block; width: 100%; } .field-block label { margin-bottom: 8px; font-weight: bold; } .field-block .field { font-size: 16px; padding: 8px 12px; line-height: 1.5; border-radius: 4px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .field-block .field:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .field-block textarea { resize: vertical; } .check-text { font-size: 14px; vertical-align: top; } .button { cursor: pointer; font-size: 16px; padding: 6px 12px; margin-bottom: 5px; } #loader { display: none; }

В результате получилась вот такая форма:

Наполняем main.js:

Включаем маску для ввода номера телефона.
Делаем проверку, если чекбокс согласия на обработку персональных данных не отмечен, то деактивируем кнопку и не даем отправить форму.
Формируем Ajax-запрос для отправки пользовательских данных на сервер и получение ответа от сервера.

Код в main.js получился такой:

jQuery(document).ready(function($) { // Добавляем маску для поля с номера телефона $('#phone').mask('+7 (999) 999-99-99'); // Проверяет отмечен ли чекбокс согласия // с обработкой персональных данных $('#check').on('click', function() { if ($(“#check”).prop(“checked”)) { $('#button').attr('disabled', false); } else { $('#button').attr('disabled', true); } }); // Отправляет данные из формы на сервер и получает ответ $('#contactForm').on('submit', function(event) { event.preventDefault(); var form = $('#contactForm'), button = $('#button'), answer = $('#answer'), loader = $('#loader'); $.ajax({ url: 'handler.php', type: 'POST', data: form.serialize(), beforeSend: function() { answer.empty(); button.attr('disabled', true).css('margin-bottom', '20px'); loader.fadeIn(); }, success: function(result) { loader.fadeOut(300, function() { answer.text(result); }); form.find('.field').val(''); button.attr('disabled', false); }, error: function() { loader.fadeOut(300, function() { answer.text('Произошла ошибка! Попробуйте позже.'); }); button.attr('disabled', false); } }); }); });

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

Отправка почты на E-mail администратора

Источник: https://zyubin.ru/saitostroenie/web-razrabotka/forma-obratnoj-svyazi-dlya-sajta.html

Обратная связь для сайта с помощью скриптов форм на Html и Php, а так же онлайн конструкторов и генераторов

18 Ноя, 2011

Формы обратной связи для Joomla и WordPress
Php скрипты форм обратной связи для сайта
Конструкторы и генераторы форм обратной связи
Контактная форма для 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 хранит архив всех отправленных данных и позволяет его просмотреть из админки Джумлы.

Этот компонент в своем составе имеет очень гибко настраиваемую капчу (ввод кода при отправке данных для зашиты от спама). Его можно бесплатно скачать для разных версий Джумла, а прочитать про его настройку вы сможете тут.

Источник: http://muzaprazdnik.ru/2017/05/18/obratnaya-svyaz-dlya-sayta-s-pomosch-yu-skriptov-form-na-html-i-php-a-tak-zhe-onlayn-konstruktorov-i-generatorov/

Создание простой формы на HTML, CSS и JavaScript

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов.

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

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

Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript.

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

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

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

Также скачайте исходники себе на компьютер!

Итак, начнем.

Шаг 1

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

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

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

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

Простейшая и крутейшая форма Имя E-Mail Текст сообщения

Думаю, что с разметкой пока ни у кого никаких вопросов не возникнет. У нас есть два поля для ввода имени автора и адреса его электронной почты, каждое поле подписано меткой , одно большое текстовое поле для ввода сообщения и кнопка для отправки всего этого добра куда подальше . Пока это все добро выглядит приблизительно так:

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

Шаг 2

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

Текст сообщения

Как видите, мы просто описываем обработку событий onblur и onfocus. Событие onfocus срабатывает, когда мы выделяем элемент формы, событие onblur срабатывает, когда мы выделяем что-либо другое, и элемент возвращается в первоначальное состояние. В общем, кусок кода выглядит так:

onfocus=”if(this.value == 'какой-то текст') this.value = '' ” (если при выделении элемента в нем каходится «какой-то текст», то сделать так, чтобы в нем ничего не находилсь, то есть '' “)onblur=”if(this.value.length == 0) this.value = 'какой-то текст'” (если при удалении фокуса с элемента в нем находится 0 символов, поместить в этот элемент 'какой-то текст')

Вот как это выглядит на практике:

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

Шаг 3

Разметка и миниатюрный сценарий готовы. Дело осталось за малым – за стилями.

Создадим файл CSS, например styles.css и присоединим его к нашему html-документу, добавив между тегами следующую строку:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Первым делом добавим стиль блоку-контейнеру.

border: 3px solid #EEEEEE;-webkit-birder-radius: 6px;

При помощи определений width: 800px; и margin: 0 auto; мы задаем блоку-контейнеру ширину 800 пикселей и располагаем его по центру html-документа.

При помощи остальных определений задаем границу блока-контейнера – её тип, ширину цвет, а при помощи определений CSS3 -webkit-birder-radius,-moz-border-radius и border-radius делаем углы границ закругленными.

Границу контейнера делаем светлой и невыразительной, чтобы она не отвлекала внимание от более важных элементов.

Теперь, создадим определения для текстовых полей:

border: solid 1px #CCCCCC;font: Verdana, Geneva, sans-serif;-webkit-birder-radius: 4px;

При помощи margin-left задаем отступ от края блока-контейнера в 10 пикселей. Определение padding служит для создания пространства между текстом в текстовом поле и границей текстового поля. Кроме этого, ка видите, мы задаем цвет, стиль границы (опять закругленные углы) и ширину текстовых полей. Вот что у нас получается:

Что ж, неплохо, хотя не мешало бы как-то выделить поле для сообщения и кнопку отправки.

border: 2px solid #E0E0F3;font: Verdana, Geneva, sans-serif;background-color: #E5E5F8;

В принципе, ничего нового. Мы просто задаем новые размеры для текстовой области, включая высоту строчки line-height. Для кнопки делаем нижний отступ до границы контейнера при помощи margin-bottom. Вот что получается:

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

Как можно видеть, метки стали светлее и теперь они меньше выделяются, но их все равно видно:

В принципе, выглядит уже довольно неплохо, однако, можно добавить еще немного визуальной интерактивности при помощи CSS:

input:hover, textarea:hover, input:focus, textarea:focus {border: 2px solid #C0C0E3;

При наведении курсора на элемент, его границы становятся немного темнее и четче:

Вот, в принципе и все, урок по созданию простой HTML-формы подходит к концу. Мы с вами с нуля спроектировали и написали простую интерактивную веб-форму в светлых тонах, которая в будущем станет основой первой гостевой книги, написанной, например, на PHP+MySQL.

С уважением Павел Карабило

Ваши отзывы и замечания жду в комментариях!

Источник: https://webformyself.com/sozdanie-formy-s-html-css-javascript/

PHP скрипт: форма обратной связи. PHP Sendmail script. PHP скрипт отправки почты (сообщения), писем с сайта. Примеры работы (демо). Скачать бесплатно

Главная Страница » PHP Sendmail Script

PHPSendMail

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

С этим очень ЛЁГКИМ php скриптом, посетители вашего сайта смогут отправлять письма непосредственно вам на почту через форму обратной связи.

Универсальный скрипт отправки данных из форм на email. Скрипт идеально подойдет для сайтов типа Landing Page, сайтов визиток и т.д.

PHP Mailer Final с капчей

Скрипт выводит форму и, при заполнении необходимых полей, отправляет на Ваш e-mail сообщение. В скрипт встроена защита от роботов: перед отправкой письма надо ввести капчу.

GentleSource Form Mail

На ваш выбор две опции: или пользователь при помощи редиректа попадает на Thank-You-Page с вашим текстом или же, пользователю отображается информация, о том, что сообщение успешно отправлено.

Micro Mailer

Micro Mailer – это не большой PHP скрипт, который позволяет вам и посетителям вашего сайта отправить письмо любому адресату.

Web4you-FM

Web4you-FM Отправка письма с вашего сайта. Возможности: 1 – Выбор адресата и сколько их будет (от 1 до 4). 2 – Проверка на корректность заполнения формы. Кому. Имени, только буквы …

Light PHP Contact Form

Настолько простой скрипт отправки почты, через форму обратной связи, что даже человек, не знающий PHP/HTML языка, сможет использовать программу без затруднений …

DodosMail

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

PHP Contact Form

Скрипт PHP Contact Form включает в себя следующие функции: 1) функция предотвращения спама. Пользователь должен ввести защитный код, также известный как капча.

TPCS Contact (email form)

Этот TPCS Contact скрипт, позволит вашим посетителям связаться с вами через форму обратной связи. Вся информация будет отправлена вам на электронную почту.

Feedback mailer

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

Easy PHP Contact Form

Простой, но безопасный PHP скрипт контакта с вебмастером при помощи формы обратной связи с проверкой кода (КАПЧА) для предотвращения спама.

PHP Contact form (with image verification)

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

CW3 Form Mail

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

reCAPTCHA Contact Form

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

phMailer

phMailer – это очень простой PHP скрипт обратной связи, который поддерживает функцию прикрепления файла (attachments) благодаря встроенной mail() function языка PHP.

Поделиться с друзьями

Источник: http://www.php-s.ru/sendmail/

Форма обратной связи html + ajax + мощный триггер

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

Читатели моего блога очень активно обсуждали мою предыдущую статью по простой форме на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье, структуру работы и подключению так же разберем.

UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу ( Екатерину Карачеву )

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

Форма обратной связи html — структура работы

Внешний вид нашей формы выглядит следующим образом

В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на демо как это работает )))

Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.

Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю )) Теперь о само насущном, принцип работы:

Проверка полей в форме input происходит в файле обработчика contact.php ниже в листинге программного кода сможете посмотреть, сообщение об ошибках и успешной отправке письма появляется в самой форме, вот так это выглядит, после отправки:

Исходный код обработчика формы

Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

Работоспособность формы

Чтобы приходили письма на ваш почтовый ящик, измените строку о которой я говорил выше. Советую использовать gmail.com почту, на ней задержек и косяков не наблюдается при получении сформированного письма из формы. Предупредил, т.к. много было вопросов у читателей ( письма не приходят на mail.ru ). Будьте внимательны на этот счет.

Заполняем все поля, обратите внимание, что телефон вводится с 8 — я специально в подсказке так и написал номер с восьмерки «89251122333». При вводе знака «+» появится сообщение об ошибке. Если кому-то нужно, то легко добавить в обработчик данный «+».

Заполненная форма с тестовыми данными

Письмо на почтовом ящике

Как видите письмо получили, со всеми тремя полями, которые заполняли и отправили. Заголовок письма «Заявка с сайта vpluce.ru» меняется в обработчике contact.php

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

Подготовлено при поддержке, vpluce.ru

Источник: http://vpluce.ru/sozdanie-sajtov/forma-obratnoj-svyazi-html.html

Форма обратной связи для вашего сайта! С плагинами и без плагинов

Привет тебе, дорогой друг, партнер, читатель! Сегодня меня попросили поднять такую тему как форма обратной связи на сайт — как её сделать с php , без php, с плагинами, без плагинов, в общем как можно подробнее мы эту тему рассмотрим сегодня.

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

Сегодня же я посмотрел в почту и был очень удивлен — у меня было несколько писем от двух человек, и от каждого из них были практически одинаковые письма. Вот, например, одно из них:

Вот у меня есть страница «Поддержка пользователя», но раньше она была создана отдельным скриптом. О нем я расскажу в этой статье, но чуть ниже. Также в этой статье я расскажу как создать форму обратной связи на html, php, т.е. без плагинов для wordpress.

А в конце статьи еще поиграем. Ну, обо всем по порядку.

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

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

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

Вот тебе несколько генераторов форм:

Большинство из них на английском, поэтому запасись словарем. Хотя там все понятно интуитивно. Это хорошее решение для тех кто хочет создать свою форму обратной связи без знаний html, php, java или что ты там думаешь надо знать.

Вообще без знаний, короче. Все делается кликаньем по мышке.

Ну и чтобы тебе не пришлось разбираться с этими сервисами, я решил один все-таки разобрать вместе с тобой и остановился на сервисе Main-IP

Тебе достаточно просто зайти на этот сервис, и нажать вот на эту кнопочку “Форма обратной связи”.

Там мы просто должны настроить форму, выбрать нужные нам цвета, размеры, шрифты и пр. После того как ты её настроишь – надо будет нажать на кнопку “Получить код”. Появившийся код скопировать себе.

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

После того как проверите – сразу напишите о впечатлениях у нас в комментариях. Пжлст.

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

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

Так вот, как же работает форма обратной связи с html, php и без плагинов. Все очень просто и есть несколько способов реализации.

Вот например такого вида:

Если он тебе подходит, можете ознакомиться с скриптом и скачать его [urlspan]здесь[/urlspan].

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

Все настройки находятся в файле config.php, все что нужно сделать это изменить кодировку и е-мейл на твой личный.

Вот тут:

$mailto = “in4wp@ya.ru”; $charset = “utf-8”;

У тебя должно быть точно также, ну, кроме емейла. Ну, ты понимаешь.

Еще один вариант php формы обратной связи

Сейчас давай поговорим о скрипте, который называется Super AJAX Contact Form – это уже готовый php скрипт контактной формы.

Загуглив его – можешь с ним познакомиться. Но все что ты сможешь найти — это предложение купить его за 1 доллар. Причем это будет английская версия.

А я своим читателям предлагаю русифицированную версию скрипта, причем совершенно бесплатно – КАЧАЙ.

Все что нужно сделать с архивом – это распаковать его в нужное место. Я распаковал в корень. И теперь моя форма контактная имеет адрес:

http://in4wp.ru/contact-form/

Конечно, не забудь изменить емейл, куда будут отправляться уведомления, чтобы они не приходили нам. Чтобы это сделать, тебе нужно пройти по адресу:

/папка_скрипта/assets/xml/

Там есть файл config.php – и там прописать ваше мыло. Вот в принципе и все настройки.

Если у тебя открывается скрипт в испорченной кодировке, тебе нужно:

1. Открывать файл index.php в редакторе (я использую Notepad++ )
2. Конвертировать кодировку в UTF-8

Этот как раз тот самый скрипт, который стоял у меня до этого момента. И именно на него были проблемы от моих читателей. Ну, возможно, это были касяки на хостинге, может у тебя будет по другому.

Ну и небольшое видео по использованию этого скрипта. Отрыл специально для тебя!

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