Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Интеграция контактной формы в модальное окно

Интеграция контактной формы в модальное окно

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

Обновлено: 31.10.2014

У нас есть вполне приличная контактная форма, сверстанная на чистом , как заделать работоспособное модальное , мы тоже разобрались, теперь остается эти два механизма объединить в единый инструмент. Вот как раз этим интересным занятием, мы сейчас и займемся, для начала же, можете посмотреть пример того, что у нас получится:
 
Контактная форма в модальном окне

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

HTML

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

  • href #?w=600—  указывает ширину окна,
  • rel – уникальный атрибут  окна,
  • class="poplight" – класс для показа всплывающего окна.

Собрав все атрибуты воедино получим следующий вид ссылки:

<a class="poplight" rel="popup_contact" href="#?w=600">Контакты</a>

Затем нам необходимо создать встроенную разметку для всплывающего окна. Разместить можно в любом месте страницы, ну например в нижней части содержания. Обратите внимание, что идентификатор всплывающего окна соответствует атрибуту rel тега <a></a>. Это и будет связывать ссылку и всплывающее окно вместе.

Чтоб не нагружать вас излишним копанием в коде всей конструкции, в разметку окна, сразу встроил html код контактной формы:

<div id="popup_contact" class="popup_block">
     <div class="note">
         <img src="images/form/email.jpg" alt="Контакты" style="float:left;margin:5px 10px 5px 0; " />
	 <h1>Уважаемые друзья!</h1>
         <p>
          Обращаю Ваше внимание, что пункты отмеченные звездочкой, обязательны для заполнения.
         </p>
     </div>
     <form id="form" action="/" method="post">	
	   <fieldset>
		   <p class="first">
		      <label for="name">Имя *</label>
		     <input type="text" name="name" id="name" size="30" />
		  </p>
		  <p>
		     <label for="email">Email *</label>
		    <input type="text" name="email" id="email" size="30" />
		 </p>
		 <p>
		   <label for="web">Вебсайт (не обязательно)</label>
		   <input type="text" name="web" id="web" size="30" />
		</p>			
	  </fieldset>
	  <fieldset>																			
	      <p>
		<label for="message">Сообщение:</label>
		<textarea name="message" id="message" cols="30" rows="10"></textarea>
	     </p>								
	 </fieldset>					
	<p class="submit"><button type="submit">Отправить</button></p>						
    </form>
</div>

Как вы видите всплывающее окно, это div — контейнер с идентификатором popup_contact, который соответствует атрибуту rel в активирующей ссылке.
Останавливаться на разметке контактной формы не буду, так как ее макет полностью идентичен форме, о которой рассказывал в статье: Стиль контактной формы CSS.
На ряду с формой, добавил небольшой информационный блок div id="note" с изображением и текстовой шелухой ( пояснением к форме). При неуемном желании всегда сможете изменить, или полностью исключить содержание этого блока из состава всплывающего окна.

CSS

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

/*--Модальное окно--*/
.popup_block{
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 99999;
   display: none; /*--по умолчанию скрыт--*/
   float: left;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box; 
   box-sizing: content-box;
   padding: 15px;
   border: 10px solid #6e6e6e;
/*-- скругленные углы--*/
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background: #fff;
/*--тени для блока--*/
   -webkit-box-shadow: 0px 0px 20px #000;
   -moz-box-shadow: 0px 0px 20px #000;
   box-shadow: 0px 0px 20px #000;
   color: #000;
   font-size: .9em;
}
/*--Фиксированное позиционирование для тупого IE6--*/
*html #fade {
   position: absolute;
}
*html .popup_block {
   position: absolute;
}
/*--блок заголовка--*/
.note{
   margin:0 0 30px 0;
}
.note img{
   float:left;
   margin:5px 10px 5px 0;
   width: 100px;
   height: 100px;
}
.note h1{
   color: #008000;
   text-shadow: 0 1px 3px rgba(0,0,0,.3);
   font:24px Monotype Corsiva, Arial;      
}
/* формируем кнопку закрытия */
.close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    line-height: 20px;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
/*--крутим кнопку при наведении--*/
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}
/* контактная форма */
#form{
    overflow: hidden;
    margin: 0 auto;
    padding-top: 10px;
/* устанавливаем необходимую ширину формы в зависимости от дизайна
 ** форма отлично растягивается */
    width: 100%;
    border: 1px solid #D3D3D3;
/* закругляем углы */
    border-radius:8px;
    background: none repeat scroll 0 0 #FFFFFF;
/* добавляем тени для блока*/
    box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
    text-align: left;
}
/* формируем элементы внутри формы */
#form fieldset{
    display:inline;
    float:left;
    margin:0;
    margin-left:26px;
    padding:0;
    width: 42%;
    border:none;	
}		 
#form p{
    margin:.5em 0;
}
/* подписи к полям ввода */	
#form label{
    display:block;
    margin-bottom:1px;
    color:#5B5B5B;
}	
#form input, #form textarea{
    padding:3px;
/* отключаем бордюры у инпутов и текстового поля */
    border: none;
/* закругляем углы полей ввода */
    -webkit-border-radius:.3em;
    -moz-border-radius:.3em;
    border-radius:.3em;		
    background-color: #F7F7F7;
/* добавляем внутренние тени у инпутов и текстового поля */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
    color: #5B5B5B;
    font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
}
#form input {
/* устанавливаем ширину инпутов */
   width:90%;
}
/* изменяем оформление полей ввода при фокусе */
#form input:focus, #form textarea:focus {
  background: #F2F2F2;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
  color: #333;
}
#form textarea{
    overflow:auto;
    width:100%;
/* устанавливаем ширину текстового поля */
    height:120px;
}
/* формируем нижний сектор формы */					
#form p.submit{
    clear:both;
    margin:0;
    padding: 10px 25px 20px;
    text-align:right;
}
/* оформляем кнопку отправки */	
#form button{
/* устанавливаем необходимую ширину кнопки */
    border: solid 1px #2f96b4;
/* закругляем углы кнопки */
    border-radius: 5px;
    background-color: #49AFCD;
/* градиентная заливка для современных браузеров */	
    background-image:-moz-linear-gradient(center top , #5BC0DE, #2F96B4);
    background-image: -webkit-linear-gradient(center top, #5bc0de, #2f96b4);
    background-image: -ms-linear-gradient(#5bc0de, #2f96b4);
    background-image:-o-linear-gradient(center top , #5BC0DE, #2F96B4);
/* добавляем внешние тени */
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    color:#fff;
    padding:0 12px;
    text-align:center;
    line-height:28px;
/* градиент для IE6-9 */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#5BC0DE', EndColorStr='#2F96B4', GradientType=0); 
    cursor:pointer;
}
/* изменяем оформление кнопки при наведении */
#form button:hover {
    border-color: #2C8BA5;
    box-shadow: none;
}
/* изменяем оформление кнопки при нажатии */
#form button:active {
    border-bottom: 1px solid #5BC0DE;
    background-image:-moz-linear-gradient(#2F96B4, #5BC0DE); /* Firefox */
    background-image: -webkit-linear-gradient(#2F96B4, #5BC0DE); /* Chrome, Safari */
    background-image: -ms-linear-gradient(#2F96B4, #5BC0DE); /* IE-10 */
    background-image:-o-linear-gradient(#2F96B4, #5BC0DE); /* Opera */
/* добавляем внутренние тени */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
/* градиент для IE6-9 */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2F96B4', EndColorStr='#5BC0DE', GradientType=0);
}
/* конец формы */

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

Подключение JQuery

С разметкой, оформлением модального окна и контактной формы мы разобрались. Теперь, чтобы все это хозяйство заработало, необходимо воспользоваться магией JQuery, подключив плагин к документу. В начале документа между тегами <head>...</head>, или же в подвале страницы, перед закрывающем тегом </body> пропишите следующее:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/dm-modal.js"></script>

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

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

126 комментариев
  1. Eli:

    Max, используйте ajax для проверки полей. Тогда можно сделать, чтоб форма не отправлялась, пока не будет заполнена правильно. Я пользуюсь этим скриптом livevalidation.com

    Ответить
  2. Роман:

    Всё-таки, как сделать чтобы после нажатия кнопки «Отправить» , форма не закрывалась а сменялась надписью "Благодарим за отправку сообщения , мы свяжемся с вами и самозакрывалась по истечении 3 секунд либо выводила кнопку ОК которая закрывала бы форму.

    В идеале бы после нажатия отправить выводился прогресс бар с процентам до завершения отправки.

    Ответить
    • driver:

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

      Ответить
  3. Андрей:

    Добрый день. Уже два дня пытаюсь все это прикрутить к WordPress. НИчего не выходит. Стили подключил в head (Убрав в css дисплай нон все отображается ок). Но прикрутив js нажав на кнопку окно не открывается.

    Ответить
    • driver:

      Доброго времени суток.

      В WordPress по умолчанию подключается jQuery последней версии, плагин модального окна построен на версии 1.4.1, отсюда конфликт и в итоге не работающая форма. Сейчас работаю чтобы исправить, а пока можете попробовать подключить:

      <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

      или же как вариант использовать мод.форму без js на чистом CSS

      Ответить
  4. driver:

    Плагин обновил, работает с актуальными версиями jQuery

    Проверьте правильность подключения рабочих файлов, тестировал на wp 4.1, работает)))

    Ответить
  5. Женя:

    У меня наверное лыжи совсем не едут. А куда эта форма отправляет сообщение пользователя?

    Ответить
    • Женя:

      Преждевременно вопрос задал) Тут в комментариях это уже обсуждалось, извините. Правда я так и не понял как именно скрипт отправки почты прикрутить к оболочке контактной формы(

      Ответить
      • Женя:

        Я разобрался. Может кому будет полезно.

        Изменения надо внести вот в эту часть кода

        <form id="form" action="send.php" method="post">

        Жирным я выделил название своего скрипта, у вас он может называться по другому.

        Ну и самый простой скрипт (тот самый который я назвал send.php):

        <?php

        $name = isset ($_POST['name'])?$_POST['name']:'';

        $email = isset ($_POST['email'])?$_POST['email']:'';

        $message = isset ($_POST['message'])?$_POST['message']:'';

        $address = 'ВАША ПОЧТА';

        $sub = "Сообщение";

        $mes = "Автор назвался: $name \nУказал свой адрес: $email \nТекст письма: $message";

        $verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");

        if ($verify == 'true')

        {

        echo "Ок";

        }

        else

        {

        echo «Нe ok»;

        }

        ?>

        Ответить
        • driver:

          Спасибо Женя)) У нас как всегда, сначала вопрос зададим, потом быстро на него сами же и ответим)))

  6. Формочку адаптировала под свой дизайн. Красота получилась, ну просто «Версаль»! Решила протестировать — после заполнение полей и нажатия кнопки «отправить» появляется белый экран и больше ничего не происходит. Файл send.php как у Жени в комментариях я сделала и выложила в корень сайта, свой e-mail в файле прописала. Может быть откроете великую тайну — как эту красоту реализовать полностью до конца?

    Я художник и очень много времени потратила на создание сайта. Реализовала все о чем мечтала, кроме модального окна с формой обратной связи... Помогите пожалуйста.

    Ответить
    • driver:

      Анастасия,

      Скинул вам на мыло архив с обработчиком и небольшой инструкцией.

      Ответить
    • NeedHate:

      Анастасия, покажите Версаль захудалым селянам! )

      Ответить
  7. Дмитрий:

    Анастасия, у вас делается проброс на пустой (не существующий) обработчик. Данная форма- это всего лишь макет, для того чтобы он у вас заработал- нужно использовать обработчик. Как вариант могу предложить вот этот вариант: ruseller.com

    Ответить
  8. Андрей, спасибо Вам огромное за помощь! Теперь все получилось, ну просто дух захватывает, как здоровско! Сожалею, что не могу словами выразить все те восторженные чувства которые испытываю сейчас! Восхищаюсь вашей профессией, программисты для меня — просто БОГИ!!!

    Ответить
  9. Марина:

    Добрый день!

    У меня не работает никак. И html, и css, и js залила, прописала. Что я делаю не так? Даже форма по нажатюю не появляется

    Ссылка «нажми меняя»: shik34.ru

    Ответить
    • driver:

      День добрый!

      И не будет работать, у вас отсутствует div-контейнер модального окна с формой (см. раздел HTML в уроке). Пропишите блок модального окна сразу после тега <body> или перед закрывающим тегом </body> В Drupal 7

      работаете с файлом page.tpl.php

      Ответить
  10. Александр:

    Андрей, здравствуйте.

    Помогите, пожалуйста. Подскажите как изменить стиль написания и текст кнопки «Отправить»?

    Все остальное я подкорректировал в CSS, а это не могу.

    У вас в html только это,

    <p class="submit"><button type="submit">Send</button></p>

    а в css по классу submit ничего нет. Я пробовал добавить свойства, но белый цвет надписи и шрифт не меняется.

    Заранее спасибо!

    Ответить
    • Александр:

      Упс... разобрался)))

      Ответить
      • driver:

        Очень рад за вас))

        Ответить
        • Александр:

          Большое спасибо, Андрей, за ваш блог! У вас тут так круто))) То, что кажется сложным, решается за минуты. Все с чувством, с толком, с расстановкой...) Вы молодец!

  11. Сергей:

    Добрый день!

    Спасибо за подробный урок. Все сделал. Работает. Для отправки использую файл mail.php.

    Письма приходят, но с кодировкой проблемы. Приходят иероглифы 🙁 А еще хотелось бы, чтобы форма после нажатия на кнопку закрывалась. А сейчас просто показывает «Спасибо» и тоже иероглифами.

    Спасибо!!!

    Ответить
    • driver:

      Здравствуйте, Сергей.

      По поводу кодировок, перво на перво проверьте кодировку ваших файлов, формы и самого файла mail.php, вдруг файл-обработчик на серваке у вас лежит в кодировке ANSI (Windows-1251), а общая кодировка вашего сайта UTF-8. Если так, то преобразуйте с помощью того же Notepad++ в UTF-8 без BOM, например. Не поможет, тогда копайте в сторону функций скрипта обработчика, в частности функции отправки сообщения, в которой указывается(если указана) явная кодировка, что-то типа:

      "Content-type: text/html; charset=\"utf-8\"";

      Но скорее всего, судя по тому, что сообщение после удачной отправки, выводится в битой кодировке, проблема всё же в несоответствии кодировок самих файлов.

      Что касается закрытия окна после нажатия кнопки «Отправить», достаточно внести изменения в dm-modal.js. Найдите строку

      $(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону...

      и добавьте селектор css с нашей кнопой #form button к событию по клику, получится должно следующее:

      $(document).on('click', 'a.close, #fade, #form button', function() { //закрытие по клику вне окна, т.е. по фону...

      Комментарии в фрагменты кода включил для лучшей ориентации))) Если всё сделаете правильно, всё должно сработать в лучшем виде, хотя как поведёт себя ваш обработчик, сможете увидеть только на деле.

      Ответить
  12. Сергей:

    Огромное спасибо! Проблема действительно была в том, что php файл был в другой кодировке. Поменял и письмо пришло уже с русскими буквами!

    Что касается закрытия формы после отправки: добавил #form button в нужное место в коде. Спасибо за детальные пояснения! Все заработало! Форма закрывается после нажатия на кнопку. Но письма приходить перестали 🙁 В чем может быть дело?

    Спасибо!!!

    Ответить
    • driver:

      Здравствуйте, Сергей.

      Трудно в слепую строить догадки, но скорее всего письма перестали отправляться из за того, что наделив кнопку отправки функцией закрытия окна, прервали завершение полного цикла обработчика. Сообщение об успешной отправке(«Спасибо»), я так понимаю, тоже не выводится?

      Что могу посоветовать? Да хз, логично сделать задержку перед закрытием. Всё там же в dm-modal.js, прямо перед .fadeOut пропишите .delay(3000), задержка будет равна трём секундам. Не прокатит, попробуйте увеличить интервал до 5 секунд(5000), хотя это уже какая-то галиматья получается. Ещё, как вариант, можете вовсе исключить из обработчика функцию вывода сообщения об отправке, тупо её закомментировав.

      Попытки лечить больного не видя его, чаще всего не дают результата. Так что извиняйте)).

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru