Вздорный обратной связи копию письма. Создаем форму обратной связи на PHP

Доброго времени суток, друзья! Сегодня очередная статья, посвященная CMS Joomla, вернее не самому движку, а созданию контактов с формой обратной связи. Особенностью Joomla формы обратной связи является то, что все инструменты необходимые для ее создания находятся у вебмастера под рукой, и нет нужды в скачивании и установке дополнительных расширений . CMS оснащена встроенным компонентом «Контакты», а также плагином защищающим от спама «reCAPTCHA».

Условно реализацию поставленной затеи можно разделить на несколько этапов, а именно:

Создание и настройка контакта.

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

Включение, настраивание и добавление капчи.

Зачем нужна форма обратной связи

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

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

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

Какую информацию желательно оставить владельцу сайта?

Мобильный номер (коммерческие веб-проекты, интернет-магазины).

Адрес (коммерческие веб-проекты, интернет-магазины).

График работы, способ доставки и возможные способы оплаты (коммерческие веб-проекты, интернет-магазины).

E-mail, Skype и т.п. (блоги, сайты-визитки, одностраничники, коммерческие веб-проекты, интернет-магазины).

Joomla контакты

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

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

Алиас – поле заполняющееся автоматически, т.е оставляем пустым.

Связанный пользователь – это имя, которое будет отображаться при комментировании. Можно указать свой псевдоним или оставить имя присвоенное системой по умолчанию «Super Users».

Изображение – предусматривается возможность выбора изображения, которое будет привязано к сему контакту.

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

E-mail – отвечает за отображение электронного адреса контактного лица.

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

В правой области экрана (сайдбар) необходимо выбрать Состояние/Опубликовано, Категория/Uncategorised, Избранные/Нет.

«Дополнительная информация » - вкладка с текстовым редактором, в котором рекомендуется прописать краткое приветствие.

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

«Настройка отображения контента » - отвечает за отображение формы обратной связи.

Показывать форму обратной связи – «Показать».

Отправлять копию отправителю письма – в зависимости от вашего выбора позволяет скрыть или показать отправителю копию его же письма.

Создание пункта меню Joomla для вывода контактов и формы обратной связи

На следующем этапе следует отправиться во вкладку Меню/Main Menu/Создать пункт меню.

На открывшейся странице меню присваиваем заголовок. Так и пишем «Контакты».

Тип пункта меню – нажимаем синюю кнопку «Выбрать», после чего на открывшейся странице выбираем Контакты/Контакт.

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

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

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

Защита Joomla от спама посредством настройки встроенного плагина reCAPTCHA

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

CMS Joomla обзавелась встроенной капчей начиная с 2,5 версии, до этого нужно было довольствоваться сторонними расширениями. Несмотря на то, что в Джумла используется reCAPTCHA, мы попытаемся настроить более современную и, на мой взгляд, удобную версию. Вот как она будет выглядеть после выполнения всех настроек.

Для начала давайте включим плагин, отправившись в Расширения/Менеджер плагинов. Для более удобного и быстрого поиска я рекомендую прописать в строке поиска – captcha и нажать значок, отвечающий за поиск. В итоге у вас откроется аналогичное окно. Нажимаем на крестик возле пункта «Состояние», тем самым запускаем плагин и нажимаем по словосочетанию - CAPTCHA – reCAPTCHA.

Пришло время получить «Публичный ключ», а также «Приватный ключ».

Для получения ключей необходимо отправиться по ссылке . Это один из многих сервисов принадлежащих Google. У вас обязательно должна быть собственная учетная запись. Вы легко сможете авторизироваться, введя свои данные, которые ранее использовали для добавления RSS-ленты на сервисе Feedburner или устанавливая код Google Adsense на Joomla .

При помощи открывшейся формы нужно пройти регистрацию сайта.

Название – присваиваем название (допустим название главной страницы).

Выберите тип reCAPTCHA – позволяет выбрать тип капчи - reCAPTCHA V2 – стандартная форма, для прохождения которой необходимо установить галочку возле словосочетания «Я не робот»; Invisible reCAPTCHA – проверка пользователей в фоновом режиме.

Ставим галочку возле предложения «Примите условия использования reCAPTCHA» и «Отправлять владельцам оповещения», после чего нажимаем кнопку «Регистрация».

Ну вот, наши ключики готовы. Осталось всего ничего. Копируем значение поля «Секретный ключ» в поле «Приватный ключ» в стандартном плагине reCAPTCHA, а поле «Ключ» в поле «Публичный ключ».

После получения и внесения ключей можно выбрать «Стиль» наиболее подходящий для вашего сайта, а также «Размер». Теперь нужно кликнуть «Сохранить и закрыть», после чего отправиться по пути Система/Общие настройки/CAPTCHA (по умолчанию) и выбрать единственное предусмотренное системой значение «CAPTCHA - reCAPTCHA». Опять нажимаем «Сохранить» и проверяем работоспособность капчи, зайдя в форму обратной связи Joomla.

Как видите, все работает. Если у вас возникли какие-нибудь сложности, давайте решим их вместе в комментариях.

Спасибо за внимание и до скорого на страницах Stimylrosta.

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее 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)" >

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

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

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

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

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

Инструкции: введите следующий текст в поле для электронного письма (можете редактировать его и адаптировать к своей ситуации, чтобы было понятно, что его автор – вы). Разошлите его пяти – тридцати (чем больше, тем лучше) знакомым, которые знают вас достаточно хорошо, чтобы дать честную оценку вашим сильным и слабым сторонам. Это могут быть ваши друзья, родственники, коллеги, наставники, учителя, бывшие работодатели или менеджеры, клиенты и прочие важные и близкие для вас люди. А если вы достаточно смелы, то и люди, важные или близкие для вас в прошлом. (Я серьезно.)

Важно: не забудьте рассылать письма как «скрытые копии», чтобы получатели не могли видеть остальных адресатов. (А лучше вообще скопировать и вставить письмо и рассылать их потом каждому человеку отдельно.)

Поле «Тема»: Это очень важно… или Буду счастлив услышать ваше мнение…

Текст электронного письма:

Дорогие друзья, родные и коллеги!

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

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

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

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

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

Электронное письмо, которое изменит вашу жизнь: Мысли в заключение

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

Одной из распространенных задач для веб-мастера, является создание почтовых форм или форм обратной связи для оправки писем (сообщений) с сайта. В Joomla это можно реализовать несколькими способами, в том числе и стандартно, с помощью компонента «Контакты». Но в этой статье я расскажу о том, как можно создать формы для отправки сообщений, формы обратной связи и о том, как их вставить в любое место сайта с помощью стороннего компонента. Этот компонент называется aiContactSafe. Он абсолютно бесплатен, но вы можете помочь развитию такого полезного проекта, пожертвовав небольшую сумму. Скачать его можно через JED или с сайта разработчика , предварительно зарегистрировавшись. Или можно скачать с сайта . На момент написания статьи актуальной была стабильная версия aiContactSafe 2.0.21с, совместимая как с Joomla 1.5, так и с Joomla 2.5.

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

Модуль Mod_aiContactSafe, который выводит форму обратной связи в любой позиции шаблона сайта.

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

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

Компонент aiContactSafe обладает следующими возможностями:

• Имеет свой встроенный защитный код (CAPTCHA). Встроенная CAPTCHA может задавать кодовые слова для различных языков, выводить вместо слов случайный набор символов заданной длины. Защитный код легко интегрируется в дизайн сайта благодаря настройкам цвета символов и цвета фона.
• Поддержка профилей. С помощью профилей, на сайте можно создать различные виды форм, с различным набором пользовательских полей. Например, в одном профиле можно настроить форму обратной связи для отправки резюме, а в другом профиле форму заявки на подбор персонала, а в третьем профиле настроить форму для отправки сообщения администратору сайта и т. д.
• Неограниченное количество пользовательских полей различного типа: текстовое поле, флажок, переключатель, список, выпадающий список, разделитель, вложение файла, контакт Joomla, адрес электронной почты, скрытое поле, многострочное текстовое поле.
• Добавление префиксов (заголовков) и суффиксов полей.
• Перенаправление на указанную страницу в случае успешной отправки сообщения (письма).
• Добавление любого количества вложений, работающих как с AJAX, так и без него.
• Поддержка SEF. Можно использовать как родной SEF Joomla, так и ARTIO JoomSEF или sh404SEF.
• Поддержка многоязычности.
• Языковые файлы для более чем двадцати языков.
• Указание дополнительной (контактной) информации с помощью редактора WYSIWYG.
• Подробные инструкции по настройке и администрированию (на английском).
• Блокировка пользователя по IP адресу.
• Блокировка сообщений по определенным словам (стоп-словам).
• Автоматическая блокировка IP адресов, которая срабатывает через заданное время, если посетитель сайта с определенного IP адреса отправляет сообщения содержащие стоп-слова.

Итак, скачиваем компонент и производим стандартную установку, используя «Менеджер расширений». После успешной установки переходим в меню «Компоненты» и выбираем пункт «Форма обратной связи». По умолчанию компонент будет открыт на вкладке «Сообщения». Сообщений у нас пока нет, поэтому займёмся настройкой. Перейдем на вкладку «Статусы сообщения» и переименуем их. У компонента есть небольшие проблемы с локализацией, поэтому для удобства приходится их исправлять вручную.

Кликаем по названию статуса и переименовываем: New в Новое, Read в Прочитанное, Replied в Отправленное, Archived в Архивное.
Переходим на вкладку «Панель управления». Здесь находятся общие настройки компонента. Большую часть настроек можно оставить со значениями по умолчанию. Стоит обратить внимание на блок антиспам-настроек.

Сейчас мы не будем настраивать этот блок – каждый настраивает его сам, согласно своим потребностям. Рассмотрим в вкратце эти настройки.
Активировать контроль SPAM"а. Включает/выключает контроль спама по стоп-словам. Если в сообщении будут найдены стоп-слова, то оно не будет отправлено. Работает в паре со следующей опцией.
Блокировать письма содержащие. В это поле вписываются стоп-слова, через «;».
Записывать заблокированные сообщения. Включает запись сообщения, помеченного как СПАМ в БД. Оставляем включенным – для контроля.
Активировать запрет по IP адресу. Если активировать эту опцию, то посетители с отмеченных, ниже IP адресов не смогут получить доступ к форме обратной связи (контактной форме).
IP адреса для блокирования. Это поле содержит список блокируемых ip адресов. Посетители, пришедшие на сайт с одного из указанных адресов, не смогут получить доступ к контактной форме. Для блокировки больших сегментов сети можно использовать символы подстановки, например «*». Если записать так: 123.*.*.*, то будут запрещены все IP адреса, начинающиеся с 123.
Перенаправлять заблокированные IP адреса на. В это поле можно ввести адрес страницы, на которую будет перенаправлен посетитель сайта, если он пришёл с заблокированного IP адреса. Если ничего не указать, то перенаправление будет выполнено на главную страницу сайта.
Запрещать IP-адреса, которые отправляют сообщения с заблокированными словами. Включает/выключает автоматическую блокировку IP адресов посетители, с которых отправляют сообщения со стоп-словами. Блокировка будет срабатывать, если будут выполнены условия двух, нижеследующих опций.
Максимальное количество заблокированных сообщений перед запретом IP. Предельное количество сообщений со стоп-словами, после которого IP адрес будет заблокирован.
Минуты для подсчёта заблокированных сообщений. Период времени, в который осуществляется подсчёт сообщений со стоп-словами.
Отправлять email с сообщением о запрете IP. Адрес электронной почты, на который отправляется сообщение о срабатывании автоматической блокировки IP адреса.
Кроме блока антиспам-настроек следует обратить внимание на настройки, которые находятся в нижней части окна.

Следующие четыре опции относятся к настройке вложений, отправляемых с письмом.
Максимальный размер вложения (в байтах). Если в форме обратной связи будет поле для вложения файла, то полезно ограничить его максимальный размер. По умолчанию 5 Мб.
Разрешённые типы вложений. В этом поле через запятую можно указать разрешенные типы вложений.
Присоединить к сообщению. Определяет отправку вложения. Можно присоединить вложение к сообщению, а можно с сообщением отправить ссылку на файл, который при отправке будет сохранён на сервере.
Удалить файлы после отправки сообщения. Если вложение отправляется прикреплённым к сообщению, то файл вложения можно удалять с сервера. Например, для экономии дискового пространства.
Проверить языковые файлы. Нажатие этой кнопки запускает процедуру проверки языковых файлов для соответствующего языка.
Следующие три опции доступны, если установлены соответствующие им компоненты: ARTIO JoomSEF, Joom!Fish и FaLang. Если на сайте установлены данные компоненты, то имеет смысл включить их интеграцию с aiContactSafe.
За этими настройками следуют три кнопки включения вышеописанных составляющих компонента. По умолчанию они выключены. Кнопки сопровождает устрашающее предупреждение. Нам с вами нужно знать, как это работает, поэтому включаем все три.
Далее следует настройка прав доступа к компоненту. Здесь можно установить группу пользователей сайта, которая может читать сообщения с лицевой части сайта. По умолчанию «Супер-пользователи». Так и оставим.
Название кнопки «Удалить таблицы из базы данных» говорит само за себя. Она может понадобиться в исключительных случаях, когда нужно полностью удалить или полностью переустановить компонент. Нажатие на эту кнопку удалит в базе данных сайта все таблицы, созданные компонентом aiContactSafe. Без резервной копии их восстановить не удастся!
Следующую часть настроек рассмотрим на простом практическом примере. Допустим, что на сайте кадрового агентства нужно разместить две формы обратной связи: первая – общая, для контактов по общим вопросам, а вторая – для отправки резюме. Для первой формы будет создана страница и пункт меню «Контакты», а вторая форма будет размещаться на страницах с вакансиями. В первой форме обратной связи нам нужна следующая информация: имя отправителя, адрес электронной почты, тема сообщения, текст сообщения и возможность отправки копии сообщения отправителю. Во второй контактной форме нам понадобятся следующие поля: имя отправителя, адрес электронной почты, название вакансии и возможность прикрепления файла с резюме.
В компоненте aiContactSafe переходим на вкладку «Поля».

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

Название . Это внутренняя переменная компонента. Всегда пишется латинскими буквами без пробелов. Оставляем как есть.

Field label (метка поля) . Это заголовок в поля в форме обратной связи. Меняем на Отправитель.

Label parameters (параметры метки) . Здесь можно задать дополнительные стили, как если бы мы задали стили в тегах < style >. Только кавычки должны быть одинарными. Например, мы хотим, чтобы при наведении указателя мыши всплывала подсказка. Тогда в этом поле можно написать: title="Ваше имя, например Сергеев Николай Николаевич".

Field label in message ( метка поля в письме ) . Это заголовок в письме получателя. Мы ведь получим письмо! Меняем на Отправитель.

Label in message parameters (параметры метки поля в письме) . То же, что и Label parameters, только для письма.

Метка после поля . Если надо, чтобы заголовок был не перед полем ввода, а после.

Field type (тип поля) . Тип поля. Важный параметр. Можно выбрать один из семнадцати типов. Нам нужна текстовая строка, поэтому ничего не трогаем.

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

Field values (значения поля) . Так же недоступен для текстовых полей. Нужен для полей списков, выпадающих списков, групп флажков и переключателей.

Лимит поля . Параметр, ограничивающий количество символов в текстовом поле. Больше символов, чем указано в этом параметре ввести нельзя. Ограничим это поле 60 (шестьюдесятью) символами.

Field parameters (параметры поля) . Такая же настройка, что и для метки поля. Но относящееся уже к самому полю ввода. По умолчанию уже содержит значение. Добавим к нему свои пять копеек, чтобы получилось class="textbox" title="Ваше имя, например Сергеев Николай Николаевич". Пусть тоже будет всплывающая подсказка.

Автозаполнение . В нашем случае Нет.

Значение по умолчанию . Можно сразу задать значение поля по умолчанию, но нам это не надо.

Префикс поля . Информация, которая будет добавлена прямо перед полем ввода.

Суффикс поля . Информация, которая будет добавлена прямо после поля ввода.

Field required (необходимое поле) . Поле, обязательное для заполнения.

Включать в тело письма . Отображать ли значение поля в письме получателя.

Сохраняем настройки. Теперь вы можете самостоятельно поправить текстовые поля « Phone » и « Subject ». Присвойте метки Телефон и Тема соответственно.

Поле « Email », практически ничем не отличается от текстового поля. Различие состоит в том, что для этого типа полей предусмотрена проверка на ввод корректного адреса электронной почты. Поправим только метки поля – пусть будут Эл. почта.

Для поля « Message » зададим значение для меток Сообщение. Можем установить лимит в 1000 символов (на своё усмотрение). Тип этого поля – «Расширенное текстовое поле», а значит и настройки идентичны.

В настройках поля « Send a copy of this message to yourself » так же поменяем метки на Отправить копию сообщения себе. Это поле представляет собой флажок (галочку). Если опция установлена, отправитель получит копию своего сообщения на адрес электронной почты, который он указал выше.

Всё, существующие поля поправили! Теперь создадим два нужных нам поля: текстовое поле «Вакансия» и поле для прикрепления файла резюме к сообщению. Для этого всё в той же вкладке «Поле» кликаем на кнопке «Добавить». В открывшемся окне задаём значение поля Название: aics_vacancy. По умолчанию тип создаваемого поля «Текстовая строка» - это то, что нам нужно для создания поля «Вакансия». С текстовыми полями вы уже умеете работать, так что настроите сами. На всякий случай ниже привожу скрин своих настроек.

Теперь создадим поле для прикрепления файла к сообщению. Нет ничего проще! Нажимаем кнопку «Добавить», название поля - aics_file, метка поля - Прикрепить файл с резюме до 5 Мб(zip,rar,doc), метка поля в письме - Прикрепить файл, тип поля – Файл.
Теперь, когда есть все необходимые поля можно настроить профили. В компоненте aiContactSafe переходим на вкладку «Профайлы». Профайлы или профили – это наборы настроек для определённой формы обратной связи. Мы видим, что здесь о нас тоже позаботились и сделали два профиля. Кликаем на названии первого профиля (его ID - 1) и открываем его для редактирования. Настроек довольно много, но все они интуитивно понятны. Делаем следующее:

• Меняем название профиля, чтобы было понятнее
• Включаем опцию «Использовать AJAX для отправки формы»
• Если нужно, то настраиваем отображение CAPTCHA

Здесь стоит обратить внимание вот на что. Если мы меняем максимальную длину слова для CAPTCHA, то нужно не забывать о «Ширине CAPTCHA». Чтобы не получилось так, что при заданной ширине отображаются не все символы. Другими словами, чтобы они поместились.

• Если хотим, чтобы сообщения приходили на адрес электронной почты отличный от указанного в общих настройках сайта , то заполняем поле Электронный адрес . Следует помнить, что в это поле вводится адрес электронной почты, который будет работать с вышеуказанными настройками. Т. е. если в это поле ввести адрес ящика из другого домена, например из yandex.ru, то нужно будет соответствующим образом редактировать параметры отправки почты в общих настройках сайта.
• Заполняем префикс темы письма.
• Если нужно, меняем формат письма с HTML на «Простой текст».
• Изменяем значение поля Обозначить необходимые поля символом (ами) .
• Изменяем Уведомление об обязательных полях.
• Пишем своё Сообщение благодарности.

• Сортируем и отмечаем нужные для этого профиля поля.

Кликаем на кнопке «Применить» и поднимаемся в верхнюю часть окна. Здесь нас интересуют кнопки: Edit Contact, Edit CSS, и Edit Email. Этими кнопками можно воспользоваться не только в этом окне. Они присутствуют в панели управления вкладки «Профайлы». Требуется только выделить нужный профиль и нажать соответствующую кнопку.

Итак, нажимаем кнопку Edit Contact. В открывшемся окне мы можем отредактировать контактную информацию формы обратной связи или вообще убрать её. Информация корректируется редактором по умолчанию, установленным для текущего пользователя. Заполняем так, как нам нужно.

Сохраняем изменения. Теперь если нужно, то изменяем оформление (стили). Для этого выделяем профиль «Common» и нажимаем кнопку «Edit CSS». Подробно настройки CSS описывать не буду - во-первых, у каждого они свои, а во-вторых, это выходит за рамки статьи. Коснусь лишь вскользь. Каждый файл CSS для профиля уже содержит примеры того, как можно изменить стиль элемента формы обратной связи. Для существующих полей записи уже сделаны. Для новых элементов, если требуется, нужно скопировать строку для соответствующего типа, изменить идентификатор «field_name» на имя нового поля и добавить свойства.

После настроек CSS можно настроить вид приходящего письма. Для этого надо выделить профиль и нажать кнопку Edit Email. Редактирование вида приходящего сообщения – это задача не для новичков. На первых порах, оставляйте как есть - главное, что в нём содержится требуемая информация.
Один профиль настроили. Теперь мы можем поместить контактную информацию и форму обратной связи на сайте. Для этого в нужном меню добавляем пункт «Контакты», а тип пункта меню назначаем «Contact Form».

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

Сохраняем изменения и переходим на фронтальную часть сайта. Кликаем по пункту меню «Контакты» и видим, что у нас получилось.

Заполняем поля и отправляем сообщение. Если всё настроено правильно, то электронное письмо появится во вкладке «Сообщения».
Теперь настроим второй профиль (Module form) и рассмотрим работу модуля и плагинов aiContactSafe. А именно, как вставить модуль с формой обратной связи, как вставить форму обратной связи в статью и как сделать ссылку на такую форму.
Основные настройки второго профиля:

• Название профайла: resume
• Поле для использования в качестве темы: aics_vacancy Вакансия
• Поле для использования в качестве послать отправителю: нет

• Выбираем нужные нам поля и сортируем их

Если требуется, меняем «Префикс темы электронного письма» и переводим уведомления. Остальные настройки редактируем по своему усмотрению. Сохраняем. Удаляем всю контактную информацию для этого профиля.

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

В настройках панели управления aiContactSafe мы включили модуль Mod_aiContactSafe. Теперь с помощью этого модуля вставим форму для отправки резюме в произвольную позицию шаблона. Для этого переходим в «Менеджер модулей», находим там модуль «aiContactSafe module», открываем его и соответствующим образом редактируем.

Главное, на что нужно обратить внимание при редактировании модуля – это правильно выбранный профиль. В поле «Profile"s CSS» можно выбрать использовать ли CSS компонента или шаблона сайта. А в поле «Fields values» для полей формы обратной связи можно ввести предустановленные значения, например "aics_vacancy=бухгалтер".