Загрузка страницы

Отправка формы на почту. Верстка валидация и отправка формы без перезагрузки. AJAX. PHPMailer.

Отправка формы на почту очень частая задача при разработке любого сайта. Особенно популярна форма на лендинг. Конечно же при этом форму нужно красиво сверстать, а также особым образом валидировать поля формы. Поэтому в этом выпуске я решил показать как сделать все это сразу используя HTML CSS JavaScript и плагин PHP PHPMailer. Ты научишься верстать и стилизовать различные элементы форм такие как checkbox radio select button file и другие. Добавим крутую фишку превью для загружаемой фотографии. Сделаем валидацию полей в том числе e-mail. И, с помощью JavaScript технологии AJAX (fetch), без перезагрузки страницы отправим форму на почту, настроив при этом плагин PHPMailer.

⚡Партнер выпуска хостинг FOZZY: http://to.fozzy.com/FreelancerLife
👉 Скачать результат урока на Patreon: https://www.patreon.com/posts/42671910
👉 Плагин PHPMailer: https://github.com/PHPMailer/PHPMailer

🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle

Содержание:
00:00 - В выпуске
00:34 - РЕКЛАМА
01:53 - Пишем HTML код
11:22 - Стилизация формы на CSS
12:02 - Стилизация INPUT и TEXTAREA на CSS
13:15 - Стилизация RADIO кнопок на CSS
18:21 - Стилизация SELECT
20:51 - Стилизация INPUT FILE на CSS
23:48 - Стилизация CHECKBOX на CSS
26:53 - Стилизация BUTTON на CSS
28:44 - Стилизация состояния при фокусе
30:07 - Пишем JavaScript
31:30 - Пишем валидацию формы на JS
38:32 - Пишем добавление файла на JS
41:31 - Пишем отправку формы на JS (fetch)
46:02 - Работа с PHPMailer. Отправка письма
50:13 - Загрузка на сервер
50:27 - Проверка работы
51:15 - Заключение

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

🤟 Живи, а работай в свободное время! ©

Видео Отправка формы на почту. Верстка валидация и отправка формы без перезагрузки. AJAX. PHPMailer. канала Фрилансер по жизни - IT и фриланс
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
13 октября 2020 г. 10:52:03
00:51:40
Другие видео канала
Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Препроцессор SASS/SCSS за 38 минут. Что такое SASS, SCSS. Установка уроки обучение.Препроцессор SASS/SCSS за 38 минут. Что такое SASS, SCSS. Установка уроки обучение.Flutter. Разработка мобильных приложений. Советы начинающим. Будущее IT + КонкурсFlutter. Разработка мобильных приложений. Советы начинающим. Будущее IT + КонкурсДепрессия. В IT после 30ти и поиск удаленной работы. История Васи.Депрессия. В IT после 30ти и поиск удаленной работы. История Васи.VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучениеVS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучениеJS-плагины №4. Валидация и отправка формы + отправка файлаJS-плагины №4. Валидация и отправка формы + отправка файлаКак отправлять заявку с сайта на почту? SMTP скрипт отправки писемКак отправлять заявку с сайта на почту? SMTP скрипт отправки писемОсновы синтаксиса JAVASCRIPT. Структура кода. Инструкции. Режим use strict. Уроки JAVASCRIPT с нуля.Основы синтаксиса JAVASCRIPT. Структура кода. Инструкции. Режим use strict. Уроки JAVASCRIPT с нуля.Чтение макета дизайна. Определение элементов на странице на реальных примерахЧтение макета дизайна. Определение элементов на странице на реальных примерахВсе про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.МЕТА теги для сайта за 13 минут. HTML мета теги для SEO, адаптива, социальных сетей и для iPhone.МЕТА теги для сайта за 13 минут. HTML мета теги для SEO, адаптива, социальных сетей и для iPhone.Правильное адаптивное меню бургер на HTML CSS и jQuery. Мобильное меню туториал // Как это сделать?Правильное адаптивное меню бургер на HTML CSS и jQuery. Мобильное меню туториал // Как это сделать?AJAX - учимся посылать GET, POST запросыAJAX - учимся посылать GET, POST запросыУниверсальный PHP скрипт обратной связи для простых сайтов и Landing Pages (uniMail)Универсальный PHP скрипт обратной связи для простых сайтов и Landing Pages (uniMail)Библиотека PHPMailer. Отправка почты через SMTPБиблиотека PHPMailer. Отправка почты через SMTPGulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтовGulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтовHTML уроки. HTML теги. Тег DIV и другие. Уроки HTML CSS JS. Урок №2HTML уроки. HTML теги. Тег DIV и другие. Уроки HTML CSS JS. Урок №2Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5Смотрю ваши работы по верстке. Советы, позитивная критикаСмотрю ваши работы по верстке. Советы, позитивная критика
Яндекс.Метрика