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

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

А когда первое общение происходит онлайн, этим атрибутом становится электронное письмо.

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

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

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

Скелет классического делового e-mail

Элемент №1. Фирменный почтовый адрес

Если уже мы начали говорить о e-mail переписке, то давайте начнем с самого начала – с электронного адреса.

Во-первых, если у вас нет корпоративного адреса, регистрируйте свой почтовый ящик на серьезных сервисах.

Во-вторых, позаботьтесь о фирменном адресе. Забудьте про всякие «крошка[email protected]» или «супермен[email protected]».

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

Элемент №2. Шаблон в корпоративном стиле

Внешний вид письма – то самое первое впечатление, о котором говорят «неизгладимое». Именно здесь начинается любовь или неприязнь с первого взгляда.

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

• подберите шрифт по вкусу, учитывая при этом размер и цвет текста (в электронных документах желательно использовать шрифты без засечек, например – Verdana, Tahoma, Arial, Calibri);

• отформатируйте текст (например, по левому краю);

• добавьте в начало письма картинку со своим лого (интерфейсы популярных почтовых сервисов позволяют вставить иллюстрацию в текст);

• настройте автоматическую подпись (чуть ниже рассмотрим, какую информацию стоит здесь указывать).

Элемент №3. Приветствие

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

(Особенно это касается новичков-вебрайтеров)

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

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

Например: «Приветствую, Иван Иванович! Как прошли выходные?» .

Элемент №4. Содержание (цель обращения)

В этой части описывается суть обращения. Желательно при этом текст разбивать на короткие абзацы, использовать маркированные списки.

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

Элемент №5. Предупреждение о вложенном файле

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

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

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

Элемент №6. Просьба об обратной связи

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

«Позвоните по телефону 321-456, и я с радостью отвечу на все Ваши вопросы».

«Ждем Ваших комментариев».

«Подтвердите, пожалуйста, получение e-mail».

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

Этой фразой вы застрахуете себя от подобных неприятностей.

Элемент №7. Прощание

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

Написать электронное письмо без прощания – все равно что в разгар переговоров встать из-за стола и молча уйти.

Элемент №8. Личная подпись с указанием контактов

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

• имя, фамилию, должность (если эта информация уже есть в «шапке», то в подписи можно ее пропустить);

• название компании;

• слоган или УТП;

• рабочий телефон;

• ссылка на сайт;

• ссылка на страницы в социальных сетях.

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

Майкл Хайятт в своей легендарной книге «Платформа» уделяет особое внимание подписи в е-мэйле. И кроме вышеперечисленных моментов он предлагает добавить еще такую фразу: «Данный электронный адрес конфиденциален, так же как адреса блога и страниц в соцсетях, если только мы специально не договоримся об обратном» .

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

Кстати, вам приходилось иметь дело с неопрятными е-mail? Как этот факт отразился на дальнейшей коммуникации с отправителем?

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

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

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

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

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

Давайте рассмотрим некоторые особенности делового письма. Итак, деловая переписка - это:

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

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

1.Please find attached

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

Приведем пару примеров использования:

• Please find attached my portfolio.
• Please find attached copy of the agreement/contract.

2.I have forwarded

Эту фразу можно использовать, если вам необходимо переслать письмо другим получателям. Чтобы уведомить об этом адресата, отлично подойдет фраза «I have forwarded». Например:

• I have forwarded Anna’s CV to you.
• I have forwarded John’s email to you.

3.I’ve cc’ed

Человек, непосвященный во все тайны особенностей деловой переписки, может и не понять, что значит это странное сокращение. Но мы-то профессионалы. «I’ve cc’ed» – сокращение, которое расшифровывается, как I have carbon copied. Фраза означает «поставить кого-то в копию для получения писем».

Так что если вам нужно кого-то поставить в известность о том, что вы поставили в копию других получателей – смело используйте эту фразу. К примеру:

• I’ve cc’ed Sara on this email.
• I’ve cc’ed Jack and Jimmy on these emails.

Что касается сокращений, которые нельзя использовать в деловой переписке – для этого случая обычно делают исключение.

4.For further details

Данная фраза – проверенный способ вежливо завершить ваше письмо на английском. «For further details», означает «для более подробной информации», «более подробно». Примеры использования:

• For further details contact me any time.
• For further details write to our Sales-manager.

Еще одна фраза, которая поможет вам вежливо закончить – «If you have any questions, please do not hesitate to contact me». В переводе это означает «Если у Вас возникли вопросы, смело пишите мне».

5.I look forward to

Фраза «look forward», означает «ждать с нетерпением». Так что если вы с нетерпением ожидаете ответа или какого-то другого действия от адресата, то будет вполне уместно употребить эту фразу. К примеру:

• I look forward to your answer.
• I’m looking forward to your reply.

Фразу лучше использовать в конце письма.

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

Пишите электронные письма на английском правильно, дорогие друзья! Успехов!

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