Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .
Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.
UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)
UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится
Вспомнил себя, когда я впервые пытался делать самостоятельно форму обратной связи на php, и честно признаться было трудоемко, т.к. не понимал что и как происходит. Терпение и упорство друзья и у вас все получится.
Форма обратной связи php — структура
Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)
После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:
- image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
- js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
- index.html — индексный файл нашего одностраничника
- index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)
Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php
Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)
Взглянем на работу одной из кнопок, которая вызывает модальное всплывающее окно, в котором находится форма обратной связи. Данный приведенный исходный код — это не раз, два вставил на страницу и заработает, Вам придется самим подгонять под свой дизайн и потребности.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Заказать обратный звонок Заказажите обратный звонок |
Заказать обратный звонок Заказажите обратный звонок
Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений
| 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 | С вами свяжутся |
С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
Проверка работоспособности формыВызываем окно и вводим данные для тестовой проверки нашей формы
Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи
У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.
Если вы хотите, чтоб вопрос был обязательным для заполнения, не забывайте переключать соответствующий бегунок в нижней части окна редактирования вопроса - для обязательного вопроса он должен быть переключен вправо и гореть зеленым цветом.
Хитрость вторая: порядок вопросовВ режиме редактирования формы любой вопрос можно перетащить вверх-вниз, для этого надо потянуть за иконку из шести точечек в верхней части вопроса. Обычно курсор мышки реагирует на эту иконку, превращаясь в четырехстороннюю стрелку:
Но тут тоже есть хитрость. В гугловских формах так все устроено, что в итоговой таблице с ответами порядок вопросов будет соответствовать истории их создания, а не порядку, в котором вы их расположили после.
Хотя перетаскивать вопросы при создании формы довольно легко и удобно, не увлекайтесь перетаскиваниями - разобраться потом в таблице с ответами будет сложнее.
Google постоянно вносит разные улучшения в интерфейс своих сервисов, но вот эта особенность гугл форм пока что так ни разу и не менялась.
Чтобы посмотреть ответы, надо перейти на вкладку «Ответы» в самом начале формы:
Когда ваши участники заполнят несколько форм, то в этом экране появятся две опции: «Сводка» и «Отдельный пользователь». Там можно будет быстро пробежать глазами по всем ответам.
Я редко пользуюсь этим экраном, мне удобнее сразу перейти в таблицу, которая организована на манер MS Excel-файла. Для того, чтоб отобразить заполненные анкеты в виде сводной таблицы, нужно нажать на зеленую иконку и выбрать Создать таблицу >> Новая таблица >> Создать. В новой вкладке браузера откроется Google Таблица, названная так же, как и ваша форма, но с припиской в конце: (Ответы).
Эти два файла в гугл драйве будут отображаться как разные файлы, но между ними всегда будет неразрывная связь. Как только новый участник заполнит анкету, данные мгновенно появятся и в таблице.
Шаг 4. Наводим красоту: выбираем шаблон внешнего видаУ гугловских форм есть стандартный фиолетовый вид, но цвет можно легко заменить на любой другой из стандартного набора. Для этого нажмите на иконку палитры в верхнем правом углу:
Вы также можете выбрать один из нескольких бесплатных дизайнов. Некоторые из их вполне симпатичные, есть и тематические для разных праздников и типов событий. Чтобы выбрать особый шаблон, нужно кликнуть на иконку в правом нижнем углу палитры, и откроется отдельное окошко с выбором категорий:
Прежде чем отправлять форму участникам, убедитесь, что ваша форма выглядит на пять с плюсом. Откройте ее в отдельном окне и попробуйте заполнить сами. Чтобы открыть форму, нужно вновь пойти в правый верхний угол, нажать на иконку их трех вертикальных точек и выбрать «Открыть форму».
Если всё отображается корректно и вы ничего не забыли, то пора отправлять анкету участникам.
Второй способ выглядит более быстрым, но мне лично нравится первый. Рассылку по участникам можно сделать и более персонализированную, добавить в нее нужную ссылку на сайт, а уж на сайте сделать страничку с формой. В конце концов, каждый переход на ваш сайт - это измеримый результат, а на сайте кроме анкеты может быть еще много всего полезного.
Чтобы встроить форму в страницу вашего сайта или блога, нужно пойти в верхний правый угол и нажать на иконку бумажного самолетика. В открывшемся окошке есть три варианта, как отправить: письмо, ссылка и встроить в веб-страницу. Выбираем третью иконку:
Скопируйте HTML-код, вставьте его в исходный код страницы сайта, и вуаля - .
Второй способ - отправить участникам прямую ссылку на анкету. Выбираем в том же меню иконку с ссылкой, сочиняем текст письма, добавляем ссылку в письмо. Если вы пользуетесь такими сервисами рассылок как MailChimp или ему подобные, то этот способ может быть наиболее удобным.
Если вы все-таки решили отправлять гугл форму на email участникам вашего события прямо из интерфейса Google, не забывайте добавлять там сообщение. Рекомендую поставить галочку «отправить мне копию» и сделать пару тестовых писем, прежде чем посылать их всем. Так вы хотя бы увидите, как выглядело отправленное вами письмо.
Пара слов о разных настройках в Google ФормахЯ верю в метод познания интерфейсов «тыкнул - попробовал - понял». Поэтому считаю, что даже если бы мне объяснили, что делает каждая кнопка на панели инструментов, я бы все равно не запомнила.
Но у гугловских форм есть некоторые настройки, до которых редко можно добраться методом тыка, и мне они сильно помогают каждый раз, когда я создаю любого рода анкеты.
Важная настройка формы: сообщение о заполненной анкете для участникаКогда гость вашего события заполнил все вопросы и нажал «отправить», Google покажет ему страничку с сообщением об успешной отправке. По умолчанию у Google стоит бесчеловечное «Ответ записан». Ни один организатор события, который ценит своих гостей и дорожит их лояльностью, не может себе позволить оставить это без изменений!
Поэтому не ленимся и заходим в меню через правый верхний угол, выбираем «Настройки» и находим раздел «Страница подтверждения». В поле «Сообщение для респондентов» пишем что-нибудь личное и уникальное, например так:
Там же есть всякие разные настройки заполнения формы, на которые стоит обратить внимание: разрешение заполнять анкету несколько раз, разрешение на просмотр сводки ответов, индикатор прогресса заполнения (для длинных форм особенно важно) и разные другие.
Еще одна полезная галочка - уведомления о том, что пришла заполненная анкета. Если вы эти уведомления не настроите, то Google вас беспокоить вообще не будет, и вы узнаете, сколько человек заполнило анкету только если зайдете в таблицу с ответами. Иногда это жутко неудобно.
Я вот, например, всегда в обязательном порядке эти уведомлялки для себя настраиваю, этот пунктик даже есть в моем .
Настроить такие уведомления можно в интерфейсе таблицы ответов на форму: Инструменты >> Уведомления >> выбираем «Отправка формы» и способ уведомления - раз в день или мгновенно, сразу после того как участник заполнил. Не забываем нажать «Сохранить».
Итого: у нас есть анкета и привязанная к ней таблица с ответами. В них есть еще миллион интересных настроек и лайфхаков, но лучше всего их открывать для себя самостоятельно. Но если вы решили сделать первую в жизни анкету по сбору обратной связи после события, описанных здесь пяти шагов будет более чем достаточно для старта.
Надеюсь, эта небольшая инструкция поможет начинающим организаторам упростить сбор обратной связи и сохранить некоторое количество деревьев, исключив необходимость сбора бумажных анкет!
(Visited 4 041 times, 1 visits today)
От автора: приветствую Вас уважаемые читатели. Диалог с посетителями сайта очень Важен, так как каждый человек уникален и соответственно очень сложно разработчику или владельцу сайта учесть абсолютно все пожелания или потребности своих клиентов. Поэтому в данной статье мы поговорим о том, как формируется обратная связь joomla 3, благодаря которой пользователи смогут отправлять сообщения администратору сайта.
Стандартный функционал Joomla содержит встроенный компонент “Контакты”, благодаря которому можно организовать прием сообщений на сайте, но он не совсем удобен в использовании, да и ограничен функционально. Особенно если необходимо добавить дополнительные поля в форму обратной связи, что как Вы знаете не возможно в выше указанном расширении. Поэтому в данной статье, для формирования формы обратной связи, мы используем дополнительное расширение, под названием Flexi Contact .
Данное расширение, очень простое в работе и настройке, но в тоже время достаточно функциональное. Поэтому на странице описания данного расширения официального сайта Joomla, кликаем по ссылке “Download” и переходим на сайт разработчика.
Обратите внимание, что компонент поставляется в двух вариантах: платном и бесплатном. При этом, как обычно платная версия содержит расширенный функционал и обеспечивает ее владельца полной поддержкой авторов. Для данного урока вполне подойдет бесплатная версия, а значит, опускаемся в самый низ страницы и видим кнопку скачивания последней актуальной версии.
Главный элемент управления компонентом, это страница конфигурации, которая позволяет настроить будущую форму обратной связи. Первый доступный раздел – это общие настройки, где настраивается общий функционал расширения.
Доступны следующие поля:
Ведение логов – если включено компонент будет вести запись выполнения основных событий, к примеру отправка сообщения пользователем.
Отправить HTML – можно ли отправлять в письме теги HTML.
Сообщение для Пользователя – нужно ли отправлять копию отправляемого сообщения пользователю.
Send button class – класс кнопки отправки формы.
Группа полей “Требования соглашения” – содержит поля для настройки пользовательского соглашения, с которым при необходимости, пользователь должен ознакомиться перед отправкой формы. В поле “Пояснение” – указывается строка поясняющая пользователю, что необходимо согласиться со специальным соглашением, которое располагается на определенной странице, адрес которой добавляется в поле “Ссылка”. Соответственно в поле “Имя” необходимо добавить заголовок ссылки.
Следующий раздел настроек – “Сообщение для администратора”, в котором Вы можете сформировать шаблон сообщения, которое будет отправлено администратору, или же пользователю указанном в качестве получателя сообщения.
При этом центральная текстовая область – это как раз шаблон будущего сообщения, который Вы самостоятельно можете сформировать, используя любой произвольный текст, а так же специальные системные переменные, список которых, вместе с пояснениями, приведен в блоке справа. Переменные в процессе работы компонента, будут заменены специальными данными, которые пользователь добавит в поля формы.
Следующий раздел настроек – “Сообщение для пользователя”, в котором Вы можете настроить шаблон сообщения, отправляемого в качестве копии пользователю, по аналогии с предыдущим разделом.
Следующий раздел – это страница настройки шаблона, подтверждения отправки сообщения. По сути это обычный текст, сообщающий о том, что сообщение отправлено.
Следующий раздел – “Поля формы” позволяет непосредственно настроить форму обратной связи данного расширения.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
В данном разделе Вы можете назначить поля обязательные к заполнению, а так же добавить пять произвольных дополнительных полей к форме обратной связи.
Разделы “Текст в верху” и “Текст в низу”, позволяют добавить дополнительный текст который будет отображаться над формой и под ней соответственно. На этом настойка компонента FlexiContact завершена.
При этом на вкладке “Параметры” в поле “Email To” необходимо указать адрес электронной почты получателя сообщения пользователя.
После этого сохраняем изменения и переходим в пользовательскую часть для проверки результатов работы.
Как Вы видите для CMS Joomla обратная связь, реализованная с помощью компонента FlexiContact успешно работает.
Но порой использовать компонент не совсем удобно, так как для отображения формы необходимо создавать отдельную страницу. В этом случае на помощь приходит модуль обратной связи joomla, который так же не входит в стандартную комплектацию CMS, а значит, мы его установим отдельно.
В данной статье хотел бы Вам предложить очень простой модуль под названием SP Quick Contact , который отлично справляется с задачей отправки сообщения по указанному адресу.
На странице описания, традиционно кликаем по ссылке “Download” и переходим на официальный сайт разработчика.
Конечно, если мы работаем с модулем, то обязательно необходимо его опубликовать, выбрать позицию отображения его контента в шаблоне и указать на каких страницах сайта он будет доступен. Помимо этого на вкладке “Параметры” Вы можете настроить следующие поля:
Admin Email — электронный ящик, на который будут отправляться сообщения.
Notice Sendmail Success – сообщение о успешной отправке письма.
Notice Sendmail Failed — сообщение о неудачной отправке письма.
Enable Captcha — нужно ли включить каптчу.
Captcha Question – вопрос, на который нужно будет ответить в каптче.
Captcha Answer — ответ на вопрос каптчи.
Wrong captcha warning text — текст, при не правильном ответе на вопрос каптчи.
Настроив функционал модуля, сохраняем изменения и переходим в пользовательскую часть для проверки.
Как Вы видите, модуль обратной связи joomla 3, успешно работает. На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
Обратная связь на сайте очень важна, так как облегчает жизнь посетителям, позволяя оперативно наладить с вами контакт.
Чтобы создать страницу контактов, ни к каким сторонним разработкам прибегать не нужно - Joomla имеет в своём арсенале компонент Контакты. Теоретически с его помощью можно создать сколько угодно страниц обратной связи (например, для каждого владельца сайта, для каждого филиала магазина), но на практике страница обратной связи нужна бывает всего одна, её созданием сейчас и займёмся, а после добавим пункт меню, чтобы посетители могли до неё добраться.
Создаём страницу контактовАлгоритм создания вам уже знаком.
1. В главном меню панели управления Joomla откройте Компоненты -> Контакты .
2. На открывшейся странице нажмите кнопку Создать .
3. Отредактируйте страницу контакта. Чтобы появилась форма обратной связи, достаточно заполнить поле Имя , выбрать связанного пользователя, на вкладке Настройки отображения из раскрывающегося списка Формат отображения выбрать вариант Обычный , а также на вкладке Настройки отображения контактов из раскрывающегося списка Показывать форму обратной связи выбрать Показать .
В принципе страница с формой обратной связи, через которую любой пользователь сможет отправить вам письмо, уже создана, и вам остаётся только добавить ведущий на неё пункт меню, но если использованных функций вам показалось мало, обзор вкладок редактора есть внизу страницы.
Создаём ведущий на неё пункт меню1. Перейдите к созданию нового пункта в том меню, куда хотите поместить ссылку на страницу контактов.
2. В поле Заголовок введите название нового пункта.
3. В области Тип пункта меню нажмите кнопку Выбрать , в появившемся списке щёлкните Контакты -> Контакт .
4. Нажмите кнопку Выбрать в области Выбор контакта и щёлкните на наименовании страницы обратной связи.
В результате вы создали пункт меню, ведущий на форму обратной связи, которая выглядит, как на рисунке ниже.
На случай, если вы захотите углубиться в вопрос работы с контактами в Joomla, оставляю здесь дополнительную информацию о форме настройки контакта и её элементах.
Единственное обязательное и не заполняемое автоматически поле - Имя . Судя по всему, разработчики компонента подразумевали создание большого количества форм и хотели, чтобы вы ввели сюда имя конкретного контактного лица, одного из многих, но если на сайте планируется разместить всего одну контактную страницу, то вместо имени лучше ввести название (h1 ), так как оно будет отображаться на странице, и пользователи будут его видеть. Сюда можно ввести «Контакты», «Обратная связь» или нечто подобное.
Поле Алиас нам уже знакомо, например, по работе с менеджером категорий.
Остальные настройки распределены по вкладкам.
Контакт
Помимо выбора пользователя и фотографии к нему здесь можно указать разнообразнейшую контактную информацию: от должности и адреса, до сайта и телефона. Также на этой вкладке присутствуют уже знакомые элементы: статус публикации, выбор категории, кнопка добавления в Избранное, управление доступом, выбор языка, поле меток и комментариев версии.
Дополнительная информация
При переходе на эту вкладку создаётся ощущение, что открылось окно создания страниц: тот же визуальный редактор, та же область ввода. Примерно так оно и есть: вы можете указать произвольную информацию на контактной странице. Функцию можно использовать, например, чтобы отобразить схему проезда или вывести какое-нибудь уточнение.
Параметры публикации
Те же элементы, что и в редакторе страниц: начало/конец публикации, дата создания, информация об авторе, изменениях и количестве просмотров, а также поля для ввода метаданных.
Настройки отображения
Здесь можно отобразить или скрыть каждое из сведений, указанных на вкладке Контакт , например, спрятать должность, но отобразить страну и почтовый индекс, или сделать наоборот. Также здесь можно настроить показ опубликованных пользователем материалов и выбрать альтернативный макет отображения страницы, чтобы она приобрела отличный от остальной части сайта внешний вид. Однако самая интересная из простых возможностей - раскрывающийся список Формат отображения .
В нём можно выбрать, как будут сгруппированы данные на странице. Дело в том, что по умолчанию они разбиваются на блоки: раздел Контакты содержит информацию из первой вкладки (должность, адрес, телефон и т. д.), раздел Форма обратной связи позволяет настроить связь с администрацией сайта, раздел Дополнительная информация будет создан, если вы вводили текст на соответствующей вкладке. В списке Формат отображения можно выбрать один из четырёх вариантов показа информационных блоков.
- По умолчанию. Если не трогать настройку, будет выбран сворачивающийся список.
- Сворачивающийся список. Вариант, при котором блоки располагаются один под другим, и чтобы открыть раздел, нужно щёлкнуть кнопкой мыши на его названии.
- Вкладки. Данные распределяются по вкладкам, горизонтально.
- Обычный. Пользователь увидит сразу все контактные данные - как раз то, что нужно, если вы хотите сразу показать форму обратной связи.
Кроме того, что здесь можно показать или скрыть форму обратной связи, настройки вкладки позволяют также убрать флажок, благодаря которому пользователь может отправить копию адресованного вам письма на всякий случай самому себе. На этой же вкладке можно заблокировать определённые e-mail-адреса, темы и тексты писем, чтобы защититься от спама или нежелательной почты (фрагменты запрещённого текста либо записываются каждый с новой строки, либо отделяются друг от друга точкой с запятой). Включение функции Проверять сессию приведёт к тому, что вам не смогут написать пользователи с отключенными cookie, Если хотите, чтобы после успешной отправки письма посетитель был перенесён на другую страницу, введите её адрес в поле Перенаправление .
