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

Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи 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 (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.

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

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

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

Сущность и значение формы обратной связи для Joomla

Форма обратной связи представляет собой удобный инструмент для отправки сообщений администрации сайта.

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

Система управления контентом (CMS) Joomla 3 позволяет создать форму обратной связи, которая имеет следующие преимущества:

Простую настройку;
Красивый и удобный интерфейс;
Возможность оперативной отправки сообщений;
Наличие контактной формы на всех страницах сайта;
Возможность обойтись без перезагрузки страницы;
Защиту от спама.

Когда пользователь отправляет администрации письмо через данный компонент оно автоматически приходит на электронный ящик владельцев сайта.

По сути, весь процесс работы формы обратной связи можно представить в виде двух этапов:

Заполнение посетителем нужных полей;

Отправка сообщения.

Важно отметить, что подобная форма может состоять из произвольного количества полей различного назначения. При этом такие поля, как «E-mail », «Имя », «Тема » и «Сообщение » являются обязательными.

Процесс создания формы обратной связи в Joomla 3: пошаговая инструкция

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

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

Целесообразно детально рассмотреть каждый из этапов создания формы обратной связи на Joomla 3 .

Шаг 1.

В админ-панели Joomla 3 следует открыть меню «Компоненты » и перейти на вкладку «Контакты »:

Шаг 2.

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

В частности, поля «Имя », «Категория » и «Связанный пользователь » являются обязательными для заполнения. Кроме того, можно указать следующие контактные данные: «Должность », «Почтовый ящик », «Город », «Сайт », «Телефон » и т.д.

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

Шаг 3.

На вкладке «Дополнительная информация » можно разместить дополнительные контактные данные, например схему проезда, или график работы, которые могут иметь важное значение для пользователей формы обратной связи:

Шаг 4.

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

Шаг 5.

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

Здесь же следует установить формат отображения формы обратной связи Joomla 3 .

Следует подчеркнуть, что всего доступно три варианта отображения:

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

Шаг 6.

На последней вкладке «» можно настроить блокируемые темы и почтовые ящики, а также активировать пункт «Отправить копию письма на почту отправителя »:

Шаг 7.

После того как указаны все необходимые данные, нужно сохранить контакт:

Шаг 8.

После сохранения необходимо сформировать пункт меню для созданного контакта. Для этого нужно перейти в раздел «Меню » и выбрать в нем «Главное меню », затем вкладку «Создать пункт меню »:

Шаг 9.

В появившемся окне нужно привязать отдельный пункт меню к главному или вертикальному меню, которое обычно располагается в левом или в правом блоке админ-панели Joomla 3 :

Шаг 10.

В качестве типа пункта меню необходимо выбрать раздел «Контакты »:

Шаг 11.

После установки типа пункта меню, появится поле «Выбор контакта ». В нем нужно выбрать созданный на предыдущих этапах контакт (в данном случае – Администратор).

Важно подчеркнуть, что вкладки «Параметры отображения контактов » и «Параметры почты », копируют настройки вкладок «Настройки отображения » и «Настройки отображения контактов » соответственно:

Шаг 12.

На вкладке «Параметры отображения ссылки » прописывается поле «Заголовок, как ссылка », которое является пользовательским описанием данного пункта меню. Впоследствии данное описание будет отображаться при наведении курсора на пункт меню.

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

Шаг 13.

После завершения описанных выше операций можно настроить параметры отображения страницы, а именно теги title и h1 данной страницы.

Эту вкладку также можно пропустить, в этом случае заголовок будет отображать название страницы, в данном случае – «Обратная связь»:

Шаг 14.

На вкладке «Метаданные » указываются мета теги Description и Keywords веб-страницы. По сути, эта вкладка повторяет настройки раздела «Параметры публикации », который открывается в окне создания контактов.

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

«О, это отлично!»

«Мне это нравится. Это выглядит мило. Хорошие цвета, чувак… Мне нужно вернуться к работе»

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

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

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

Почему обратная связь настолько важна?

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

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

В частности, для дизайна веб-сайта вторая пара глаз помогает гарантировать, что:

1) дизайн визуально приятен для разных вкусов

2) намерения дизайнера ясны

Как просить об обратной связи?

Часто, когда мы получаем обобщенную обратную связь, мы обвиняем человека, которого спросили. Но ошибка заключается в нас самих, а не в них. Однако эта ошибка естественна: связь сложных вопросов и ответов - это не умение, с которым мы рождаемся.

Именно поэтому нам нужны социальные хаки. Нам нужны трюки, чтобы освоить процесс коммуникации.

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

Чтобы создать атмосферу комфорта, ниже мы расскажем, что необходимо сделать:

Известите об этом людей преждевременно и дайте достаточно времени для просмотра вашей работы. Никогда не удивляйте кого-то своей просьбой или не ставьте перед фактом. Если вы это сделаете, обратная связь, которую вы получите, будет поспешной и поверхностной.
Скажите человеку, чего именно вы ждете от него. Если люди знают, какую обратную связь вы хотите, тогда они могут ответить соответственно. Свободное направление не всегда отличная идея: люди нуждаются в ограниченном фокусе, чтобы сделать все, как надо.
Ограничьте их варианты. Намного легче принять решение между двумя вариантами, чем с неопределенным диапазоном.
Будьте осведомлены о том, как они подают обратную связь и что они не говорят. Вы можете раскрыть мысли, которые они могут не знать, как выразить.

Давайте чуть подробнее расскажем о каждом из пунктов.

Сообщите тип обратной связи

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

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

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

Дайте людям время

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

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

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

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

Ограничьте варианты

Когда вы находитесь в офисе окулиста, они сравнивают эффективность различных линз. Помните, что вы всегда сравниваете только две линзы за раз? Для этого есть веская причина.

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

Когда есть только два варианта, гораздо проще сказать, какой из них лучше.

Вопрос «Как вы думаете, этот цвет лучше?», приводит к «Хм, ну, я не совсем уверен… их несколько миллионов». Избегайте этого. Вместо этого попробуйте спросить: «Это выглядит лучше в этом красном или в этом красном?» или «Лучше с выравниванием по центру или по левому краю?». Затем продолжайте повторять свои вопросы до тех пор, пока у вашего друга будет терпение чтобы задумчиво отвечать.

О да. Удостоверьтесь, что у вас есть терпеливые друзья. Удачи вам в этом!

Спросите их, что не нравится

В одном интервью Илон Маск, генеральный директор Tesla и SpaceX, говорил о большей важности получения отрицательной обратной связи - спрашивать людей, что они ненавидят, а не то, что они любят. Чтобы максимально использовать этот процесс, необходимо создать среду, в которой другой человек чувствует себя достаточно удобно, чтобы открыто критиковать ваш дизайн. Это подводит нас к следующему:

Принимайте обратную связь изящно

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

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

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

Обратите внимание на то, как люди говорят, и что они не говорят

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

Возможно, вы заметили, что ваш друг что-то заметил, но молчите. Или начнет что-то говорить, а затем отступит. Все это признаки упущенных возможностей для конструктивной обратной связи. У этого человека есть что-то потенциально супер полезное сказать, но он не может. Сделайте так, чтобы он критиковал вас. Чтобы сделать это, начните с критики своей собственной работы в беззаботной манере, чтобы он узнал, что вы не думаете, что вы и ваша работа всегда являются воплощением совершенства. Затем вежливо убедите его, что вы особенно хотите услышать отрицательный отзыв и спросите снова.

Двигайтесь вперед

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

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

HTML

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

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail : < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Сообщение: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Отправить" />

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

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

< form method= "post" action= "mail.php" > …

для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).
< input maxlength= "30" type= "text" name= "name" />

Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.
< label for = "name" > Имя:

Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.
< textarea rows= "7" cols= "50" name= "message" >

Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.
< input type= "submit" value= "Отправить" />

О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.
< div class = "right" >

использованы только для дальнейшего визуального оформления формы.

CSS

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

Мы использовали данный код:

form { background: #f4f5f7; padding: 20px; } form . left, form . right { display: inline- block; vertical- align: top; width: 458px; } form . right { padding- left: 20px; } label { display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; } input, textarea { border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; } textarea { height: 98px; margin- bottom: 32px; } input[ type= "submit" ] { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase; }

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

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

Не используйте для переноса строк и создания отступов лишние теги по типу < br>, < p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться < br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен? .

Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .

PHP

Ну вот и пришло время сделать нашу форму работоспособной.

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

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

Ваше сообщение успешно отправлено

Обсуждение 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." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.

Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

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

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

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

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

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

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

< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ 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] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }

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

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

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

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

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

RSContact – это бесплатная русскоязычная форма обратной связи для Joomla с возможностью настройки полей, писем и защитой от спама. Форма очень простая в плане настройки, адаптивная и вполне нормально интегрируется с разными шаблонами. Можно создать форму минимум с одним полем «E-mail» и кнопкой отправки. А можно включить ещё около 18 полей разного типа. Есть возможность отображения чекбокса согласия с обработкой персональных данных согласно GDPR и 152 ФЗ . Если у Вас уже сконфигурирована почта в общих настройках Joomla и активирован какой-то «общий» плагин капчи, то с отправкой писем и защитой от спама Вам не надо дополнительно возиться. Естественно, что такое расширение как RSForm не получится заменить при помощи RSContact. Но для быстрого создания формы обратной связи его будет более чем достаточно.

Общие сведения

Рассмотрим основные, на мой взгляд, возможности и особенности RSContact.

Поддержка Joomla 3.2 и более новых версий.
Адаптивный дизайн (Bootstrap).
Возможность создания форм, состоящих из 1-18 предварительно настроенных полей (разных типов) (рисунок ниже). Есть три поля, которые можно настроить под себя. Например, создать спадающий список с нужными Вам вариантами для выбора.
Подписи полей могут быть внутри или снаружи полей.
Наличие поля для дачи согласия с обработкой персональных данных пользователя.
Возможность делать поля обязательными или необязательными для заполнения. Вы сможете сменить символ обязательного для заполнения поля.
Наличие опций для редактирования писем, приходящих администраторам. С возможностью вставки заполнителей и оформления писем (вёрстка текста).
Возможность отправки писем одному или нескольким администраторам.
Есть возможность вставки своего собственного CSS и Javascript кода для изменения внешнего вида формы и изменения её функциональности.
Возможность вставки над или под формой дополнительной информации.
Возможность создания горизонтальных и вертикальных форм.
Возможность редактирования сообщения, которое будет показано пользователю после отправки формы.
Защита от спама при помощи плагинов капчи Joomla.
Простая настройка.
Возможность отключения загрузки jQuery для формы. Это может улучшить совместимость с другими расширениями.
Есть перевод на русский , английский, немецкий и другие языки.
Наличие документации (на английском языке).

Настройки модуля обратной связи Joomla разделены на 7 вкладок. На вкладках Модуль, Привязка к пунктам меню и Права собраны «привычные» для всех модулей Джумла опции. На вкладке Дополнительные параметры всё, кроме опции Загружать jQuery , тоже схоже с другими модулями. Сама опция Загружать jQuery позволяет включить/отключить загрузку библиотеки jQuery, которая нужна для нормального функционирования модуля обратной связи. Если эта библиотека загружается другими расширениями или у Вас возник конфликт на сайте, то попробуйте отключить эту опцию.

Поля

Данная вкладка (рисунок ниже) содержит опции, позволяющие включать или отключать разные поля формы обратной связи. Все доступные поля показаны на форме на рисунке выше. Для большинства полей есть такие «варианты отображения»:

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

Да. Поле будет показано во фронтальной части сайта. Пользователю не обязательно нужно его заполнять.

Нет. Поле не будет показано во фронтальной части сайта.

Можно отключить все поля кроме поля E - mail . Оно является обязательным для заполнения.

В основном, все поля – это обычные текстовые поля или текстовые области. Рассмотрим только отличающиеся.

Вид Имя. Можно отображать поле имени пользователя в одну строку (Имя ) или в две (Фамилия и имя ).

Вид поля Тема. Данное поле может быть одним из таких типов: , то в поле Предварительно заданные темы можно ввести варианты, по одному в строку, которые пользователи смогут выбирать во фронтальной части сайта. На рисунке ниже показан пример поля темы тип Спадающий список . Задав темы, Вы сможете, например, настроить правила обработки писем (фильтры) на почте и получив письмо с той или иной темой перенаправить его нужному получателю автоматически. Подробнее о том, как это можно сделать для почты Яндекс , Mail.ru и Gmail можно прочесть в их справке. Плюс, это можно сделать и для других почтовых сервисов и почтовых клиентов, например, для Thunderbird .

Длина сообщения. Ограничение на количество символов в поле Сообщение .

Капча Joomla!. Возможность активации капчи для защиты от спама. Для этого нужно, чтобы у Вас был настроен и включён любой плагин тип «captcha» в менеджере плагинов. Также проверьте настройки опции CAPTCHA (по умолчанию) в Система – Общие настройки .

Отправить копию. Вы можете настроить возможность отправки копии письма пользователю на почту. Доступны такие варианты: Разрешить пользователю решать – в форме обратной связи Джумла будет отображаться специальный чекбокс (рисунок ниже), отметив который, пользователь получит копию письма себе на почту; Да – в форме обратной связи чекбокс не будет показан, но на почту пользователю будет оправлена копия письма; Нет – в форме обратной связи чекбокс не будет показан и на почту пользователю не будет оправлена копия письма.

Показать чекбокс согласия с обработкой персональных данных. Активирует вывод чекбокса (рисунок ниже) для получения согласия от пользователя на обработку его персональных данных согласно регламенту GDPR и 152 ФЗ.

В форма обратной связи на Joomla можно создать до 3-х настраиваемых полей разного типа: Текстовое поле, Текстовая область, Спадающий список, Радио кнопка, Чекбокс . Если Вы выбрали один из таких типов: Спадающий список, Радио кнопка, Чекбокс , то в поле Предварительно заданные темы можно ввести варианты, по одному в строку, которые пользователи смогут выбирать во фронтальной части сайта. Текстовое поле, Текстовая область и Спадающий список рассмотрены на рисунках выше в статье, а на рисунке ниже показан пример настраиваемого поля тип Радио кнопка (в верхней части рисунка) и Чекбокс (в нижней части рисунка).

Также отдельно стоит отметить поле Область . По умолчанию в нём заданы имена штатов США. Чтобы это изменить, откройте файл «modules/mod_rscontact/helper.php» и примерно с 33 строки, после «static $states = array», начинается список областей. Измените его так, как Вам нужно. Можно добавлять и удалять области.

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

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

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

#mod-rscontact-counter-231 {display: none;}

Она скрывает отображение поля со счётчиком оставшегося количества символов (рисунок ниже).

Настраиваемый JavaScript. Вы можете ввести Ваш собственный Javascript код, без тега «script», который будет загружен с формой.

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

Позиция подписи . Можно располагать подписи полей внутри полей или над ними (рисунок ниже).

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

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

Автоматическая ширина полей . Эта опция влияет на настройку ширины полей.

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

В данной вкладке (рисунок ниже) собраны опции, которые позволят Вам настроить письма, приходящие администратору и пользователю. Настройки действуют одинаково и для админов, и для пользователей.

В опциях Получатель (e-mail администратора), Копия, Скрытая копия Вы сможете указать получателей писем. Как минимум, надо задать e-mail в поле Получатель (e-mail администратора) . Можно указать несколько адресов, разделяя их запятой или точкой с запятой.

В поле Тема Вы вписываете тему письма. Можно использовать заполнители. Заполнители – это специальные теги, вместо которых будут подставлены те или иные данные. Список доступных заполнителей указан под полем ввода содержимого письма. В поле Содержимое можно ввести текст письма с применением заполнителей. На рисунке выше видны настройки содержимого письма. А вот так выглядит само письмо (рисунок ниже). Как видите, все теги были заменены на данные из формы, которые указал пользователь, и данные, которые форма смогла подтянуть из других источников (дата, IP адрес, название сайта).

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

Если письма не отправляются, то попробуйте такие варианты решения проблемы.

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

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

Как видите, данная форма обратной связи Joomla весьма функциональная и простая в плане настройке. Надеюсь, что данный обзор поможет Вам в выборе подходящего расширения и последующей настройке модуля RSContact. В следующей статье «Обзор DJ-EasyContact. Модуль формы обратной связи в Joomla » мы рассмотрим ещё одно аналогичное бесплатное расширение.