В этом проекте мы делаем сайт, где заинтересовавшийся посетитель может оставить свой емейл-адрес.
Чтобы человек мог отправить нам свои данные, на веб-страничках используется что?.. Формы.
Если вы не первый день в интернете, то вы их видели и пользовались - это и форма регистрации на сайте, и форма опроса вашего мнения, и голосовалки, и т.д.
Напомню, что веб-форма - это набор элементов, например, полей для ввода текста или выбора элемента из списка, и введённые данные из этих элементов по нажатию кнопки “Submit” отправляются на сервер, где они будут обрабатываться или храниться.
В этом курсе мы не будем касаться серверной части, то есть как самим принять данные формы, как их обработать и хранить - для этого нужно пройти курс по серверным языкам программирования, например, PHP, Python или Ruby.
Сейчас я покажу как мы могли бы сделать форму, чтобы отправлять данные себе на сервер.
Пишем тег FORM.
Внутри добавляем два текстовых поля - одно для имени, второе для емейла.
Плюс кнопка Submit.
По нажатию этой кнопки данные отправляются, но мы ещё не умеем их обрабатывать.
Поэтому мы немного схитрим.
Мы не будем сами обрабатывать данные формы, мы используем сторонний сервис, который сделает это за нас.
Мы не будем изобретать велосипед, он уже изобретён до нас, мы будем использовать имеющиеся системы. Использовать то, что уже есть - это признак грамотного инженера.
Мы будем использовать систему под названием Mailchimp.
В переводе это означает что-то типа “почтальон-шимпанзе”.
Mailchimp - это система как раз для наших целей.
Она хранит список наших подписчиков, и при желании мы послать им письмо или регулярную рассылку.
Мы можем добавить первых подписчиков вручную, прямо на сайте Mailchimp. Клац-клац, вот у нас уже в базе подписчиков есть первые люди.
Если вы ещё не зарегистрированы, то давайте быстренько это сделаем.
Помимо этого система Mailchimp может дать нам готовый ХТМЛ-код, который мы вставим на странице вместо своей формы, и все новые пользователи будут автоматически сохраняться в списке Mailchimp-а. То есть нам ничего не нужно программировать самим - только вставить их ХТМЛ-код с формой и всё.
Где взять код такой волшебной формы. Заходим сюда.
Здесь мы можем выбрать поля, которые нас интересуют. Мы хотим только имя и емейл. Если сделать форму больше, то как правило, меньше людей захочет её заполнять, посмотрим правде в глаза, никто не любит лишней работы. Поэтому оставляем только 2 самых важных для нас поля.
А вот здесь можно выбрать внешний вид формы, настроить цвета и шрифты.
Когда мы что-то меняем в настройках, Mailchimp автоматически генерирует для нас HTML-код, который мы потом вставим на страницу.
Вот здесь мы находим хтмл-код. Копируем его. Открываем наш хтмл-файл, убираем нашу неработующую форму и вставляем код из Mailchimp - да, он великоват, зато он сделает всю работу за нас.
Тестируем. Попробуем ввести пустые значения. Попробуем неправильные. Хорошо. Теперь попробуем ввести свои данные, как будто мы - наш заинтересовавшийся посетитель.
Проверяем в Mailchimp - да, вот он появился.
Ограничения. В бесплатной версии Mailchimp вы сможете собрать до 2 тысяч емейлов. Это довольно много и на первых порах вполне достаточно.
Итак, попробуйте вставить форму из Mailchimp.
Курс по HTML - zero2hero.org/course/details/html
12 янв 2020
