Лікувальні голки та правила написання ділового листа.
Як керувати активністю свого адресата.
Почну із несподіваного питання. У вас колись встромляли голки? У кількості так від 15 до 30? І щоб ви на це пішли добровільно? І щоб ще отримували від цього задоволення та позитивний для здоров'я результат?
Так? Тоді ви зрозумієте, що я.
Ні? Значить, ви ще не знаєте про чудодійну силу процедури під невигадливою назвою акупунктура!
Я цю чарівну процедуру відкрила для себе нещодавно, пару тижнів тому (у прагненні підняти загальний фізичний тонус після виснажливого спекотного літа та напередодні щільної робочої осені та зими). Суть процедури дуже проста: на тілі людини є певні точки – особливі центри зосередження енергії та нервових закінчень. Достатньо взяти ці точки під грамотний контроль, активізувати їх – і результат! (До речі і на особі – теж, це я говорю вже по секрету, спеціально для жіночої частини моїх передплатників J).
Приголомшливий ефект: і лікувальний, і косметичний!
Перебуваючи під враженням від цього відкриття, я запитала себе: чи тільки на тілі людини є такі точки? А чи можна їх знайти в інших об'єктів? Наприклад, у тілі ділового листа? Чи може культура, правила ділового листування будується на таких точках?
Ну, щоб було так: візьми під контроль ці точки під час написання ділового листа – і лист уже «працює»: досягає мети, викликає у клієнта бажання відповісти тощо?
Задумалася над цим і дійшла висновку: Так! Чудодійні точки у діловому листі є!
Сьогодні я розповім лише про трьох. Тих, що лежать зовсім на поверхні!
Повірте, якщо ви візьмете під контроль тільки їх – ваші листи стануть на порядок більш дієвими: будуть гранично зрозумілі вашому адресату і спонукатимуть його до написання відповіді.
Отже, три точки листа. Я назвала їх трьома точками уваги: вони спочатку розташовані в полі уваги нашого адресата, а тому маємо бути в полі і нашої уваги, коли ми пишемо листа.
Дві точки уваги розташовані на початку листа.
І одна – наприкінці.
Дві точки спочатку обумовлені специфікою електронного листа.
Перша точка – тема листа. Адресат її бачить ще до того, як відкриє наше повідомлення.
Друга точка – вступна фраза. Це перший елемент, який читає адресат, коли відкриває лист.
І нарешті, третя точка – фінальна фраза. Останнє, на чому зосереджується увага адресата щодо прочитання нашого листа.
Подивіться, як ці точки працюють.
Нижче я навела два приклади листа. Перше написано поза увагою до точок уваги. Друге – з їхнім активним застосуванням.
приклад 1. Subject: Ділова переписка Date: Mon, 06 Sep 2010 від: Тамара Воротинцева. To: Іванова Ганна Ганно, добрий день! E- mailлистування у бізнесі». Я обробила та проаналізувала листи кожного. Готова зустрітися та дати персональний зворотний зв'язок. Можемо це зробити 10 вересня, орієнтовно о 17:00. Вважаю, що за тривалістю зустріч триватиме від 30 до 50 хвилин. -- З повагою,Тамара Воротинцева
приклад 2. Subject: Ділове листування. Зворотній зв'язок після тренінгу Date: Mon, 06 Sep 2010 Від:Тамара Воротинцева To: Іванова Ганна Ганно, добрий день! Як і обіцяла, повертаюся до питання посттренінгової зустрічі. У мене на руках листи ваших співробітників, які вони надіслали мені після тренінгу.E- mailлистування у бізнесі». Я обробила та проаналізувала листи кожного. Готова зустрітися та дати персональний зворотний зв'язок.Можемо це зробити 10 вересня, орієнтовно о 17:00. Вважаю, що за тривалістю зустріч триватиме від 30 до 50 хвилин. Що скажете? -- З повагою,Тамара ВоротинцеваЧи відчуваєте ви різницю, шановні читачі?
Сподіваюсь що так.
Чим, на мою думку, допомагають нам точки уваги?
За допомогою першої точки — «Тема листа» — ми привертаємо увагу адресата до аспекту нашого листа, допомагаємо адресатові швидко (навіть не відкриваючи листи) зрозуміти, про що повідомлення, а також робимо наш лист надалі, що легко ідентифікується в пошті нашого адресата.
У моєму прикладі я коротко повідомляю Ганні, що в моєму листі йтиметься про зворотний зв'язок після тренінгу «Ділове листування» (ні про оплату, ні про документи, ні про якісь інші питання, з яких ми з нею листуємося, а про правила ділового листа). Для того, щоб це дізнатися, Ганні досить просто побачити тему. Ця ж тема допоможе Ганні надалі легко і швидко знайти мого листа у своїй пошті, якщо це буде необхідно.
Друга точка - «Вступна фраза» - підвищує ступінь ясності нашого повідомлення, робить лист зрозумілішим: вказує адресату причину листа, пояснює логіку того, що відбувається.
У моєму випадку я пояснюю Ганні, що є приводом для цього мого листа: я обіцяла дати зворотній зв'язок учасникам мого тренінгу і тому пишу.
Третя точка - «Фінальна фраза» - підсуває адресата до здійснення необхідної нам дії.
Фінальна фраза – це останнє, що читає адресат у нашому листі. Зазвичай на цей момент адресат внутрішньо вже ставить собі питання: що треба робити? чого від мене чекають? І тут для нас слушний час чітко і чітко сказати про це.
Я у своєму прикладі обрала досить демократичний варіант оформлення: Що скажете?. Можна було використати його синонім: Що думаєте? або такий: «Ваша думка?»
(Про різноманіття та деякі секрети фінальних фраз – у наступних випусках).
У будь-якому разі, у цій точці ми повинні чітко повідомити адресату, якої дії ми від нього чекаємо.
Ось так, на мій погляд, виглядають найпростіші точки, якими проходить енергія ділового листа.
Шановні читачі, спробуйте взяти під контроль цю енергію у ваших листах і подивіться, як це буде працювати. Я впевнена, точки уваги роблять лист структурно та змістовно міцним, а листування – більш динамічним та результативним за своїми особливостями! Починайте та закінчуйте написання ділового листа з пильної уваги до трьох точок.
Тамара Воротинцева
Рада вас бачити на моєму тренінгу E-mail листування в бізнесі.
Подивіться міні-лекцію «Три точки уваги у листі»
Доброго часу доби, друзі! Сьогодні чергова стаття, присвячена 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
Вітаю моїх читачів, набрався досвіду та розповім Вам про принципи роботи форми зворотного зв'язку 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% no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Змінити поточну адресу сторінки через 3 секунди (3000 мілісекунд)*/
Перевірка працездатності формиВикликаємо вікно та вводимо дані для тестової перевірки нашої форми 
Ще раз нагадаю, ваш хостинг повинен підтримувати обробку php файлів, інакше наш обробник просто не виконається і жодного листа не відправиться на вказану email-адресу. Результат успішно відпрацьованої форми зворотного зв'язку 
У мене на цьому все, намагався донести сенс і роботу скрипта якнайкраще. Виникнуть питання, можете сміливо звертатися до коментарів або до мене у VK (дивіться контактні дані). Бажаю легкої та продуктивної роботи Вам.
Всім привіт! Мене звуть Андрій Тян, я – директор з розвитку B2BFamily. Я вирішив написати вам цей невеликий нарис, тому що зрозумів наступне: розкривши приховані вигоди користування нашим сервісом, можу дійсно змінити ваше розуміння продажів і сам процес продажу на краще. А поговоримо ми сьогодні про зворотний зв'язок у діловому листуванні. Впевнений, що час, який ви витратите на прочитання, не буде витрачено дарма.
Андрій Тян, Директор з розвитку B2B Family
Ох вже ці беземоційні сірі емейли!Почну з питання: як ви розумієте реакцію клієнта на пропозицію телефоном чи на зустрічі? Правильно, емоції! Невербальне спілкування видає все. Ви звертаєте увагу на жести, міміку, манери. А як можна дізнатися реакцію у діловому листуванні? Та ніяк! Найчастіше це просто шаблонні листи із емоціями Стівена Сігала.
Багато хто сприймає ділове листування як сухий обмін інформацією. Тому за листом зрозуміти справжню реакцію потенційного клієнта на пропозицію практично нереально, якщо він не напише про це прямо. Але, як показує практика, клієнт відповідає шаблонно і приблизно таке: "Дякую, ми отримали вашу пропозицію. Протягом N часу розглянемо і дамо відповідь", якщо відповідає взагалі. Вам залишається лише чекати на вердикт клієнта.
Вибудувати ефективний діалог із клієнтом після листування - What?Якщо під час телефонної розмови чи зустрічі реакція клієнта приблизно зрозуміла: "цікаво/є сумніви/швидше за все немає", то задати тон і стратегію переговорів стає легше. Ділове листування в цьому плані набагато складніше. Найчастіше вибудувати ланцюжок ділових листів, виходячи з даних про поведінку та реакцію клієнта, неможливо, тому що цих даних просто немає. Але в той же час, ми всі знаємо, що продаж має бути природним - клієнт повинен сам зрозуміти, що йому це потрібно і вигідно, а не купити тому, що на нього натиснули.
Уявіть тепер зустріч, переговори та клієнта з емоціями Стівен Сігала! Комфортно? Класні переговори щодо співпраці? А от якщо клієнт вас слухає, ставить питання, заперечує – ось це якраз основа для того, щоб почати реально продавати, виявляти потреби, уточнювати деталі, презентувати ваш продукт, виходячи з потреб клієнта - те, що називається справжнім продажем. Але як налагодити цей гармонійний ланцюжок комунікації з клієнтом? Як перенести все це з живого спілкування у ділове листування?
З'ясувати, як клієнт відреагував на вашу пропозицію насправді!
Такими ви будете бачити емоції клієнта в листуванні, якщо знатимете:
- коли, о котрій, скільки разів відкривали ваш лист і чи відкривали взагалі
- як дивилися ваша комерційна пропозиція
- що зачепило, або навпаки збентежило у вашій презентації, на що звертають увагу.
А якщо вже клієнт запитання поставив прямо під час перегляду документа - беріть в обіг такого клієнта одразу! Пам'ятайте, важливо зв'язатися з клієнтом, поки він "гарячий". Про це ми вже дискутували в нашій статті "Навіщо дзвонити одразу після перегляду ком. пропозиції?"
Шанс на живий зворотний зв'язок у діловому листуванні є!Чітке розуміння поведінки, сумнівів, думок клієнта, наприклад: наскільки уважно клієнт переглянув вашу пропозицію, чи побачив він реальні вигоди вашого продукту або лише подивився слайд з ціною, дасть статистка перегляду.
Такий приклад: за першого контакту з'ясували, що головне для клієнта "ціна-якість". Він відразу ж повідомив, що порівнюватиме з конкурентами, цікавився знижками тощо. Потім, у статистиці перегляду бачимо, що 20% від загального часу перегляду клієнт провів на слайді з ціною і пропустив розділ "Чому варто вибрати нас". Значить, у наступному листі чи дзвінку наголошуємо на перевагах, захищаємо свою ціну цінностями або навіть даємо знижку.
Таким чином, виходить, що ви проходите через всі етапи продажу пліч-о-пліч з клієнтом. Відчуваєте його настрої, вловлюєте наміри на кожному етапі - навіть у діловому листуванні!
Знайте свого клієнта – підведіть його "за руку" до потрібного рішення!Мій, більш ніж 10 річний, досвід продажів, набиті шишки і страх невиконання плану в цьому місяці дозволили зробити наступний висновок: процес комунікації в продажах - це здатність донести всі ваші вигоди клієнту так, щоб у його картині світу склалося чітке розуміння необхідності роботи саме з Вами.
Розуміння того, як уважно клієнт дивиться на Вашу комерційну пропозицію, на яких слайдах фокусує увагу, скільки часу витрачає на перегляд, – це саме той зворотний зв'язок, який відсутній у діловому листуванні і який так може допомогти у продажу, про що ми говорили раніше. Знаючи це, ви вже свідомо будуєте тактику свого діалогу з клієнтом так, щоб ще раз розкрити всю цінність вашої пропозиції та дати їй легко погодитися на роботу з Вами та Вашою компанією.
Ось і все, що я хотів сказати.Минув час, коли ділове листування було лише придатком реальної розмови з клієнтом про співпрацю. Тепер Ви можете знати, коли клієнт подивився Вашу пропозицію і як уважно він її вивчив! Далі річ за Вами. Продавайте більше, продавайте краще та робіть своїх клієнтів щасливими!
Однією з найбільш часто зустрічаються практично завдань є реалізація форми зворотний зв'язок. Тобто написання її 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" >
використані лише для подальшого візуального оформлення форми.
Для того щоб наша форма зворотного зв'язку виглядала презентабельно її потрібно оформити. Для отримання наступного результату:
Ми використовували цей код:
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; pad font- size: 16px; width: 436px; ) textarea ( height: 98px; margin- bottom: 32px; ) input[ type= "submit" ] ( width: 200px; float: right; border: none; background: #595 color: #fff;text-transform: uppercase; )
Докладно розписувати CSS я не бачу сенсу, зверну Вашу увагу лише на ключові моменти:
Для бажаючих заощаджувати свій час на оформленні сайтів можу порадити користуватися 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" ) ;
Саме цей рядок і займається формуванням та надсиланням повідомлення до нас. Заповнюється вона так:
ВАЖЛИВО!
Кодування вказане у «голові» документа (< 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. ) ;if (! n) ( alert("Ім'я введено неправильно, будь ласка виправте помилку" ) ; return false ; ) var phone = form. 0 - 9 - ] * [ 0 - 9 - ] + $/ ) , if (! p) ( alert("Телефон введено неправильно" ) ; return false ; ) 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)" >
Тепер за пунктами забираємо склад перевірки:
Як можете помітити така міні-перевірка пишеться для кожного нашого поля. Перевірку на одне поле я виділив на скріншоті червоним квадратом, в інших полів вона має аналогічну структуру і якщо виникне потреба додати поле або прибрати його, Ви тепер легко зможете це зробити.