Привіт, друзі! У цьому уроці ми поговоримо про створення форми зворотнього зв'язку, або як ще кажуть у народі "контактної форми".

Сьогодні ми розберемо з вами як можна створити за кілька хвилин легку, гарнуі функціональнуформу зворотного зв'язку за допомогою мого улюбленого плагіна Contact Form 7 .

Я намагатимусь максимально докладно пояснити всі етапи встановлення контактної форми, і у зв'язку з цим урок вийде досить довгим 🙂

Створення контактної форми у WordPress

На самому початку хочу помітити, що плагін Contact Form 7 русифікований, і жодних проблем із ним у вас не буде. Як доказ моїх слів може виступати той факт, що цей плагін завантажили БІЛЬШ 25 МІЛЬЙОНІВ РАЗІВ!!!

І так, давайте приступимо. Для створення форми зворотнього зв'язку потрібно зробити наступне:

1. Встановіть та активуйте плагін Contact Form 7 . Як встановлювати плагіни ви можете.

2. Після активації перейдіть до Contact Form 7 -> Форми.

3. У вікні, що відкрилося копіюємо рядокіз кодом вставки.

4. Скопійований код вставляємо ту сторінку, яку ми хочемо додати форму зворотний зв'язок. Після того як вставили код, не забудьте збережіть зміни, натиснувши кнопку «Оновити».

Ось такий результатдодавання контактної форми за отримаємо:

Готово!Ви встановили робочу формузворотний зв'язок на свій сайт!

Як бачите, всього за декілька хвилинможна легко встановити на сайт форму зворотного зв'язку. На цьому можна і поставити крапку, але тим, кого не влаштовує стандартна форма та хто хоче створитиповністю нову контактну формуз іншими полями та можливостями рекомендуючитати урок до кінця.

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

Для цього нам потрібно, щоб у формі були такі поля для заповнення:

• Ім'я (Обов'язкове поле для заповнення)
• Прізвище
• Телефон (Обов'язкове поле для заповнення)
• Поле з вибором зручного часу для дзвінка

Після того, як ми визначилися з полями, переходимо до створення форми:

1. Переходимо у Contact Form 7 -> Додати новий.

2. У вікні натискаємо кнопку «Додати нову». Якщо потрібно, виберіть мову в списку нижче. за замовчуванням мова буде російською.

3. Після натискання кнопки ви перейдете на сторінку, де знаходиться редактор форми.

На самому верху сторінку поле, в яке пишемо назва нової форми. В Шаблоні формибачимо стандартні поля форми, які створюються за замовчуванням.

Нижче ми бачимо налаштування листа, яке надходить на вашу пошту після того, як хтось відправив замовлення з форми на сайті. У цих налаштуваннях, наприклад, можна змінити або додати e-mail, на який будуть надходити запити з форми на вашому сайті. В шаблон листиналаштовується інформація, яка відображатиметься всередині листа.

4. Після того, як ми поверхово ознайомилися із структурою редактора, переходимо до створення нашої нової форми. Для цього нам потрібно ВИЛУЧИТИз шаблону форми всі рядки крім кнопки "Відправити",а в шаблоні листа вилучитивсе повністю . Після видалення у вас має вийти так:

5. Тепер нам потрібно створити нові поля: Ім'я(обов'язкове), Прізвище, Телефон(обов'язкове), Зручний час дзвінка.

Починаємо із створення поля для введення імені, яке має бути обов'язковим для заповнення. Для цього натискаємо кнопку "Сгенерувати тег"і вибираємо Текстове поле.

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

6. Після того, як ми додали поле для введення імені, натискаємо "Сгенерувати тег" -> Текстове полета за аналогією створюємо поле Прізвищеі Телефон, копіюючи і вставляючи код шаблон форми і шаблон листа. Відмінність лише у тому, що для поля Прізвищеставити галочку для обов'язкового заповнення не потрібно .

Після додавання полів Ім'я, Прізвище та Телефон редактор форми виглядатиме так:

7. Тепер створюємо поле Зручний час дзвінка.Для цього натискаємо "Сгенерувати тег"і вибираємо "Випадаюче меню".

У полі Вибірпишемо в рядок за одним варіантом, у нашому випадку цей час з 8-00 до 18-00 з проміжками у дві години. Після заповнення копіюємо відповідні рядки коду шаблон форми і шаблон листи.

У результаті у вас має вийти ось так:

9. Скопіюйте код форми та вставте його на сторінку, на якій вам потрібна форма. Якщо ви все зробили правильно, у вас має вийде така форма замовлення зворотного дзвінка:

Після того, як користувач зробить замовлення зворотного дзвінка з вашого сайту, на вашу пошту прийде листз таким наповненням:

ГОТОВО!Ось ми створили з вами форму замовлення зворотного дзвінка з нуля.

Згоден, що для деяких все може здатися дуже складним та страшним, але таке відчуття буде лише до першого створення контактної форми з нуля 😉

У більшості випадків цілком достатньо і стандартної форми зворотного зв'язку, що створюється плагіном за замовчуванням відразу після його встановлення та активації.

Сподіваюся, цей урок був вам корисний, і ви розібралися з плагіном Contact Form 7.

Якщо у вас виникатимуть по ходу створення форми запитання або щось не виходитимуть — пишіть та ставте питання у коментарях.

І пам'ятайте, що форма зворотного зв'язку на сайті – обов'язковий атрибут на сторінці контактів.

Привіт, друзі! У цьому уроці ми поговоримо про створення форми зворотного зв'язку, або як ще кажуть у народі "контактної форми". Сьогодні ми розберемо з вами як можна створити за кілька хвилин легку, красиву та функціональну форму зворотного зв'язку за допомогою мого улюбленого плагіна Contact Form 7. Я намагаюся максимально докладно пояснити всі етапи встановлення контактної форми, і у зв'язку з цим урок вийде досить довгим:) Створення контактної форми WordPress На самому початку хочу помітити, що плагін Contact Form 7 русифікований, і жодних проблем з ним у вас не буде. Як доказ моїх слів може бути той факт, що цей плагін…

Огляд

Проголосуйте за урок

100

Оцінка

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

На цьому уроці ми познайомимося із функцією mail (), на прикладі створення форми зворотного зв'язку на PHPз подальшим надсиланням отриманих даних на пошту.

Для цього створимо два файли - forma.phpі mail.php. У першому файлі буде лише форма з полями для введення користувачем даних. Всередині тега form- кнопка "Відправити"та атрибут action, який посилається на обробник - mail.php, саме до нього звертаються дані з форми при натисканні кнопки "Відправити". У нашому прикладі дані форми надсилаються на веб-сторінку під назвою "/mail.php". На цій сторінці прописаний скрипт на PHP, який обробляє дані форми:

Дані форми надсилаються методом POST(обробляється як $__POST). $__POST- це масив змінних, переданих поточному скрипту через метод POST.

Нижче ви бачите вміст файлу forma.php, поля якої заповнює сам користувач на якомусь веб-сайті. Усі поля для введення даних обов'язково повинні мати атрибут name, Значення ми прописуємо самі, виходячи з логіки.

Форма зворотнього зв'язку на PHP

Залиште повідомлення:

Ваше ім'я:



E-mail:

Номер телефону:

Повідомлення:

Текстова область може містити необмежену кількість символів ->

Так форма візуально виглядає у браузері.

Далі пишемо код для файлу mail.php. Вигадуємо самі імена для змінних. В PHPзмінна починається зі знака $ а потім ім'я змінної. Текстове значення змінної полягає у лапки. За допомогою змінних на емайл адміністратора передається вміст форми, просто підставивши у квадратні дужки ім'я елемента форми - значення name.

$to = " [email protected]// Емайл одержувача даних з форми
$tema = "Форма зворотнього зв'язку на PHP"; // Тема отриманого емайлу
$message = "Ваше ім'я: ".$_POST["name"]."
";//присвоїти змінній значення, отримане з форми name=name
$message .= "E-mail: ".$_POST["email"]."
// отримане з форми name=email
$message .= "Номер телефону: ".$_POST["phone"]."
"; //отримане з форми name=phone
$message .= "Повідомлення: ".$_POST["message"]."
// отримане з форми name=message
$headers = "MIME-Version: 1.0" . "\r\n"; // заголовок відповідає формату плюс символ перекладу рядка
$headers .= "Content-type: text/html; charset=utf-8" . "\r\n"; // вказує на тип посиланого контенту
mail($to, $tema, $message, $headers); // Відправляє одержувачу на емайл значення змінних
?>

Таким чином дані з масиву $_POSTбудуть передані відповідним змінним та надіслані на пошту за допомогою функції mail. Давайте заповнимо нашу форму і натисніть кнопку надіслати. Не забудьте вказати ваш е-майл. Лист надійшов миттєво.

Всім привіт! У цій статті ви дізнаєтеся, як створити спливаючу форму зворотного зв'язку для html та wordpress сайтах. Насамперед такі форми будуть потрібні інтернет-магазинам, лендингам, та й простим сайтам-візиткам, так як це реально зручно для користувача.

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

Створюємо форму зворотного зв'язку на html

Отже, припустимо, у вас вже є сайт, і ви хочете створити форму, при заповненні якої користувач зможе отримати від вас зворотний зв'язок. Для цього насамперед створюється сам каркас.

Вставляємо у потрібне місце на сайті наступний код:

Онлайн заявка

За бажанням ви можете додати додаткові поля для введення інформації, або прибрати наявні. Настійно не рекомендую вам використовувати в подібних формах капчу, або інші захисту від ботів, що ускладнить користувачеві заповнення форми.

Код вставлено, що ми бачимо?

Форма з'явилася, але треба надати їй вигляду. Для цього додаємо наступні стилі:

/* Форма зворотнього зв'язку */ #inline ( margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; ) .txt ( display:inline-block; color:#676767 width:190px;margin-bottom:10px;border:1px solid #ccc;padding:5px 9px;font-size:15px!important;line-height:1.4em; #676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; .txtarea:focus ( border-style:solid; border-color:#bababa; color:#444; ) input.error, textarea.error ( border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a35959; ) input.error:focus, textarea.error:focus ( border-color:#973d3d; color:#a35959; ) #send ( color:#FFFFFF; display:block; cursor:pointer; padding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; 97; ) /* Форма зворотного зв'язку */

Так уже набагато краще. У будь-якому випадку, форму вам треба буде підлаштовувати під загальний дизайн сайту, тому у вас вона зрештою відрізнятиметься від моєї.

Виглядає це так:

Що виходить? Відвідувач кликає на поле, і скрипт підставляє вже готову маску, з кодом країни. Досить зручно.

Для цього необхідно підключити скрипт маски. Завантажити його ви зможете наприкінці статті разом із вихідними джерелами.

Підключаємо скрипт перед тегом, що закривається. Не забудьте змінити шлях до файлу на свій. Добре, форма зворотного зв'язку створена, стилі налаштовані, тепер потрібно поповісти на неї обробник, щоб сповіщення приходили вам на пошту.

Для цього перед тегом, що закривається, вставте наступний скрипт:

Як цей скрипт працює?

1. Здійснює перевірку введеного e-mail.
2. Вказує поля, з якими працюватиме.
3. Перевіряє ці поля заповнення. Якщо обов'язкові поля не вказані – видає повідомлення про те, що їх потрібно заповнити.
4. Обробляє введену інформацію та ініціює надсилання повідомлення на пошту.
5. Видає повідомлення користувачу, що його заявка прийнята за допомогою Ajax.

Залишилося зробити останнє - створити файл sendmessage.php вставити в нього нижченаведений php кодта завантажити його в корінь вашого сайту.

Нове повідомлення\r\n"; $msg .= "

Ім'я:".$username."

\r\n"; $msg .= "

Номер телефону:".$userphone."

\r\n"; $msg .= "

Пошта:".$usermail."

\r\n"; $msg .= "

Повідомлення:".$content."

\r\n"; $msg .= " "; // надсилання повідомлення if(@mail($sendto, $subject, $msg, $headers)) ( echo "true"; ) else ( echo "false"; ) ?>

Ось і все, проста форма зворотного зв'язку для html сайту готова. Не забудьте тільки змінити e-mail у файлі sendmessage.php на свій.

Додаємо спливаючу форму зворотного зв'язку на сайт

Трапляється, коли потрібна саме спливаюча форма, що відкривається при натисканні на кнопку. Зробити її дуже просто. Як приклад візьмемо форму, створену нами раніше і буде працювати з нею.

Для початку нам потрібно підключити jqury fancybox, завантажити який ви зможете наприкінці статті.

Додайте ці рядки перед тегом body, що закривається, тільки поміняйте шлях до файлів на свій.

І надаємо їй стилів.

Modalbox ( color:#FFFFFF; display:block; cursor:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text -decoration:none;text-align:center; margin:0 auto 20px; ) .modalbox:hover ( background:#979797; )

Зверніть увагу, що кнопці, при натисканні на яку викликатиме спливаюче вікно, обов'язково має бути присвоєний клас modalbox і шлях href=”#inline”. Без цього спливаюча форма не відкриватиметься на сайті.

Після чого ховаємо створену нами раніше форму, щоб вона відкривалася у спливаючому вікні. Для цього потрібно замінити стилі #inline зі старими на нові.

#inline ( display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; )

У результаті у нас виходить така кнопочка.

При натисканні на яку відкривається спливаюче вікно зі зворотним зв'язком.

Знову ж таки, стилі, розташування полів та елементів можна змінювати так, як вам буде потрібно. Наприклад, для зворотного дзвінка із сайту достатньо буде залишити лише 2 поля – ім'я та телефон, а решту поля прибрати.

Не забувайте, що для того, щоб форма працювала, наприкінці сайту потрібно буде додати обробник, який опублікований вище, та завантажити в корінь сайту файл sendmessage.php.

Форма зворотнього зв'язку для Wordpress

У випадку, якщо ваш сайт працює на движку Wordpress, ви можете використовувати спеціальні плагіни для додавання контактної форми. Один з кращих плагінів Contact Form 7. Завантажити його можна з офіційного сайту або через адмінку в розділі Плагіни.

Після активації плагіна у лівому меню з'явиться нова вкладка. Відкриваєте її та натискаєте Add New.

Вводьте назву нової форми, вибираєте поля, які мають бути у формі. Зазвичай цілком вистачає стандартних, які автоматично додані. Зберігайте форму.

Після збереження на екрані з'явиться шорткод, який потрібно буде вставити на сторінку, де буде відображатися Контактна форма, наприклад, на сторінці Контакти.

Копіюєте цей код, переходьте на потрібну сторінку, у візуальному редакторі вибираєте формат «Текст», вставляєте цей шорткод та зберігаєте сторінку.

Потім перевіряємо, чи відображається форма на сторінці та чи коректно працює. Для цього достатньо буде просто перейти на сторінку, де вставили код. У вас має з'явитися така форма:

Тепер відвідувачі вашого сайту зможуть зв'язатися з вами через створену контактну форму на движку Wordpress.

Робимо спливаючу форму зворотного зв'язку для Wordpress

Я сам не люблю додавати зайві плагіни на даний двигун, тому що вони вантажать сайт, уповільнюючи його роботу. Тому для випливає форми використовую зазвичай 2 варіанти.

1. Форму, що спливає, описану вище в статті, просто прикручуємо її не до html сайту, а до движка.
2. Форму, створену через плагін спливаючої форми Contact Form 7, внісши невеликі доробки.

Перший спосіб вже був описаний вище, тому одразу перейдемо до другого.

Для початку вставляємо наступний код відразу після відкриття тега body.

X

Давайте розберемося що є що:

• Посилання, що має id=”callme-open” при натисканні на яку наша форма буде відкриватися. Зверніть увагу, що це посилання потрібно вставити не після відкритого тега, а в те місце, де ви хочете, щоб ця кнопка була. Зазвичай її додають у правий кут шапки, поряд із телефоном вашої компанії.
• Блок bg-b буде створювати затемнене тло сайту, коли спливаюча форма буде відкрита.
• Блок callme міститиме саму форму зворотного зв'язку.
• X – це буде наш хрестик у кутку форму, при натисканні на яку форма закриватиметься.
• Ну і php код, в якому запускатиметься шорткод плагіна Contact Form 7.

Зверніть увагу на те, що у вас ID і назва форми можуть відрізнятися від моїх. Новий код доданий, тепер задаємо йому стилі.

Bg-b ( position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(51,51,51,0.55); z-index:1000; ) body ( position: relative; ) .callme ( position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; radius:4px; ) .callme small ( position:absolute; right:10px; top:10px; font-size:15px; cursor:pointer; )

Зберігаємо код та перевіряємо. Тепер форма повинна бути розташована посередині вашого екрану, а ззаду неї напівпрозоре затемнене тло. Все добре, але залишилося додати останнє - скрипт, який відкриватиме і ховатиме цю форму при натисканні на потрібні кнопки.

Цей скрипт необхідно вставити у файл footer, перед тегом body, що закривається.

Залишилися останні штрихи і випливає форма на wordpress буде готова. Додайте класам.callme та.bg-b стиль display:none. Це необхідно для того, щоб форма не з'являлася на екрані під час запуску сайту.

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

UPDATE 06.06.2018

В останніх версіях WordPress jQuery скрипти не працюють із символом $тому це слід врахувати і замінити $ на jQuery

Досить часто буває така проблема, коли наскрізна форма на сайті, перестає відправляти на внутрішніх сторінках. Для того щоб цього не відбувалося, вказуйте в обробнику повний нехай до файлу sendmessage.php. Наприклад, ось так:

Url: "http://site.ru/sendmessage.php"

А завантажити вихідні джерела перших двох форм, ви зможете по

UPDATE 04.07.2018

На численні прохання, форму зворотний зв'язок модернізували. Тепер у ній враховано встановлення галочки на згоду про відправлення даних згідно із законодавством РФ № 152-ФЗ «Про персональні дані», доопрацьовано адаптивність під будь-які дозволи екранів, стиснуті js та css файли.

Подивитися приклад, а також і завантажити вихідні дані оновленої форми зворотного зв'язку і спливає тепер можна online, за посиланнями.

Форма зворотнього зв'язку для сайту, яку я вам покажу – ґрунтується на використанні технології Ajax. Але не хвилюйтеся, знати цього вам не треба, все вже готове, залишиться лише встановити цю форму та налаштувати під себе!

Хлопці – скрипт дуже давно застарів. У когось працює, у когось немає. А мені розбиратися і вже тим більше оновлювати - ліньки. Тому тестуйте на свій розсуд.

Форма зворотний зв'язок php з відправкою на пошту

Ця форма зворотного зв'язку на сайтдуже функціональна сама по собі, до неї підключено кілька плагінів, які створюють привабливий зовнішній виглядта перевіряють валідність (читай правильність) введених вами даних. Ці плагіни працюють на великому та могутньому! А називаються так:

1. JQTransform– плагін, який дозволяє зробити нашу форму зворотного зв'язку красивою!

2. formValidator- а цей плагін перевіряє форму контактів на правильність введеної інформації і в разі чого виводить підказки!

Для повноцінної роботи цієї форми буде використано клас – PHPMailer. Вважається одним із найкращих!

Нотатка для найрозумніших:

Форму зворотний зв'язок для сайту можна зробити на HTML! Але працювати вона почне тільки за допомоги PHP! І ніяк інакше!

Це я для тих, хто шукає форму зворотнього зв'язку лише на HTML. Зробити зробите, але вона не працюватиме!

Тому, ваш повинен підтримувати PHP, а для цієї форми контактів, PHP повинен бути не нижче п'ятої версії. Сподіваюся, зрозуміло викладаю? Тим більше, зараз будь-який нормальний хостинг підтримує ці умови!

Цю форму зворотний зв'язок я відкопав на сайті www.tutorialzine.com посилання веде безпосередньо сторінку оригіналу, тобто. сайт автора цієї форми!

Там все англійською, тому нам із Сашком довелося трохи повозитися, щоб русифікувати цю форму контактів і самі плагіни, які підключені до неї.

Зізнаюся чесно, ми з цією «формочкою» провозилися два дні, тому що починали спливати різні косяки, а недороблену до кінця форму зворотного зв'язку, тим більше таку гарну, не хотілося викладати! Так що якщо ви любитель все зробити самі, і у вашу найсвітлішу голову влізе думка - самому русифікувати цю форму, дам пару порад, тому що просто перекладом фраз не обмежишся:

1. Ця форма зворотного зв'язку заточена під буржуїв, від туди ж і завантажена, тому вона надсилатиме вам замість нормальних російських символів - кракозяблы. Розберіться з кодуванням. Та й загалом усі «тюлені» будуть пов'язані з цим!

2. Скрипт валідації спочатку не розуміє наші літери, тому їх там треба буде прописати!

3. Навіть після цих дій, якщо вказати тему листа російською, лист приходить з темою – No subject (сподіваюся правильно написав), це лікується якщо вказати кодування у файлі класу PHPMailer.

4. В оригінальній формі текст у полях введення притискався до низу, а не посередині. Це глюк плагіна JQTransform.

Ну, начебто все розписав і попередив. Поїхали далі!

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

На сьогоднішній день, , є в структурі лендінг пейдж. Адже це один із способів прийняти замовлення або відправити каталог вашої продукції, заздалегідь отримавши e-mail відвідувача.

Створення форми зворотного зв'язку – html розмітка

Зазвичай мені вистачає трьох полів, і в більшості випадків я використовую таку розмітку для створення контактної форми:

Отримати прайс

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

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


Створення форми зворотного зв'язку — css

Давайте поставимо стилі нашої форми і наведемо її до читального вигляду:

/* Стилі форми */ #application ( width: 475px; margin: 0 auto; ) /*Стилі полів для введення*/ #applicationName, #applicationEmail, #applicationTelephone ( width: 100%; height: 73px; background: none; margin -top: 25px;border:1px solid #fff;border-radius:40px;text-align:center;color:#fff;font-size:24px; , #applicationEmail:focus, #applicationTelephone:focus ( border: 1px solid #30ad64; ) /*Стилі тексту, що виводиться в placeholder*/ ::-webkit-input-placeholder ( color: #efefef; font-family: "PT Sans ", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::-moz-placeholder ( color: #fff; font-family: "PT Sans", sans-serif ; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 19+ */ :-moz-placeholder ( color: #fff; font-family: "PT Sans", sans- serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder ( color: #fff; font-family: "PT Sans" , sans-serif;text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::placeholder ( color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /*Стилі для кнопки*/ .applicationButton ( margin-top: 25px; background: #30ad64 border: none width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; cursor: pointer; ) .applicationButton:hover ( background: #d68c18; )

Якщо хочете, щоб колір кнопки змінювався плавно, додайте до.applicationButton і.applicationButton:hover такий рядок:

Передача: .6s;

Де.6s - час анімації в мілісекундах.
Тепер наша форма набула Гарний вид, зараз вона виглядає так:

Створення форми зворотного зв'язку - php

Тепер нам потрібно створити файл application.php. Він отримуватиме введені параметри з форми та надсилатиме їх до нас на пошту.

Структура у нього, як у звичайного html файлу, це може бути сторінка, на якій ви напишіть «Дякую, ваша заявка прийнята. Після обробки заявки наші менеджери зв'яжуться з вами»

Тобто коли користувач натисне кнопку, його перекине на сторінку application.php. Це повноцінна сторінка і ви повинні оформити її відповідним чином.

"; $msg .= "

Повідомлення із сайту

\r\n"; $msg .= "

Від кого:".$username."

\r\n"; $msg .= "

Пошта:".$usermail."

\r\n"; $msg .= "

Сайт:".$usertel."

\r\n"; $msg .= ""; // надсилання повідомлення if(@mail($sendto, $subject, $msg, $headers)) ( echo " ";) else (echo" "; } ?>

Давайте трохи поясню код:

$sendto = " [email protected]" // пошта, на яку приходитиме лист $username = $_POST["name"]; // зберігаємо в змінну дані отримані з поля з ім'ям $usertel = $_POST["telephone"]; // зберігаємо в змінну дані отримані з поля з телефонним номером $usermail = $_POST["email"];// зберігаємо в змінну дані отримані з поля з адресою електронної пошти

Тут, гадаю, — зрозуміло.

Тепер давайте сформуємо заголовок листа.

$subject = "Нове повідомлення"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n";

Рядок $subject = "Нове повідомлення";— відповідає за тему листа, може написати там: «Заявка із сайту» або те, що вам більше підходить.

Пропоную зробити так, щоб лист надходив, від адреси, вказаної в полі input type="email". Тобто, з якого користувач ввів при заповненні форми. Для цього пропишемо наступні рядки:

$headers = "From: " . strip_tags($usermail) . "\r\n";

Тобто ми підставимо дані зі змінної $usermail, де зберігається інформація з поля, що відповідає за введення email адреси.

Тепер поставимо зовнішній вигляд листа. Ви можете оформити його як завгодно, а я пропоную наступну структуру:

$msg = " "; $msg .= "

Повідомлення із сайту

\r\n"; $msg .= "

Від кого:".$username."

\r\n"; $msg .= "

Пошта:".$usermail."

\r\n"; $msg .= "

Телефон:".$usertel."

\r\n"; $msg .= "";

Першим рядком задаємо шрифт листа. Другий - виводимо повідомлення, наприклад: "Заявка з форми зворотного зв'язку на першому екрані". Третій, четвертий і п'ятий рядок передаємо дані з форми. Кожна з нового рядка.

Тепер потрібно надіслати лист функцією mail і визначити, що відбуватиметься при успішному та не успішному надсиланні листа:

If(@mail($sendto, $subject, $msg, $headers)) ( echo "

";) else (echo" "; } ?>

Я зробив так, що в будь-якому випадку виведеться картинка з відповідним текстом. Ви можете замість картинки вивести повноцінну сторінку. Просто пропишіть код замість картинки.

Через кілька секунд, після виведення зображення, я роблю редирект (автоматичне перенаправлення) на головну сторінку. Зробити це можна, вписавши наступний рядок між head тегами;

Тобто через 4 секунди користувача автоматично повернеться на головну сторінку!

Я не експерт у php – це back-end мова програмування, мене все життя тягнуло до вивчення front-end. Тому не судіть суворо. Так, тут можна зробити перевірки на заповнення контактних форм і так далі, але мені завжди вистачало і цього, так що якщо у когось є пропозиція як покращити цей код, напишіть будь ласка в коментарях або на пошту, поправлю урок, дякую!

До речі, якщо вам потрібна форма зворотного зв'язку без перезавантаження сторінки, то почитати про те, як її встановити можна в

Можливо, комусь не дуже зрозумілий матеріал, але якщо ви точно повторите мої дії, то у вас обов'язково буде працювати контактна форма. Виникнуть питання - пишіть у коментарях, постараюся відповісти! До зустрічі на блозі!

P.s. Так як я став дуже часто отримувати питання про те, чому не працює форма і не надходять листи на пошту, то вирішив описати кілька найбільш популярних причин, через які це може відбуватися.

• Тестуєте форму не на сервері.
• Тестуєте форму на безкоштовному хостингу.
• Тестуєте форму на платному хостингу, але у безкоштовному тестовому періоді.

У цих випадках листи не приходитимуть до вас на пошту.

Якщо вам ліньки розбиратися і самостійно робити форму, то рекомендую звернути увагу на .

23/07/2014 12/07/2018

dimadv7

Мобільні пристрої