Форма обратной связи / Отправка формы на почту без перезагрузки
Вставка
- Опубліковано 22 лип 2024
- 🌐 Наш сайт: codelab.pro/
💬 Группа в Telegram: t.me/codelab_channel
------------------------------
📋 Кратко, о чем это видео
В этом заключительном видео мы сделаем отправку формы на почту. Важно, что отправляться данная форма будет без перезагрузки страницы (асинхронно). После отправки формы пользователь получит уведомление, что данные отправлены, либо сообщение со статусом ошибки.
Также в конце бонусом покажу, как сделать простую разметку для письма.
------------------------------
📌 Полезные ссылки
Готовый код из видео (с комментариями) ➝ codelab.pro/forma-obratnoj-sv...
Исходники предыдущего урока на GitHub ➝ github.com/toni-wheel/youtube...
Готовый код 1-го урока (с комментариями) ➝ codelab.pro/forma-obratnoj-sv...
Готовый код 2-го урока (с комментариями) ➝ codelab.pro/forma-obratnoj-sv...
Отправка файла на почту ➝ codelab.pro/forma-obratnoj-sv...
Асинхронность в JS ➝ doka.guide/js/async-in-js/
Async/Await ➝ doka.guide/js/async-await/
Что такое fetch ➝ doka.guide/js/fetch/
Объект FormData ➝ learn.javascript.ru/formdata
------------------------------
🕒 Таймкоды из видео
0:00 Демонстрация формы
1:11 Обзор стартового проекта
3:34 Загрузка и подключение PHPMailer
5:44 Настройка PHPMailer для отправки писем
10:12 Отправка письма без перезагрузки
22:28 Немного стилизуем письмо
27:37 Завершение
------------------------------
💙 Поддержать меня и мой канал
Yandex деньги ➝ yoomoney.ru/to/4100116765956607
Qiwi кошелек ➝ qiwi.com/n/CODELAB
Готовый код из урока ➝ codelab.pro/forma-obratnoj-svyazi-otpravka-formy-na-pochtu-bez-perezagruzki/
По многочисленным просьбам написал статью про отправку файла на почту ➝ codelab.pro/forma-obratnoj-svyazi-otpravka-fajla-na-pochtu/
Пишет ошибку 500 в чем может быть проблема?
Всем привет! Спасибо автору за подробное объяснение и РАБОЧИЙ код в 2023. Переделал под свой и с первого раза все сработало без каких-либо ошибок. Локально конечно же это не проверить, а хорошо хостинг ничего не блокировал)
только после заливки на хостинг работает! Ура!!!
круто стартанул) удачи в развитии)
Спасибо большое, твое видео очень помогло)
да у меня были ошибки 500 и 404, но это из-за опечаток и других проблем которые я решала опираясь на комменты ниже, спасибо, помог разобраться)
Большое спасибо!!!
Спасибо! Все работает!
Отлично 👍
@@codelab_channel привет!хороший видос,долго искал
Теперь,ВСЕ ПРАВИЛЬНО НАПИСАЛ ТЕПЕРЬ НЕ ПОЛУЧАЕТСЯ ОТПРАВИТЬ СООБЩЕНИЕ ПИШЕТ «I caught in promise SyntaxError:Unexpected token
Helpppp
Ребята, всем кто пишет про ошибку 500, объясняю как с ней справился я. В первую очередь смотрим логи на хостинге, в моем случае была ошибка "require_once(): Failed opening required" Типа нет такой директории или файла, хотя фактически они есть (запроверял до дыр). Проблема оказалось в том, что скрипт при заливе его на хостинг, перестает учитывать верхний регистр букв в путях "require "PHPMailer/src/Exception.php";и "require "PHPMailer/src/PHPMailer.php"; решением будет переименовать эти файлы только маленькими буквами и папки в которых лежат эти файлы должны называться маленькими буквами т.е. так : "phpmailer/src/exception.php". И все, че за фигня я не понял конечно, разбираться уже не хочется, т.к. на решение проблемы убито over дохрена времени, но таким вот образом скрипт робит
брат, ты все файлы в phpmailer’е тоже на маленькие буквы сменил?
и в коде, в графе use тоже с маленькой?
Прошу подсказать почему выдаётся ошибка Uncaught (in promise) SyntaxError: Unexpected token 'E', "Error" is not valid JSON в консоле браузера при отправки данных с формы обратной связи на сайте на почту хостинга?
тоже тема прям острая, это третий видос по формам, надеюсь заработает... заранее спасибо)
УЖЕ НЕ РАБОТАЕТ!!!
!!
!!
!!
!!
!!
11
11
!!
Здравствуйте, ошибка 405 вверху экрана, как исправить?
Всем привет! Ребята, КОД РЕАЛЬНО РАБОЧИЙ, просто все нужно перепроверить на 1000 раз. Я уже неделю не могу отправить форму на почту.. Пересмотрел всё, что есть на ютубе, перечитал кучу форумов, а толку ноль.. Всегда была одна и та же ошибка с кодом: 500. Как оказалось, дело было в неправильно прописанном пути в файле php, вот в этих строчках:
require "PHPMailer/src/PHPMailer.php";
где PHPMailer должно быть идентично названию папки в которой лежат файлы этой библиотеки. Теперь всё РАБОТАЕТ!!
Автор, спасибо тебе огромнейшее))) и дальнейших успехов!
Рад что у вас все получилось. И спасибо за полезный совет для наших зрителей)
ксоежелнию у меня код 500. тоже сижу. но ошибка 500 всеравно. уже сайт на хостинге. уже и как на видео и через SMPT попробовал. и путь вроде правильный. все время код 500
А у кого-нибудь есть блок-схема алгоритма выполнения?
Очень круто получилось 👍😄
Рад, что вам понравилось)
Даа
Какой будет код, если подключать SMTP?
код ошибки 500. В чем может быть проблема?
почему то у меня не высылается, и когда кликаю на ОТПРАВИТЬ никакого действия нету. Все на сервер выгрузил, и нечего не выходит :(
Запускаю с хостинга, пишет ошибку 500, что может быть?
Брат, а подскажи плиз, зачем вы все метод POST пишите вот так, всеми большими буквами? А если маленькими написать, работать не будет разве?
ничего не пойму. Папка после распаковки называется PHPMailer-master, а путь укзываем: require "PHPMailer/src/PHPMailer.php"
Зачем делать так много функций? Например можно же сразу присвоить data - объект FormData, без вызова отдельной функции или я чего-то не понимаю?
Почему на почта на 10 минут приходит а на норм почту нет ?
код не рабочий, как исправить ошибку 500, не объясняется
Привет. Можно вопрос. Делал все слово в слово по твоему видео. После нажатия кнопки "Отправить", выходит страница с такой ошибкой "405 Not Allowed
nginx" Почему такое, подскажи.
тоже самое(
выдает ошибку 405. Что делать? помогите!!!
Добрый день! Сделала всё как на видео, но почему то "function formCheck" проверяет по факту не все валиды а только в последнем инпуте, а предпоследний если неверно заполнен горит красной рамкой, но кнопка все равно отправляет письмо. И также в этой функции в видео №2 "isValid" и "isAllValid" в одной последовательности ( напр. const isAllValid = [];) а в видео №3 в начале, уже в другой (const isValid) но ничего не упоминается об этом изменении, как в итоге правильно? Сделала и так и так и ничего не поменялось.
И я с этим столкнулся. Приходит пустая форма, заполнен только последний пункт. Проверил, так оно и есть, достаточно заполнить последний пункт, форма отправляется без проблем. нужно в строке return acc && current; оставить только один & вот так return acc & current; По крайней мере мне помогло. Я этот урок объединил с уроком
MaxGraph - Как отправить заявку с сайта в Телеграмм. Вышло отлично, форма приходит мгновенно в Телеграм, не нужно в хламе писем на почте что то искать :)
@@mag222ico Я в итоге всё по другому написала, проверку и условие отправки сделала в джаве для каждого поля отдельно тогда работает.
Fatal error: require(): Failed opening required '..\PHPMailer\src\PHPMailer.php' (include_path='.:')
вот такая ошибка , что с этим делать?
Без исходника тяжело сказать в чем проблема. Проверьте папку PHPMailer, может когда распаковывали архив там ещё одна такая же папка вложена. По крайней мере у меня так было..
Я решил эту проблему!
нужно прописать в пути
require __DIR__."/PHPMailer-master/src/Exception.php";
require __DIR__."/PHPMailer-master/src/PHPMailer.php";
И письма отправляются и приходят.
Видео набрало 50 лайков, могли бы сделать продолжение?))))
Отлично! В скором времени напишу код и запишу продолжение. Спасибо, что напоминаете мне)
@@codelab_channel ИИИИИИИИИИИИ???))))))
Перепробовал много чего, твой код единственный рабочий! Спасибо!!! Подскажи, столкнулся с такой штукой, что есть 2 формы, id разные у обеих, но когда запускаю скрипт, с одной данные уходят, а с другой ошибка 500 ,что это может быть? Пробовал даже код дублировать на каждую форму разный..всё равно
Жиза. В html файле к каждой форме создай input с type="hidden", дай ей name и дай ей любое значение в value. Далее, в файле php делай if с проверкой. Если название формы = значение формы, то отправляй данные с первой формы. Точно так-же сделай для второй формы
validInputArr, а не validFormArr - был массив
проблема протетстить все это локально. на данный момент хостинга нет, т.е. надо или тестовый для себя делать, или
вычитал что есть во-первых open-server. но он только под винду.)) можно вроде через SMPT. но интересно что видосы которым и года нет уже устарели, gmail без токенов вообще я так понимаю уже не дает доступ. яндекс позволяет. но выдает cors ошибку 405 CORS.. использую live-server. посмотрел несколько видео годовой давности где у людей все работает.
в мозиле хоть ошибка нормально прописанна сходу) в то хром код дает и белеберду какую-то
использую live-server которые идет через npm. ubuntu. в загаловках есть allow. нет банально метода POST. GED HEAD и что-то еще. предпологаю что данные веб-сервер локальный не подходит для такого теста. работаю еще на ATOM. пора уже на VS code переходить) не знаю, будет ли такая проблема на плагине live-server на vs code
не понятно только почему cors ошибка возникает учитывая, что скрипт получается по тому же домену запускается, и даже реализация через SMPT не работает. в моем понимаю джолжно было сработать. еще непонятнее от того что скрипт под localhost. вроде браузер должен попроще относится если идет доменом идет localhost. где-то помню встречал такую инфу.
Подскажите что может быть не так. Пишет что отправлена форма, но не приходит письмо. Почту вписал. Помогите)
Здравствуйте, если вы на локальном компьютере пытаетесь отправить, то ничего не получится. Код работает на хостинге с настроенным почтовым сервером.
@@codelab_channel Нет конечно. Я на хостинге
@@codelab_channel Всё заработало, но уходит в спам((
Здравствуйте уважаемые, У вас всё работает? У меня почему то пишет ошибка 403.. Не знаете в чём может быть причина??? Я уже не знаю кому обращаться
Вы код где запускаете?
На компьютере у себя или на хостинге?
Мой файл php тоже возвращает json ответ, который обрабатывает JavaScript. Но когда я хочу настроить мой обработчик формы чтобы он отправлял письмо через SMTP то этого сделать не получается.
Возможно у тебя есть готовое решение отправки через SMTP и чтобы php возвращал json.
Буду очень благодарен!! Использую PHPMailer
решил)
@@dimadiv6583 как?
Скачал исходники с гитхаба + заменил почту на свою + залил на хостинг = ПИСЬМА НЕ ПРИХОДЯТ
С хостингом проблемы значит
у него код не рабочий. В каждом уроке по ФОБ говнокод без доработки не фунциклирует
Спасибо за видео! Таков вопрос, имеет ли значение размещён сайт на хостинге или только в разработке на локальном? При выкладывании на хостинг нужно что-то новое в коде прописывать ?
Привет. Имеет значение, собственно, сам код будет работать только на хостинге с настроенным почтовым сервером.
При выкладывании на хостинг ничего прописывать не надо, только почту укажите, куда отправить письмо
@@codelab_channel а существует какой-то способ для проверки сначала локально, с последующим выкладыванием на хостинг?
привет! такая же ситуация, когда загружаю на хостинг, на бою слетают стили в той дивке где php. Случайно не ps используешь для хостинга?
@@user-ux9hy7vb3i в общем напишу что сам пробовал делать, на хост ещё не выкладывал. Проверял отправку через прогу open server, всё работатет и приходит на почту. Ещё была проблема что все пхп файлы были в другой папке от index.html , css и т. д, соответственно не работала отправка, потом перенёс пхп файлы в ту папку где html , css... И всё заработало. Не знаю , может кому-то полезно будет)
Жаль без PHP не работает.
Можно плж темный фон в следующих видосах, а то цвет (бедного родственика)
Понял, сделаем темнее фон)
есть ребята что добавить. итак ошибка 500 с очень высокой вероятностью это будет ошибка самого скрипта вашего в php. от опечаток, до того что вы не указали какую-то настройку. внимательно просматривайте где что указали или нет.
2. в самой библиотеке PHPMailer в примерах используется только директива use и нет require. так вот в моем случае без require не работает скрипт, так как как я понял не добавляются в глобальную область имен. не знаю как это работает.
3. мой текущий хостинг провайдер подсветил проблему, если делать как указано в видео, то большие почтовые сервисы могут такие сообщение не пропускать, так как где-то там на заднем фоне идет отправка так что ящик указанный как отправитель, не совпадает с ящиком фактическим с которого идет отправка. поэтому лучше реализовывать через протокол SMTP.
4. если будете делать через протокол SMTP то указывайте настройку $mail->SMTPDebug = SMTP::DEBUG_SERVER; в данном случае скрипт будет на хостинге, в корневой публичной папке, где сайт лежит. формировать log_err или с похожим название, по нему можно будет понять в каком месте исполнения будет ошибка.
5. лично я локальный тест не смог реализовать, но не сильно пытался. поэтому тестили через хостинг уже по логам и немного с тех.поддержкой.
Здравствуйте! Могу ли я как-нибудь связаться с Вами? Есть пару вопросов по поводу данной формы
Код работает, но письма не приходят на почту, пробовал уже разные почтовые сервисы. Запускал с локального сервера. В чем может быть проблема ?
Привет, удалось решить проблему? Такая же история
@@balancevideo7539 Такая же проблема, вам удалось что-то с этим сделать?
@@travesengertravesenger7436 нужно через SMTP отпрпвлять
@@stormbraker637 как это правильно сделать?
@@yaroslavsavkin в почтовом ящике настроить
Можно попросить, мне сделать это на одном файле, чтобы я скопировал, и сразум получилось
ввхаахувхывххы
ахахахазахахахахахаах
почему-то после отправки формы и чистки полей el.style.border = "none"; не работает, помоги пожалуйста
Возможно стили где-то накладываются, попробуй el.style.border = "none !important"; А так смотри исходники у меня в описании, там рабочий код полностью.
Кто-то решил ошибку 500? Не работает ни на локальной машине, ни на хостинге. Консоль выдает ошибку 500 с файла send.mail.php
Причем запустить пытаюсь дефолтный код из описания, просто изменив почту.
Нашел решение?