Как отправить данные с HTML формы на почту || How to send data from an HTML form to email HTML&CSS

Поділитися
Вставка
  • Опубліковано 13 лют 2024
  • В этом видео вы узнаете как сделать секцию с формой обратной связи HTML и отправить данные с этой формы на почту.
    🔗 Исходный код (source code): / 98692166
    🔗 Image: surl.li/qkatm
    🔗 Contac forms: web3forms.com/
    ⏱Эпизоды⏱
    00:24:40 - подключение web3forms
    ✅ Адаптивный шрифт с помощью функции calc() CSS: • Адаптивный шрифт с пом...
    ✅ Адаптивный шрифт с помощью функции clamp() CSS: • Адаптивный шрифт с пом...
    ✅ CSS Переменные: • Переменные в CSS || CS...
    ✅ Как ускорить написание кода с помощью Emmet в Visual Studio Code: • Как ускорить написание...
    ✅ Расширение Live Server и автоматическое обновление страницы: • Расширение Live Server...
    👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy
    💵 Поддержать канал (support channel): 5375414128564241 (universal bank || mono)
    💵 Поддержать канал (support channel): send.monobank.ua/jar/3Aze2gcvVa
    💵 Поддержать канал (support channel): / codingwithtopchiy
    👍 Subscribe: / @topchiydev
    😀Спасибо за просмотр!😀

КОМЕНТАРІ • 65

  • @adham8368
    @adham8368 20 днів тому +1

    Спасибо вам большое, потратил неделю что-бы это сделать но не получалось, а тут 5 минут и готово

  • @user-rp8kx6xr8g
    @user-rp8kx6xr8g 22 дні тому +1

    Дружище, спаситель ты мой. Я сейчас сайт на диплом пишу и своим видосом ты сэкономил часа 2 моей жизни, СПАСИБО ТЕБЕ!!!!!

    • @topchiydev
      @topchiydev  22 дні тому

      Пожалуйста)
      Рад, что смог помочь 👍

  • @thealexday8783
    @thealexday8783 2 місяці тому +2

    Чувак, ты не представляешь как же ты помог. Мне срочно нужно было сделать отправку формы на почту. Ты святой человек! Лайк!

  • @user-ul4te9bw6k
    @user-ul4te9bw6k 3 місяці тому +1

    спасибо большое, все работает, ёмко и по делу))))

  • @santehnikspb85
    @santehnikspb85 3 місяці тому

    Спасибо, всё работает! Много полезной информации

    • @topchiydev
      @topchiydev  3 місяці тому

      Пожалуйста)
      Рад, что видео оказалось полезным 👍

  • @An_Lian13
    @An_Lian13 4 місяці тому +1

    Здравствуйте! Спасибо! Всё получилось!

    • @topchiydev
      @topchiydev  4 місяці тому

      Приветствую!
      Отлично 👍
      Спасибо за обратную связь)

  • @doktoraybolit5732
    @doktoraybolit5732 Місяць тому

    Дружище! Супер крут! Спасибо!!!

  • @user-th7bt2oq9v
    @user-th7bt2oq9v 2 місяці тому

    Спасибо, очень сильно выручил! Всё работает! Однозначно лайк!

    • @topchiydev
      @topchiydev  2 місяці тому +1

      Пожалуйста)
      Рад, что все получилось 👍

  • @user-zw3ex4mw5c
    @user-zw3ex4mw5c 2 місяці тому

    Ты просто лучший!!!

  • @Vt_Shabanoff
    @Vt_Shabanoff Місяць тому +1

    отлично, спасибо огромное

  • @flay1040
    @flay1040 3 місяці тому

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

    • @topchiydev
      @topchiydev  3 місяці тому

      Пожалуйста)
      Рад, что видео оказалось полезным 👍

  • @nneeuurr-
    @nneeuurr- 3 місяці тому +2

    Хохохо, да ты ведь лучший!

  • @Vsfrcode777
    @Vsfrcode777 2 місяці тому

    спасибо мужик)

  • @TheGetto38
    @TheGetto38 Місяць тому

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

    • @topchiydev
      @topchiydev  Місяць тому

      Пожалуйста)
      Рад, что смог помочь 👍

  • @artemev9658
    @artemev9658 2 місяці тому +6

    видео название про отправку данных а там все про верстку

    • @Shawshenk
      @Shawshenk Місяць тому

      Вот таймкод 24:38

  • @mikhaildolgov
    @mikhaildolgov 4 місяці тому

    😎👍

  • @user-fn1cz7xe4d
    @user-fn1cz7xe4d 4 місяці тому

    👍

  • @anri_khv
    @anri_khv 4 місяці тому

    Видео про данные, а больше половины верстка... А так норм👍лакнул

  • @Kat82213
    @Kat82213 Місяць тому

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

    • @topchiydev
      @topchiydev  Місяць тому

      Приветствую!
      Пожалуйста)
      Точно не знаю, есть ли еще такие сервисы, не задавался таким вопросом, есть другие способы получать данные с формы в базу данных например, с помощью php.
      Вот еще ссылка на документацию: docs.web3forms.com там есть вкладка customization возможно поможет что-то улучшить или убрать.

  • @pipiter
    @pipiter Місяць тому

    Бро где ты был раньше??? Спасибо))))

    • @topchiydev
      @topchiydev  Місяць тому

      Пожалуйста)
      Всему свое время 😀

  • @alexeyalexandrovich1287
    @alexeyalexandrovich1287 14 днів тому

    Спасибо за интересный способ, все работает. Насколько я понял на бесплатном тарифе до 250 заявок в месяц?

    • @topchiydev
      @topchiydev  13 днів тому

      Пожалуйста)
      Наверное, по тарифам не смотрел.

  • @user-eh5zs8xn1j
    @user-eh5zs8xn1j 26 днів тому

    Спасибо получилось. Единственное вопрос. У меня в форме прикрепляется файл, как сделать так чтобы он тоже отправлялся на почту, а не только его название?

    • @topchiydev
      @topchiydev  26 днів тому

      Приветствую!
      Пожалуйста)
      Точно не подскажу, можете обратится в службу поддержки самого проекта: web3forms.com/help возможно они помогут разобраться.

  • @pikertrash5464
    @pikertrash5464 2 місяці тому

    Здравствуйте, работает только на сайтах которые уже можно открыть по ссылке или есть не на опубликованном вводить, то тоже придёт?

    • @topchiydev
      @topchiydev  2 місяці тому

      Приветствую!
      Должно также сработать, тестировал на GitHub pages.

    • @pikertrash5464
      @pikertrash5464 2 місяці тому

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

    • @topchiydev
      @topchiydev  2 місяці тому

      Сбрасывайте на почту: codingwithtopchiy@gmail.com завтра под вечер смогу посмотреть и дам ответ.

    • @pikertrash5464
      @pikertrash5464 2 місяці тому

      @@topchiydevхорошо, спасибо

  • @LizaGorchenko
    @LizaGorchenko 2 місяці тому

    Подскажите, письмо приходит на почту, но сообщение пустое, данные которые вводим в форму не отображаются, что делать?

    • @topchiydev
      @topchiydev  2 місяці тому

      Приветствую!
      Проверьте код еще раз, где-то допущена ошибка.

    • @user-ud4yz5nm9i
      @user-ud4yz5nm9i Місяць тому

      нужно добавить атрибут name="#", соответственно каждому инпуту, где # - это имя инпута, отображающее его функцию, напр: message, name, phone, e-mail, и т.д.

  • @toli1156
    @toli1156 Місяць тому

    Всё настолько просто....

  • @orochimarik3207
    @orochimarik3207 Місяць тому

    У меня такой вопрос. Я сделал веб-сайт с анкетой чтобы провести опрос. Нужно ли мне покупать домен, чтобы просто провести опрос и больше никогда не пользоваться сайтом?

    • @topchiydev
      @topchiydev  Місяць тому

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

    • @orochimarik3207
      @orochimarik3207 Місяць тому

      @@topchiydev Но если так сделать, ссылка на сайт будет выглядеть как путь к html файлу через диск С. Она будет работать в таком случае?

    • @orochimarik3207
      @orochimarik3207 Місяць тому

      @@topchiydev Я в этом совсем профан, возможно глупость сказал

    • @topchiydev
      @topchiydev  Місяць тому

      Посмотрите это видео: Как загрузить сайт или проект в интернет используя GitHub || Бесплатный хостинг GitHub Pages
      ua-cam.com/video/S3pkpo5NqJY/v-deo.html
      это поможет разобраться 👍

    • @topchiydev
      @topchiydev  Місяць тому

      Все нормально, все мы учимся постепенно 🙌

  • @xzetxp8763
    @xzetxp8763 4 місяці тому

    Спасибо, теперь осталось взломать gmail😅😅😅

  • @user-gd2xb1ce9m
    @user-gd2xb1ce9m 2 місяці тому

    Выдает такую ошибку {"success":false,"message":"Unrecognized content-type. Please use other methods."}
    Как исправить?

    • @topchiydev
      @topchiydev  2 місяці тому

      Приветствую!
      Не сталкивался с таким, напишите в службу поддержки: web3forms.com/help

  • @user-bz7qh2lh4n
    @user-bz7qh2lh4n Місяць тому

    Получается что ключ в общем доступе лежит в html файле?

    • @topchiydev
      @topchiydev  Місяць тому

      Приветствую!
      Да, все верно.

    • @andreasshev5748
      @andreasshev5748 Місяць тому

      ​@@topchiydevнасколько это правильно и безопасно?

    • @topchiydev
      @topchiydev  Місяць тому

      Приветствую!
      Без ключа этот скрипт работать не будет, на счет безопасности один из вариантов это.. кто-то может скопировать ваш ключ вставить себе в форму и вам будут приходить письма на почту, но вероятность что кому-то это понадобится не большая)
      Это просто один из примеров как можно быстро и бесплатно сделать отправку информации с формы на почту, использовать его или нет уже решать Вам 👍