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

[@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

[@ДенисКуликов-м3о]

Евгений, посмотри, пожалуйста, я сделал pull request для "Динамического адаптива"

[@sasharodirodionov9580]

Здраствуй Женя. Прости что с такой просьбой, но.... А как бы попросить пожалуйста у тебя файлик с select.js?? Я понимаю, что выше, на патрионе, но есть обстоятельства почему я прошу. Можно как ни будь это устроить в телеграме @rodionni/ Если что, за ранее Огромное Спасибо!!!! У меня в планах патрион и все к нему действия, но чутка по техническим причинам позже........

[@СапатКОМ-т4ш]

Привет 🙃 *фрилансер по жизни* а каа сделать чтобы формы были отправлены на страницу или сайт

[@cryptoendeavour]

Это просто пушечно, невероятно, спасибо за такие подробные и качественные, а главное полезные для практических целей уроки.

[@FreelancerLifeStyle]

Пожалуйста!

[@АнастасияБондаренко-т5р]

Спасибо за видео!) Сделала по уроку форму, но столкнулась с такими проблемами: 1. В Js коде в функции валидации в конце нужно написать return error. Без этого браузер выдавал ошибку на незаполненное поле. 2. На видео путь require в файле php - phpmailer/src/PHPMailer.php, а скачанная папка имеет имя PHPMailer-6.2.0. Из-за этого тоже была ошибка. Может, кому-то будет полезно. В остальном урок огонь, все понятно и доступно, спасибо)

[@ДианаБорисова-е5и]

Привет, а по второму пункту какую ошибку выдавало, не помнишь?

[@sasharodirodionov9580]

Настя здраствуй. А как бы попросить пожалуйста у тебя файлик с select.js?? Я понимаю, что выше, на патрионе, но есть обстоятельства почему я прошу. Можно как ни будь это устроить в телеграме @rodionni/ Если что, за ранее Огромное Спасибо!!!!

[@nikbraun5013]

Благодарность! Как же вы интересно с эмоциями рассказываете, приятно слушать и учиться !

[@FreelancerLifeStyle]

Я рад!

[@nikbraun5013]

@@FreelancerLifeStyle с Ваших уроков, Я начинал осваивать и продолжаю изучать сферу программирования. Делаю заказ, осталась обратная связь и страница с комментариями (дискус) и прочие не хочу ставить. Так как нужно выполнять работу качественно!

[@noname-ku3zg]

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

[@valrriderr]

Женя ты лучший, уже неделю вожусь со своим сайтом, никак не мог сделать форму. А ты прям как знал))

[@FreelancerLifeStyle]

Я рад что помог!

[@АлександрБородинов-к2р]

@@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()); }

[@АнварЕлегант]

хочу поблагодарить тебя за твои уроки, они как глоток воды в пустыне, мало кто может объяснить и показать так как это делаешь ты, еще раз огромное тебе спасибо и мы будем ждать от тебя новых видео )

[@FreelancerLifeStyle]

Пожалуйста!

[@RMGame]

Жееееень, прошу тебя сделай такой же ролик, только с регистрацией и не много работы с БД:) Ты лучший!)

[@СэрКонстантин-ю6ф]

Согласен, как раз такого точно чего-то не хватает!

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!

[@elenasmirnova3549]

уже -нет )

[@bobmaster2012]

Фрилансер по жизни - IT и фриланс - а ти прям знаєш, який відос запилити) . Якраз верстаю статику, і треба таку форму. Прям в точку.

[@johnspireng1960]

С бутофорными кнопками - гениально! Жека, мне определенно нравится твой тип мышления и способы решения задач в верстке (кстати именно по этой причине и подписался на твой канал, когда первый раз на него наткнулся).

[@apsolution4722]

Добрый дядя Женя узнал что я вчера гуглил целый день и решил помочь. Ну чудо какое-то!!) Спасибо за видео, очень интересно

[@FreelancerLifeStyle]

Пожалуйста!

[@xxxan_official]

У тебя работает форма?

[@jahongirbektemirov6516]

Я тоже давно ждал это выпуск и наконец выпускал, очень рад от вас, супер и полезно 👍

[@FreelancerLifeStyle]

Я рад что полезно!

[@dinir1000]

Наконец то я дождался ! Спасибо огромное ! Форма и всё что с ней связано - это можно сказать Важнейший элемент для современного сайта.

[@FreelancerLifeStyle]

Пожалуйста!

[@DNeeX]

Только сегодня утром мне сказали, чтоб шёл разбираться, как отправлять форму на почту. И тут приходит уведомление с твоим видео)

[@deekin3005]

Вот это я искал пару месяцев назад) Спасибо! Штука реально нужная. И валидация и почта и стилизация не стилизуемого)👏👏👏

[@FreelancerLifeStyle]

Я рад что полезно!

[@АртемСемёнов-к4ч]

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

[@evgeniymedvedev5799]

Шикарное видео. Это настоящий клад знаний и опыта. Благодарю, Евгений

[@maxedits7064]

Изучал HTML CSS JS сам в интернете, делал свои сайты и было столько забот, кода больше и много лишнего. Но когда сейчас посмотрел буквально 1 твой ролик, то все проблемы как будто рукой сняло, я открыл столько нового для упрощения своего кода и эффективного верстания страницы, спасибо большое!

[@irinak6662]

Спасибо, Жека! Очень интересно, даже что-то поняла :). Но не думала, что для отправки такой на вид маленькой формы нужно столько разного кода. А форма очень симпатичная получилась!

[@FreelancerLifeStyle]

Спасибо большое!

[@ОлегМарченко-ы2ь]

Супер-позитивный Человечище! Я так за сборную на Олимпиаде не волновался, как за супер-письмо )))))

[@GravelTravel]

Євген, дуже тобі дякую за корисний урок. Учора пів дня сидів розбирався з цим кодом. І все дуже добре вийшло. Трохи переробив під себе, протестував і все гарно працює. :)

[@shukrullohrahimov-z4h]

Как вы решили проблему помогите пжж

[@deniskotov]

ЭТО ЯДЕРНАЯ БОМБА!!!!)))) Как же я давно ждал этот выпуск от тебя!))))) Спасибо)))))))))))))))))

[@FreelancerLifeStyle]

Пожалуйста!

[@HmurayaKoshka]

Я обожаю ваши уроки, очень вдохновляет!

[@FreelancerLifeStyle]

Я рад!

[@alexanderwagner8199]

Женя, какое же огромное тебе спасибо за все твои уроки! Начну зарабатывать, обязательно поддержу твой канал!

[@over1679]

Только собирался делать форму обратной связи и тут выходит видео. Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@tanitapak4839]

ох, за одно это видео получила больше позитива, чем за всю жизнь))

[@polinaganina751]

Женя, спасибо за урок! Мира на земле, ждем новые выпуски!

[@brodyagaPATY]

Наконец то без костылей научился)))) Жека ты лучший!!!!! Спасибо!!!

[@megafyrnd]

Спасибо тебе, человечище. Благодаря тебе, я себе сайт доделываю потихоньку)))

[@alexles5003]

Очень крутой урок. Фишка с FileReader для показа изображения зашла. Хорошо показана работа с формой. Стилизация чекбоксов и радио тоже стандартный подход. Посмотрел даже на React решениях никто обычно не собирает данные формы в ручную. Работают с FormData. Так что, показанные здесь техники это база.

[@Blackbart3k]

Добра тебе, брат, ты лучший)

[@FreelancerLifeStyle]

Спасибо!

[@айзеказимов-ч2т]

Супер! Давно ждал чего то в этом роде!

[@FreelancerLifeStyle]

Я рад!

[@ИгорьКугель]

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

[@vitalyverdiyev9078]

Самое огроменное Вам спасибо, дядя Женя!

[@FreelancerLifeStyle]

Пожалуйста!

[@РатмирХагажеев]

Супер!! Так мало хорошего контента на эту тему, и вот наконец-то! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@arthurvolokhov1911]

Просто обалденный видос. Я в восторге. Тока добавил одну отсебятину. А именно, когда я добавил тень к инпутам в фокусе, чтобы обозначить эффект присутствия, то в транзишине указал не all, а именно box-shadow. Дело в том, что если в transition указываешь all, то тень начинает плавно и красиво появляться, а изменение размера текстового поля для сообщения путем перетаскивания, неприятно тормозить.

[@kotlancer]

Ух, соскучился по таким выпускам! ОГОНЬ!!!!)))

[@FreelancerLifeStyle]

Спасибо!

[@наталіяклемишова]

Да, обожаю такие выпуски 👌

[@vassilk]

Дуже круто, як завжди на висоті. Дякую! за такі якісні уроки. Ще б розказав про іконочні шрифти, якщо буде час

[@FreelancerLifeStyle]

Розкажу

[@Azerchay123]

Стоит еще немного модернизировать эту форму, где проверка на пустые строки. Чтобы не приходило сообщение, где поле какое-то пустое. А то получается, что можно понаставить пробелов в имя, и валидация проходит успешно. if (input.value.trim() === '') { //something here }

[@baboon_hero]

Кайфую от того, как ты кайфуешь от своего дела 😃

[@sakosargsyan7516]

Спасибо тебе большое ! Ты очень крутой, очень часто выручаешь начинающих программистов и не только.

[@давидкучерявый]

привет, у тебя код точь в точь заработал? у меня не проходит phpmailer. вот думаю с хостингом проблема или как. выдаёт 403

[@sakosargsyan7516]

Привет, нет. Я немного переделал код и mailer по другому написан, но все работает

[@sakosargsyan7516]

@@давидкучерявый отправить код ?

[@meirlanerezhepov92]

@@sakosargsyan7516 да, отправь пожалуйста

[@sakosargsyan7516]

@@meirlanerezhepov92 телегу напиши

[@jenyaspace]

Спасибо за урок по отправке без применения жуквери))

[@Gameplayer55055]

Помню, я задолбался крутить какой-то конфиг, и кинул эту затею 2 года назад А так хороший пример, учит сразу многим составляющим веб приложения. А так на питоне свой бложик вместо php написал :)

[@Gameplayer55055]

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

[@KVARTALTV]

Спасибо тебе большое. Я начинающий разработчик. Использовал твой код, с нужными мне доработками в реальном проекте, всё работает!!!

[@FreelancerLifeStyle]

Я рад!

[@sergeyermolaev270]

не работает

[@irinadim]

Женя, у вас столько позитива, сижу продолжаю улыбаться))))))Спасибо за уроки!

[@disconnect-forever]

Дружище, как же ты вовремя!

[@s1venkov1]

Видео просто бомба, всё максимально подробно и понятно! Ты лучший!

[@lesjoni8347]

Мой мозг расплавился от Javascript и php, надеюсь буду понимать в будущем.

[@puldirection3190]

Зарядился позитивом на весь день!! Спасибо!!! ты крут!!!

[@FreelancerLifeStyle]

Спасибо!

[@deantek]

В июне сдавал тестовое, где нужна была валидация, в итоге день разбирался, но всё-таки сдал)

[@FreelancerLifeStyle]

Ну, вот еще варивант, надеюсь будет полезно!

[@deantek]

Фрилансер по жизни - IT и фриланс я уже сохранил видео)

[@Евгений-м3у4ц]

Жека, спасибо большое за такой чудесный урок! Ты лучший на ютубе блогер, мне очень повезло что я попал на твой канал! Успехов тебе в дальнейшем развитии. Буду поддерживать всегда комментариями и лайками ! =)

[@denyssamsonov9369]

... довольно заморочено, но ОЧЕНЬ круто! BRAVO!!!

[@algiruy8721]

Спасибо за классный урок ! Очень информативно.

[@FreelancerLifeStyle]

Пожалуйста!

[@TarasovIgor1989]

Для тех кто пишет, что не работает. Просто будьте внимательны. Повторил все один в один. Закинул на хостинг. Предварительно на хостинге создал почтовый ящик. Не заработало. Пару часов убил на поиск ошибки. На следующий день на свежую голову опять сел, внимательно изучил ошибку (ф12 в браузере) и вуаля, не поставил один раз ; в php файле. Так что урок 100% годный, а код 100% рабочий ✌🏼 Жека, спасибо 🙏🏼

[@АртемСанников-х4ч]

каким хостингом пользуешься? почему то хостинг при отправки выдает алерт с ОШИБКОЙ JS проверил там расставил алерты с разными ошибками и не они выскакивают

[@serhiistanislav]

Ну наконец-то 😌 Давно ждал такой видос 🔥

[@FreelancerLifeStyle]

Супер!

[@KindCat21]

Крайне полезный урок!

[@FreelancerLifeStyle]

Я рад!

[@proquiz2308]

За загрузку 2 лайка ставлю, гениально))

[@ЕвгенияКлимович-щ2я]

все что ты делаешь реально очень круто! спасибо тебе огромное!!!

[@АнтонВладимирович-э5ч]

Лучший урок по формам, спасибо!

[@kirillart1830]

Урок огонь! Спасибо большое!

[@Сергей-г8г6с]

Евгений! Спасибо за урок!

[@FreelancerLifeStyle]

Пожалуйста!

[@evgeshad3011]

Уже слово в слова списываю , один фиг не работает

[@IgorRead]

Это мега урок, БЛАГОДАРЮ!!!

[@serzhuk22]

Лайк авансом. Позже гляну)

[@FreelancerLifeStyle]

Я проверю )))

[@serzhuk22]

@@FreelancerLifeStyle домовились, земляче ;)

[@nikitasadovnikov6739]

Огромное спасибо! Урок потрясающий!

[@hikkikomori9072]

открыл видяху эту и у меня прям какая то ностальгия по временам прошедшим(((

[@evgeniyveris]

Спасибо! Очень полезный видос по всем фронтам!

[@FreelancerLifeStyle]

Пожалуйста!

[@ОлегЯровиков-м3з]

Жека! Как всегда, видос в нужное время , отдельный респект за эмоции в конце, когда ждал письмо на почту, аж проникся вместе с тобой. Но и минус есть небольшой , поскольку я, пока, не имею возможности отщипнуть от семейного бюджета даже тот мизер , чтобы оплатить доступ на патреон придется скачать этот видос, чтобы покадрово можно было бы переписать скрипт изменения стилей select . Ты супер Мега [phone]

[@anutasolnechnaya8297]

Очень полезное видео!!! Женя, спасибо большое!!!

[@hdrhighdigitalrap5474]

Жека, як би ми без тебе жили?) Дякую! Впав зі стула від жарту про завантаження 😆

[@andtar1334]

Корзина для сайта оччень нужна!!! С наполнением и отправкой заказанного.

[@elenkarnaeva2458]

Это было прекрасно!!!! Благодарю!

[@FreelancerLifeStyle]

Пожалуйста!

[@vyacheslavzabelskiy3745]

Просто МЕГА!!

[@FreelancerLifeStyle]

Спасибо!

[@bunnybugs6623]

И получаем пакую вот штуку, красавчик просто, от души!)

[@deniskotov]

Жека-Жека! Как же люблю твои уроки!)))

[@MegaDragon1112]

Wow! Очень полезное видео, лайк однозначно

[@FreelancerLifeStyle]

Спасибо!

[@bessonov7897]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@ЛюдмилаПрилуцкая-м6н]

Просто супер! Большое спасибо!

[@dragnil96]

Оооо великий Евгений да прибудет с тобой сила . Это то что нужно . Может еще про Api токены и тд. Выпустишь видео

[@jarny_csgo]

Жень переписал всё как у тебя даже перепроверил два раза, но всё равно не работает валидация

[@artist_cw]

Стилизация и разметка работают, но почему-то когда подключаю JS, ничего не происходит. Подскажите что делать, а то уже третий день не могу разобраться.

[@infarkt4717]

Поздравляю ,появляются спонсора)

[@FreelancerLifeStyle]

Да, желающих много, а вот так что б нормальные были нужно ждать)

[@infarkt4717]

@@FreelancerLifeStyle аа даже так) ну тогда респект х2 если выбираешь правильных и нужных а не всякий бред

[@aleksgbr3878]

Супер 100500 раз лучший Жека прогер!!!

[@FreelancerLifeStyle]

Спасибо))

[@markkhodunov5685]

Мне очень понравилось видео, все доступно и понятно, и результат хороший. Смутило только то, что нет возможности по итогу полностью скопировать весь код. И применить для себя на практике, чтобы увидеть хоть какой-то результат. Рекомендую тебе добавлять код под видео, чтобы человек мог просто взять твой код, скопировать, и применить для себя. Если бы ты хотя-бы для меня, хотя-бы на этом видео бы это сделал - я бы тебе сотку на телефон без обмана скинул.

[@kliui_valeria]

под видео ссылка на патреон, где ты можешь за денюжку код скопировать

[@ГеоргийВязовой-ь3е]

И снова топовый контент!

[@FreelancerLifeStyle]

Спасибо!

[@ffedchik]

Не просто замечательно, а хорошо-замечательно!

[@FreelancerLifeStyle]

Спасибо!

[@developerblog1]

Выпуск топ , спасибо 👍👍👍

[@kirillpopov1445]

Всё понять и по делу. Спасибо!

[@bigmathato8131]

спасибо за видосик ТЫ СУПЕР!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@andrewstarcev]

О круто! Спасибо за видео. Давно есть скрипт для отправки форм. Но очень кривой и работал через раз. И файлы не отправлял. А на ютубе мало таких уроков.

[@IhorVyshniakov]

Хай! Отличный урок, спасибо большое! P.S. Кнопка загрузки файла(input) у тебя на всю ширину .wrapper, а бутафорская кнопка гораздо меньше. Единственный нюанс) Чтобы поправить, нужно для .file__input поставить ширину вместо width: 100% -> width: 89px;(ширину .file__button вместе с padding'ами, она может немного отличаться от 89px в зависимости от шрифта).

[@V1adimir__Krutikov]

тогда уж max-width:

[@V1adimir__Krutikov]

если width, то не в px

[@IhorVyshniakov]

@@V1adimir__Krutikov почему не в px? И почему тут лучше max-width?

[@DashaG182]

супер знания и супер позитив

[@baboon_hero]

Спасибо огромное !

[@drknss3021]

Магия!)

[@наталіяклемишова]

Именно 🎉

[@FreelancerLifeStyle]

Спасибо!

[@qwe-rty-]

45:34 выпал просто😂...

[@englishwithabushka560]

Спасибо ты просто супер,и пожалуйста делай BackEnd уроки для начинающих

[@alexeyartishchev9832]

Спасибо, очень помогло!👏

[@Fortunate_Son979]

Жека, все супер, но расскажи про защиту формы!

[@azat_abdykali]

ууррра спасибо )

[@FreelancerLifeStyle]

Пожалуйста!