Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
Форма обратной связи в модальном окне

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

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

Такие окна, появляющиеся при клике по какому-либо элементу страницы, то есть по желанию посетителя, стали неотъемлимой частью структуры большинства сайтов. Время раздражающих попапов с различной рекламой уже прошло и современные всплывающие окна используются в дизайне "по уму". Они появляются лишь по вызову посетителя и открывают нужную ему дополнительную информацию.

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

Реализовать модальное окно на своем сайте можно как на чистом CSS, так и с помощью скриптов. Сегодня мы рассмотрим первый вариант, когда для установки всплывающего окна с формой обратной связи потребуется лишь вставить в тело страницы определенный html-код и подключить стили css.

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



ПОДРОБНЕЕ

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

Шаг 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. Подписчики в этом выпуске рассылки бесплатно получат большой набор кнопок, идеально подходящий для создания ховер-эффекта. Именно оттуда я взяла кнопки для примера.

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

Не забудь заглянуть в свою почту и подтвердить подписку!