Отправка формы на почту. Верстка валидация и отправка формы без перезагрузки. AJAX. PHPMailer.
HTML-код
- Опубликовано: 29 июн 2024
- Отправка формы на почту очень частая задача при разработке любого сайта. Особенно популярна форма на лендинг. Конечно же при этом форму нужно красиво сверстать, а также особым образом валидировать поля формы. Поэтому в этом выпуске я решил показать как сделать все это сразу используя HTML CSS JavaScript и плагин PHP PHPMailer. Ты научишься верстать и стилизовать различные элементы форм такие как checkbox radio select button file и другие. Добавим крутую фишку превью для загружаемой фотографии. Сделаем валидацию полей в том числе e-mail. И, с помощью JavaScript технологии AJAX (fetch), без перезагрузки страницы отправим форму на почту, настроив при этом плагин PHPMailer.
⚡Партнер выпуска хостинг FOZZY: to.fozzy.com/FreelancerLife
👉 Скачать результат урока на Patreon: / 42671910
👉 Плагин PHPMailer: github.com/PHPMailer/PHPMailer
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / 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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤟Полезно?
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Евгений, посмотри, пожалуйста, я сделал pull request для "Динамического адаптива"
Здраствуй Женя. Прости что с такой просьбой, но.... А как бы попросить пожалуйста у тебя файлик с select.js?? Я понимаю, что выше, на патрионе, но есть обстоятельства почему я прошу. Можно как ни будь это устроить в телеграме @rodionni/
Если что, за ранее Огромное Спасибо!!!!
У меня в планах патрион и все к нему действия, но чутка по техническим причинам позже........
Привет 🙃 *фрилансер по жизни* а каа сделать чтобы формы были отправлены на страницу или сайт
Это просто пушечно, невероятно, спасибо за такие подробные и качественные, а главное полезные для практических целей уроки.
Пожалуйста!
хочу поблагодарить тебя за твои уроки, они как глоток воды в пустыне, мало кто может объяснить и показать так как это делаешь ты, еще раз огромное тебе спасибо и мы будем ждать от тебя новых видео )
Пожалуйста!
Спасибо, Женя. Ты единственный на ютубе, кто все понятно и просто обьясняет по фронтенду. Когда отчаиваешься и бросаешь верстку изза непонимания, твои видео всегда выручают меня и вдобавок дают сильную мотивацию
Я тоже давно ждал это выпуск и наконец выпускал, очень рад от вас, супер и полезно 👍
Я рад что полезно!
Благодарность! Как же вы интересно с эмоциями рассказываете, приятно слушать и учиться !
Я рад!
@@FreelancerLifeStyle с Ваших уроков, Я начинал осваивать и продолжаю изучать сферу программирования. Делаю заказ, осталась обратная связь и страница с комментариями (дискус) и прочие не хочу ставить. Так как нужно выполнять работу качественно!
Наконец то я дождался ! Спасибо огромное ! Форма и всё что с ней связано - это можно сказать Важнейший элемент для современного сайта.
Пожалуйста!
Шикарное видео. Это настоящий клад знаний и опыта. Благодарю, Евгений
Женя, спасибо за отличное видео. Самое лучшее в твоих видео то, что после них желание продолжать только усиливается.
С бутофорными кнопками - гениально! Жека, мне определенно нравится твой тип мышления и способы решения задач в верстке (кстати именно по этой причине и подписался на твой канал, когда первый раз на него наткнулся).
Женя, какое же огромное тебе спасибо за все твои уроки! Начну зарабатывать, обязательно поддержу твой канал!
Самое огроменное Вам спасибо, дядя Женя!
Пожалуйста!
Супер!! Так мало хорошего контента на эту тему, и вот наконец-то! Спасибо!
Пожалуйста!
Дружище, как же ты вовремя!
Cпасибо Вам огромное за ваш очень детальный и познавательный контент очень много нового узнал благодаря вашему каналу. По больше бы таких как вы людей. Всего хорошего вам и вашим близким, а каналу процветания!!!
Супер! Давно ждал чего то в этом роде!
Я рад!
Спасибо за видео!) Сделала по уроку форму, но столкнулась с такими проблемами:
1. В Js коде в функции валидации в конце нужно написать return error. Без этого браузер выдавал ошибку на незаполненное поле.
2. На видео путь require в файле php - phpmailer/src/PHPMailer.php, а скачанная папка имеет имя PHPMailer-6.2.0. Из-за этого тоже была ошибка.
Может, кому-то будет полезно.
В остальном урок огонь, все понятно и доступно, спасибо)
Привет, а по второму пункту какую ошибку выдавало, не помнишь?
Настя здраствуй. А как бы попросить пожалуйста у тебя файлик с select.js?? Я понимаю, что выше, на патрионе, но есть обстоятельства почему я прошу. Можно как ни будь это устроить в телеграме @rodionni/
Если что, за ранее Огромное Спасибо!!!!
Женя, у вас столько позитива, сижу продолжаю улыбаться))))))Спасибо за уроки!
Ну наконец-то 😌 Давно ждал такой видос 🔥
Супер!
Только собирался делать форму обратной связи и тут выходит видео. Спасибо!!!
Пожалуйста!
Огромное спасибо! Урок потрясающий!
Братан, не могу сдержать радость. Я сейчас пишу сайт для школьной работы и ни как не мог реализовать форму и ещё некоторые вещи, но ты прям спас меня. Огромное спасибо!!
Жека, спасибо большое за такой чудесный урок! Ты лучший на ютубе блогер, мне очень повезло что я попал на твой канал! Успехов тебе в дальнейшем развитии. Буду поддерживать всегда комментариями и лайками ! =)
Видео просто бомба, всё максимально подробно и понятно! Ты лучший!
Я обожаю ваши уроки, очень вдохновляет!
Я рад!
Спасибо, Жека! Очень интересно, даже что-то поняла :). Но не думала, что для отправки такой на вид маленькой формы нужно столько разного кода. А форма очень симпатичная получилась!
Спасибо большое!
ох, за одно это видео получила больше позитива, чем за всю жизнь))
Ух, соскучился по таким выпускам! ОГОНЬ!!!!)))
Спасибо!
Да, обожаю такие выпуски 👌
Вот это я искал пару месяцев назад) Спасибо! Штука реально нужная. И валидация и почта и стилизация не стилизуемого)👏👏👏
Я рад что полезно!
Лучший урок по формам, спасибо!
Урок огонь! Спасибо большое!
Спасибо тебе, человечище. Благодаря тебе, я себе сайт доделываю потихоньку)))
ЭТО ЯДЕРНАЯ БОМБА!!!!)))) Как же я давно ждал этот выпуск от тебя!))))) Спасибо)))))))))))))))))
Пожалуйста!
Очень полезное видео!!! Женя, спасибо большое!!!
Выпуск топ , спасибо 👍👍👍
Зарядился позитивом на весь день!! Спасибо!!! ты крут!!!
Спасибо!
Жееееень, прошу тебя сделай такой же ролик, только с регистрацией и не много работы с БД:) Ты лучший!)
Согласен, как раз такого точно чего-то не хватает!
Фрилансер по жизни - IT и фриланс - а ти прям знаєш, який відос запилити) . Якраз верстаю статику, і треба таку форму. Прям в точку.
Это то, что мне именно сейчас нужно было! Спасибо большое, помог!!!
Спасибо за классный урок ! Очень информативно.
Пожалуйста!
Изучал HTML CSS JS сам в интернете, делал свои сайты и было столько забот, кода больше и много лишнего. Но когда сейчас посмотрел буквально 1 твой ролик, то все проблемы как будто рукой сняло, я открыл столько нового для упрощения своего кода и эффективного верстания страницы, спасибо большое!
Только сегодня утром мне сказали, чтоб шёл разбираться, как отправлять форму на почту. И тут приходит уведомление с твоим видео)
Женя ты лучший, уже неделю вожусь со своим сайтом, никак не мог сделать форму. А ты прям как знал))
Я рад что помог!
@@vana__f7570 рабочий вариант function emailTest(email) {
const re = /^(([^()\[\]\\.,;:\s@"]+(\.[^()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
Это мега урок, БЛАГОДАРЮ!!!
Это было прекрасно!!!! Благодарю!
Пожалуйста!
Супер-позитивный Человечище! Я так за сборную на Олимпиаде не волновался, как за супер-письмо )))))
Просто супер! Большое спасибо!
все что ты делаешь реально очень круто! спасибо тебе огромное!!!
Добра тебе, брат, ты лучший)
Спасибо!
Евгений! Спасибо за урок!
Пожалуйста!
Крайне полезный урок!
Я рад!
Всё понять и по делу. Спасибо!
Жека-Жека! Как же люблю твои уроки!)))
... довольно заморочено, но ОЧЕНЬ круто! BRAVO!!!
Wow! Очень полезное видео, лайк однозначно
Спасибо!
Наконец то без костылей научился)))) Жека ты лучший!!!!! Спасибо!!!
Кайфую от того, как ты кайфуешь от своего дела 😃
Спасибо за урок по отправке без применения жуквери))
Ох, Женя! Магистр! Спасибо за очередную порцию знаний! )
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
уже -нет )
Отлично, класс!
Спасибо!))
И снова топовый контент!
Спасибо!
Євген, дуже тобі дякую за корисний урок. Учора пів дня сидів розбирався з цим кодом. І все дуже добре вийшло. Трохи переробив під себе, протестував і все гарно працює. :)
Как вы решили проблему помогите пжж
супер знания и супер позитив
Зачётное видео, респект
Стоит еще немного модернизировать эту форму, где проверка на пустые строки. Чтобы не приходило сообщение, где поле какое-то пустое. А то получается, что можно понаставить пробелов в имя, и валидация проходит успешно.
if (input.value.trim() === '') {
//something here
}
И получаем пакую вот штуку, красавчик просто, от души!)
За загрузку 2 лайка ставлю, гениально))
Лайк авансом. Позже гляну)
Я проверю )))
@@FreelancerLifeStyle домовились, земляче ;)
Жека! Как всегда, видос в нужное время , отдельный респект за эмоции в конце, когда ждал письмо на почту, аж проникся вместе с тобой. Но и минус есть небольшой , поскольку я, пока, не имею возможности отщипнуть от семейного бюджета даже тот мизер , чтобы оплатить доступ на патреон придется скачать этот видос, чтобы покадрово можно было бы переписать скрипт изменения стилей select . Ты супер Мега +10000009000000
Спасибо большое, однозначно лайк =)
спасибо за видосик ТЫ СУПЕР!!!
Пожалуйста!
Просто МЕГА!!
Спасибо!
Добрый дядя Женя узнал что я вчера гуглил целый день и решил помочь. Ну чудо какое-то!!) Спасибо за видео, очень интересно
Пожалуйста!
У тебя работает форма?
Не просто замечательно, а хорошо-замечательно!
Спасибо!
Это уже не просто техническая работа...Это реальное искусство, Евгений, вы мастерски так рисовали весь сайт и писали код, что просто глаза оторвать на протяжение 50 минут было невозможно...Респект!
Огромное спасибо за видео! Только хотел научиться делать форму
Пожалуйста!
Спасибо, очень помогло!👏
Спасибо! Очень полезный видос по всем фронтам!
Пожалуйста!
Прям вовремя! )))
Просто обалденный видос. Я в восторге. Тока добавил одну отсебятину. А именно, когда я добавил тень к инпутам в фокусе, чтобы обозначить эффект присутствия, то в транзишине указал не all, а именно box-shadow. Дело в том, что если в transition указываешь all, то тень начинает плавно и красиво появляться, а изменение размера текстового поля для сообщения путем перетаскивания, неприятно тормозить.
Большое спасибо за видео!
Супер 100500 раз лучший Жека прогер!!!
Спасибо))
Дуже круто, як завжди на висоті. Дякую! за такі якісні уроки. Ще б розказав про іконочні шрифти, якщо буде час
Розкажу
ЛУЧШИЙ!!!))))
Спасибо!
Привет Женя, спасибо за очередной полезный урок. Ты мог бы снять отдельное видео про упомянутый здесь кастомный выпадающий список ? Он давольно часто встречается на сайтах и это будет хорошая практика по JS для всех!
Класс 👍👍👍
Спасибочки))
Жека, як би ми без тебе жили?) Дякую!
Впав зі стула від жарту про завантаження 😆
Очень крутой урок. Фишка с FileReader для показа изображения зашла. Хорошо показана работа с формой. Стилизация чекбоксов и радио тоже стандартный подход. Посмотрел даже на React решениях никто обычно не собирает данные формы в ручную. Работают с FormData. Так что, показанные здесь техники это база.
👍 Вподобайка та комент 🔥🔥🔥
Оооо великий Евгений да прибудет с тобой сила . Это то что нужно . Может еще про Api токены и тд. Выпустишь видео
красиво разложил!
Спасибо!
Работает!
Я счастлив.
ууррра спасибо )
Пожалуйста!
ой какая круть 🔥
Спасибо!
Жека ты лучший!
Спасибо Жека!
Разбери пожалуйста этот JS скрипт в отдельном уроке) Спасибо за видео, вот бы ты сделал полный курс по JS уроков на 200, эх
Мой мозг расплавился от Javascript и php, надеюсь буду понимать в будущем.
Эта радость))
Ага)