Пошаговая инструкция создания сайта на html коде / Форма подписки на рассылку новостей сайта

Форма подписки на рассылку новостей сайта

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

Расположим форму подписки вверху правой колонки сайта, как это сделано у большинства, а значит работать будем в файле sidebar.html, который лежит в папке "include".

На некоторых сайтах форма подписки располагается в конце статьи, на мой взгляд, это менее удобно. Но если вы все-таки захотите сделать форму подписки в конце статьи, тогда придется сделать отдельный файл с формой подписки, и подключить его после контента.

Итак, работаем в двух файлах, sidebar.html и style.css. Открываем их в программе Notepad++.

Файл sidebar.html у нас пока еще совсем пустой. Поэтому, сначала создадим общий блок для информации правой колонки сайта с помощью элемента <div> и зададим ему идентификатор id="sidebar".

<div id="sidebar"> ... </div>

Внутри этого блока, создадим специальный блок для формы подписки с помощью того же элемента <div>, только с идентификатором id="subscribe":

<div id="subscribe"> ... </div>

Внутри этого блока уже будем создавать саму форму подписки.

Элемент формы подписки <form>

Форма подписки создается с помощью многофункционального элемента <form>, который состоит из пары тегов и предназначается, в том числе и для того, чтобы делать текстовые поля, которые заполняются посетителями сайта.

<form> ... </form>

У элемента формы подписки <form> есть обязательные атрибуты: action - в нем сообщается имя документа(файла), с помощью которого будут обрабатываться полученные из формы данные, или его адрес (если файл лежит в отдельной папке), и method - в котором сообщается, каким методом будут обработаны полученные из формы данные.

action="название папки/название файла" <!-- Сообщает имя документа для обработки данных или его адрес-->

method=" ... " <!-- Сообщает метод обработки полученных данных -->

Значение атрибута action оставим пока пустым, потому что у нас еще нет такого файла, о нем расскажу позже. А атрибуту method задаем сразу значение "post", которое сообщает о том, что полученные данные должны быть отправлены на сервер (то есть, к нам на почту).

<form action="название папки/название файла" method="post">

Далее работаем внутри пары тегов элемента <form>.

Сначала напишем небольшое текст, название или заголовок формы подписки, с помощью элемента абзаца <p>, например, "Подписка на новости блога", или еще пишут "Получать новости", "Подписка на обновления, "Подписка на рассылку новостей" и так далее. Я напишу просто "Новости блога".

<p>Новости блога</p>

Первый элемент формы подписки - текстовое поле для ввода e-mail адреса. Такое поле создается с помощью многофункционального элемента <input>, состоящего из одного тега, и его атрибута type, который указывает к какому типу относится элемент, со значением "email", что означает, что это будет текстовое поле для ввода именно email адреса, а не просто текста:

type=" ... " <!-- Указывает на тип элемента -->

<input type="email" />

type="email" <!-- Поле для ввода email адреса -->

Для этого элемента, в обязательном порядке, необходимо задать атрибут названия элемента name, и в данном случае будет удобнее, чтобы значения атрибутов name и type совпадали:

<input type="email" name="email" />

name="email" <!-- Название поля для ввода email адреса -->

Второй элемент формы подписки - кнопка для отправки введенного e-mail адреса к нам на почту. Такое поле так же создается с помощью многофункционального элемента <input>, но только его атрибут type принимает значение "submit", что указывает на то, что это именно кнопка для отправки данных:

type=" ... " <!-- Указывает на тип элемента -->

<input type="submit" />

type="submit" <!-- Кнопка для отправки данных -->

Для этого элемента также задаем атрибут названия name, значение которого, в данном случае, также будет совпадать со значением атрибута type.

<input type="submit" name="submit" />

name="submit" <!-- Название кнопки для отправки данных -->

Посмотрим, что у нас пока получилось.

Файл sidebar.html:

Получилось так, что форма подписки расположилась посередине правой колонки, и нужно переместить ее на верх. Для этого в файле style.css к записям свойств стиля второй ячейки таблицы #td2, необходимо добавить запись вертикального выравнивания vertical-align по верху:

vertical-align: top; /* Вертикальное выравнивание по верху */

#td2 {
    width: 367px;
    border: 1px solid #e8e3e3;
    border-collapse: collapse;
    vertical-align: top;
 }

Теперь займемся оформлением внешнего вида формы подписки, и делать это мы будем с помощью свойств стилей, а значит, будем работать в файле style.css.

Начнем с основного блока формы подписки <div id="subscribe">.

В файл style.css добавляем запись имени идентификатора.

#subscribe {
 }

Еще раз напомню, что имя идентификатора в css обозначается знаком решетки "#".

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

height: 250px; /* Высота формы подписки */

border: 1px solid #e8e3e3; /* Рамка формы подписки */

где:

1px /* толщина линии */

solid /* обыкновенная сплошная линия */

#e8e3e3 /* код цвета линии */

#subscribe {
    height: 250px;
    border: 2px solid #e8e3e3;
 }

У формы подписки появилась рамка:

Зададим внешние отступы формы подписки от всех краев. При этом, нам нужно отступить от боковых краев, но не нужно еще больше отступать от верха. Поэтому, верхний отступ будет равен нулю. Если же вы захотите сделать верхний отступ еще немного меньше, то в данном случае, значение верхнего отступа нужно будет задать со знаком минус:

margin: 0 12px 12px 12px; /* Внешние отступы от краев */

Или:

margin: -7px 12px 12px 12px; /* Внешние отступы от краев */

#subscribe {
    height: 250px;
    border: 1px solid #e8e3e3;
    margin: -7px 12px 12px 12px;
 }

Перенесем кнопку "Отправить" вниз, под текстовое поле. Для этого в файле sidebar.html, записи элементов <input> поместим в элемент абзаца <p>:

<p><input  type="email"  name="email" /></p>
<p><input  type="submit"  name="submit" /></p>

Расположим все элементы формы подписки посередине. Для этого, в файле style.css, к записям свойств стиля блока формы подписки с именем идентификатора "#subscribe", добавим свойство выравнивания text-align:

text-align: center; /* Выравнивание по центру */

#subscribe {
    height: 250px;
    border: 1px solid #e8e3e3;
    margin: -7px 12px 12px 12px;
    text-align: center;
 }

У моей формы подписки скругленные углы. Это можно сделать с помощью свойства стиля border-radius:

border-radius: 10px; /* Скругленные углы */

#subscribe {
    height: 250px;
    border: 1px solid #e8e3e3;
    margin: -7px 12px 12px 12px;
    text-align: center;
    border-radius: 10px;
 }

Зададим цвет фона для формы подписки. У моей формы, цвет фона задан градиентом - переходом из более светлого цвета в более темный. Для этого используем свойство стиля background со следующими значениями:

background: linear-gradient(to bottom, #fdf7e6, #f2d88d); /* Цвет фона */

где:

linear-gradient /* линейный градиент */

to bottom /* сверху вниз */

#fdf7e6 /* начальный цвет */

#f2d88d /* конечный цвет */

#subscribe {
    height: 250px;
    border: 1px solid #e8e3e3;
    margin: -7px 12px 12px 12px;
    text-align: center;
    border-radius: 10px;
    background: linear-gradient(to bottom, #fdf7e6, #f2d88d);
 }

Изменим вид верхней надписи формы подписки. Для этого, в файле sidebar.html зададим элементу абзаца <p> имя класса "p_sub":

<p class="p_sub">

Пропишем для него свойства стиля в файле style.css:

margin: 13px 0 0 0; /* Верхний отступ */

font-family: Verdana, Arial; /* Шрифт текста */

font-size: 16px; /* Размер текста */

color: #872e2e; /* Цвет текста */

font-weight: bold; /* Жирный текст */

Напомню, что имя класса в css обозначается знаком точки "." :

.p_sub {
    margin: 13px 0 0 0;
    font-family: Verdana, Arial;
    font-size: 16px;
    color: #872e2e;
    font-weight: bold;
 }

Если хотите, можно добавить вторую строчку текста, как сделано у меня. Для этого в файле sidebar.html после первой строчки текста "Новости блога", надо еще сделать запись:

<p class="p_sub">получать на почту</p>

Уменьшим расстояние между строчками с помощью свойства стиля внешних отступов margin:

margin: 2px 0 0 0; /* Внешние отступы */

.p_sub {
    margin: 13px 0 0 0;
    font-family: Verdana, Arial;
    font-size: 16px;
    color: #872e2e;
    font-weight: bold;
    margin: 2px 0 0 0;
 }

Расстояние между строчками уменьшилось, но при этом не стало отступа сверху. Чтобы восстановить отступ сверху, зададим свойство стиля внутренних отступов padding для блока формы подписки с именем идентификатора "#subscribe":

padding: 20px 0 0 0; /* Внутренние отступы */

#subscribe {
    height: 250px;
    border: 1px solid #e8e3e3;
    margin: -7px 12px 12px 12px;
    text-align: center;
    border-radius: 10px;
    background: linear-gradient(to bottom, #fdf7e6, #f2d88d);
    padding: 20px 0 0 0;
 }

Теперь все хорошо получилось, то что надо. Идем дальше.

Поработаем над полем для ввода электронного адреса.

В файле sidebar.html присвоим его элементу <input> имя класса "input_sub":

<input class="input_sub" type="email" name="email" />

Сделаем внутри этого поля надпись, которая будет исчезать при наборе в нем текста. Это делается с помощью атрибута placeholder:

placeholder="Ваш email*" <!-- Текст внутри текстового поля -->

<input class="input_sub" type="email" name="email" placeholder="Ваш email*" />

И еще, сделаем это поле обязательным для заполнения. То есть, нельзя будет сделать отправку формы, если в поле не введен адрес. Для этого предназначен атрибут required, который не принимает никаких значений, а просто существует сам по себе:

required <!-- Отмечает поле обязательного заполнения -->

<input class="input_sub" type="email" name="email" placeholder="Ваш email*" required />

Теперь, в файле style.css запишем для поля ввода электронного адреса свойства стиля, изменив его размеры (ширину и высоту), и отредактировав текст внутри поля:

width: 210px; /* Ширина поля */

height: 30px; /* Высота поля */

font-size: 14px; /* Размер шрифта */

padding: 0px 0px 0px 5px; /* Внутренний отступ от левого края */

.input_sub {
    width: 210px;
    height: 30px;
    font-size: 14px;
    padding: 0px 0px 0px 5px;
 }

У этого текстового поля есть еще такой момент. Когда в него ставишь курсор, или другими словами говорят - когда поле в фокусе, то вокруг него появляется голубая обводка:

Если вам, также как и мне, это не нравится, то чтобы она не появлялась, надо для элемента поля прописать свойство стиля outline, которое создает дополнительную рамку, но мы от нее откажемся:

outline: none; /* Убираем обводку поля (убираем фокус) */

.input_sub {
    width: 210px;
    height: 30px;
    font-size: 14px;
    padding: 0px 0px 0px 5px;
    outline: none;
 }

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

Поле для галочки так же сделаем с помощью элемента <input>, для которого необходимо прописать следующие атрибуты:

type=" ... " <!-- Указывает на тип элемента -->

name=" ... " <!-- Название поля -->

value=" ... " <!-- Задает значение, которое будет отправлено на сервер -->

В файле sidebar.html, после элемента поля для ввода электронного адреса, сделаем следующую запись:

<input type="checkbox" name="checkbox" value="mark" required />

type="checkbox" <!-- Поле для галочки -->

name="checkbox" <!-- Название поля -->

value="mark" <!-- Задает значение, которое будет отправлено на сервер -->

required <!-- Отмечает поле обязательного заполнения -->

Чтобы сделать текст после поля для галочки, нужно элемент этого поля <input> поместить в текстовой элемент абзаца <p>, задать этому текстовому элементу имя класса, например, "p_checkbox", и написать необходимый текст, например:

<p class="p_checkbox"><input type="checkbox" name="checkbox" value="mark" required />Я согласен(а) получать новости блога</p>

Отредактируем этот текст с помощью свойств стилей в файле style.css:

font-size: 12px; /* Размер текста */

font-family: Verdana, Arial; /* Шрифт текста */

text-align: center; /* Выравнивание */

font-weight: bold; /* Жирный текст */

color: #474746; /* Цвет текста */

margin: 0px 0px 0px 0px; /* Внешние отступы */

.p_checkbox {
    font-size: 12px;
    font-family: Verdana, Arial;
    text-align: center;
    font-weight: bold;
    color: #474746;
    margin: -5px 0px 0px 0px;
 }

Теперь возьмемся за кнопку "Отправить".

В файле sidebar.html добавим к ее элементу <input> имя класса, например, "input_sub2":

<input class="input_sub2" type="submit" name="submit" />

Надпись на кнопке "Отправить" предусмотрена по умолчанию, но при желании ее можно заменить на свою. Для этого элементу кнопки <input> в файле sidebar.html зададим атрибут value:

value="Свой текст" <!-- Изменить текст на кнопке -->

<input class="input_sub2" type="submit" name="submit" value="Получать на почту" />

Зададим свойства стиля для этой кнопки в файле style.css, чтобы изменить ее размер, форму, цвет:

width: 200px; /* Длинна поля */

height: 25px; /* Ширина поля */

border-radius: 15px; /* Закругление углов */

background: #819A32; /* Цвет кнопки */

color: #fdfaf2; /* Цвет надписи */

font-weight: bold; /* Жирный шрифт */

.input_sub2 {
    width: 200px;
    height: 25px;
    border-radius: 15px;
    background: #819A32;
    color: #fdfaf2;
    font-weight: bold;
 }

У кнопки тоже есть такой момент, что при нажатии вокруг нее появляется голубая обводка, рамка:

Чтобы этого не было, так же пропишем для нее свойство стиля outline:

outline: none; /* Убираем обводку (убираем фокус) */

.input_sub2 {
    width: 200px;
    height: 25px;
    border-radius: 15px;
    background: #819A32;
    color: #fdfaf2;
    font-weight: bold;
    outline: none;
 }

Теперь напишем работу эффекта, чтобы при нажатии на кнопку, она меняла цвета фона и текста.

Мы уже знакомились с псевдоклассом hover, когда делали эффект смены цвета в верхнем меню. Здесь тоже будем использовать его и еще псевдокласс active.

.input_sub2:hover - изменит цвет кнопки и текста при наведении на нее курсора;

.input_sub2:active - изменит цвет кнопки и текста в момент нажатия на нее.

Для hover пишем:

background: #e8fddf; /* Цвет кнопки при наведении курсора */

color: #474746; /* Цвет текста при наведении курсора */

.input_sub2:hover {
    background: #e8fddf;
    color: #474746;
 }

Для active пишем:

background: #ffffff; /* Цвет кнопки при нажатии на нее */

color: #872e2e; /* Цвет текста при нажатии на кнопку */

.input_sub2:active {
    background: #ffffff;
    color: #872e2e;
 }

И наконец, заключительный текст.

В файле sidebar.html после элемента кнопки отправления пишем:

<p  class="p_sub2">Не рассылаю спам,</p>
<p  class="p_sub2">не передаю данные третьим лицам.</p>

В файле style.css напишем свойства стилей для этого текста с именем класса "p_sub2":

font-size: 12px; /* Размер текста */

font-family: Verdana, Arial; /* Шрифт текста */

text-align: center; /* Выравнивание */

line-height: 1.5; /* Межстрочное расстояние */

color: #872e2e; /* Цвет текста */

margin: 0px 0px 0px 0px; /* Внешние отступы */

.p_sub2 {
    font-size: 12px;
    font-family: Verdana, Arial;
    text-align: center;
    line-height: 1.5;
    color: #872e2e;
    margin: 0px 0px 0px 0px;
 }

Внешняя часть формы подписки готова. Можно немножко уменьшить ее высоту, чтобы сделать меньше нижнее расстояние от текста до края формы. Сейчас она составляет 250px.

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


Файл sidebar.html:

Файл style.css, блок формы подписки:

Следующий шаг - Файл отправки данных из формы подписки на почту