Как реализовать такое же на своем сайте? Как раз это мы с вами и рассмотрим дальше. Установка формы обратной связи не сложна, следуйте пошаговому описанию и у вас все получится!
Шаг 1. Распаковка архива. В архиве вы найдете папку с изображениями, файл стилей и скрипт-обработчик. Код для вставки я размещу ниже на странице.
Шаг 2. Подготовка изображений. В папке Images находятся исходные изображения, которые я использовала для данной формы: это фон, кнопка "Закрыть" и две кнопки для вызова формы. Две кнопки для вызова я использовала лишь для того, чтобы создать ховер-эффект, о котором мы говорили в прошлом материале.
Вместо исходных изображений вы можете использовать любые свои, главное, чтобы они были формата png и такого же размера как исходные, иначе вам в файл стилей придется вносить поправки. Да и названия желательно оставить прежними по той же причине.
После того, как подготовите свои изображения, закиньте их в папку images вместо исходных, т.е. замените. Кого устраивает мой вариант, этот шаг могут пропустить.
Шаг 3. Редактирование стилей. Этот шаг необязательный. Но если вам нужно изменить в форме цвет заголовка, надписей над полями, тогда открываете файл стилей любым продвинутым Блокнотом и вносите нужные поправки, после чего сохраняете изменения.
Также в обработчике (send.php) в блоке "Формируем сообщение" находите строку, где прописан мой эл.адрес admin@sayt-s-nulya.ru и заменяете на свой адрес. Указывайте рабочий email, так как именно на него вам будут приходить сообщения из формы. Сохраняете файл с изменениями.
Шаг 4. Загрузка файлов формы на сервер. Теперь, когда готовы изображения и подредактирован файл стилей, загружаем все содержимое архива на сервер, в корневую директорию сайта. Я, например, для файлов формы создала на сервере отдельную папку, назвав ее forma_modal.
Шаг 5. Подключение стилей и кода формы. Чтобы подключить стили, на странице между тегами <head> и </head> прописываем единственную строку кода:
<link rel="stylesheet" href="forma_modal/okno.css">
В этой строке указываете правильный путь к файлу стилей. Если вы дали папке такое же название, как и у меня, то ничего менять не нужно. Осталось разместить лишь html-код самой формы, приведенный ниже. Копируете его и вставляете на страницу сайта между тегами <body> и </body> там, где хотите видеть кнопку для вызова формы.
<center>
<div id="parent_popup">
<div id="popupup">
<div id="close" style="cursor: pointer;" onclick="document.getElementById('parent_popup').style.display='none';"></div>
<p style='text-align: center;' class='contact-title'>Написать письмо</p>
<form action="send.php" method="post">
<table align="center" style="margin-top: 5px;" border="0">
<tbody><tr>
<td class="lable">*Ваше имя:<br>
<input name="name" size="45" maxlength="15" class="input" type="text" title="Только русские буквы!"></td></tr>
<tr><td></td></tr>
<tr><td class="lable">*Ваш e-mail:<br>
<input name="email" size="45" maxlength="30" class="input" type="text" title="Ваш действующий e-mal"></td></tr>
<tr><td></td></tr>
<tr><td class="lable">*Сообщение:<br>
<textarea name="text_message" cols="46" rows="11" class="input"></textarea></td></tr>
<tr><td> </td></tr>
<tr><td align="center"><input name="mail_submit" type="submit" value="Отправить сообщение"></td></tr>
</tbody></table></form></p>
</div>
</div>
<a href="#" class="images" onclick="document.getElementById('parent_popup').style.display='block';"></a></center>
Если вместо кнопки вы хотите поставить обычную текстовую ссылку, то последнюю строку кода замените этой строчкой:
<a href="#" onclick="document.getElementById('parent_popup').style.display='block';">Написать письмо</a></center>
На этом установка формы обратной связи в модальном окне завершена. Рабочий пример можно посмотреть на этой странице. Для наглядности я сделала вызов формы с помощью кнопки и рядом с помощью обычной ссылки. Выбирайте любой подходящий вариант.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат большой набор кнопок, идеально подходящий для создания ховер-эффекта. Именно оттуда я взяла кнопки для примера.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!