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. Тимур Кадыров:

    спасибо за терпение разобрался)

    Ответить
    • driver:

      Тимур. Очень рад за вас, надеюсь что все получилось и работает. Когда все настроите, можете прописать в комментарии ссылку на ваш проект.

      Удачи!

      Ответить
  2. Виталий:

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

    Ответить
    • driver:

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

      В комментариях выше есть ответы, почти на все ваши вопросы.

      Удачи!

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

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

    Дело в том, что у меня сайт на движке php. Со стилями — проблемы нет — все прописал. Проблема в том как правильно подключить JQuery со скриптом. Подключение всех скриптов у меня находится в header.tpl. Там уже куча ссылок на скрипты. Если я там же добавляю то, что советуете Вы (начиная с ) и заканчивая return false;

    });) — то сайт вообще перестает работать. Я думаю, что этот скрипт нужно подключить иначе. Но как? Буду очень признателен за подсказку.

    Ответить
    • driver:

      Здравствуйте Александр. Спасибо за оценку статьи. Думается мне, что вы прямо на странице header.tpl вставляете тело скрипта. Необходимо вписывать в .

      Моя оплошность, не указал в статье, в примере кода эту деталь, думал очевидно, исправил, теперь более понятно.

      Так же, ничего не мешает создать отдельный файл javascript, обозвать его, например: winmodal.js, поместить его туда где у вас находятся js, и уже непосредственно на странице header.tpl правильно прописать путь до него типа: .

      Удачи! Заходите почаще.

      Ответить
  4. Юлия:

    Добрый день!

    Настроила все как и описывали, но не работает отправка сообщений.

    Точнее так: когда форма открывается в модальном оке, сообщения НЕ отправляются.

    Когда форма открывается в новом оке, сообщения отправляются нормально.

    В чем может быть ошибка?

    Ответить
    • driver:

      День добрый или вечер!

      Юлия, если я вас правильно понял письма отправляются только тогда когда форма размещена вне модального окна , а на отдельной странице контактов. Php обработчик (скрипт) у вас привязан скорее к стандартной странице контактов. Нам же требуется связать обработчик php с формой в модальном окне, то есть правильно прописать путь до исполняемого файла. Если исходить из html разметки формы, примерно так, на вскидку кусок кода для примера:

      <form method="post" action="php/mailto.php" id="form"></form>

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

      Удачи!

      Ответить
  5. Юлия:

    Добрый вечер. Все так и сделала. Файл лежит в той же папке, что и файл, где прописан код

    К примеру, в папке Main лежит send.php и файл index.php

    Ответить
    • driver:

      Например каркас модального окна с контактной формой прописан в файле index.php (может header.php, что в принципе чаще всего в случае с wordpress) тогда наверное так:

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

      В некоторых случаях приходится писать полный путь вида:

      <form method="post" action="http://ваш сайт/main/send.php" id="form"></form>

      Ответить
      • Юлия:

        Огромное спасибо! Все все работает) — прописала полный путь к файлу аж через http://sire.com/wp-content/themes/тема/send.php

        п.с. Ваш скрипт самый лучший!

        Ответить
        • driver:

          Я рад за вас Юлия:-) Заглядывайте на огонек;)

        • Юлия:

          и снова я. Добрый день!

          пришлось вновь делать форму, и теперь при отправке сразу пишет: Ваше письмо не доставлено. Повторите отправку немного позже! Вернуться назад".

          получается файл send.php видит, т.к. сообщение подтягивается из него, но не обрабатывает отправку.

          Помогите, пожалуйста.

          Спасибо

        • driver:

          Вечер добрый Юлия.

          Для начала найдите и проверьте в файле send.php строку $address = «ваша почта@mail.ru»; — это тот емаил на который должна уходить почта.

          проверьте что находится в переменных: $address, $subject, $message перед отправкой письма mail ()

        • Юлия:

          все указано верно ;(

          а может быть проблема в кодировке?

  6. driver:

    Юлия

    Что то вроде этого:

    $subject = '=?windows-1251?B?'.base64_encode($subject).'?=';

    или:

    $mymail,$topic,$message,"Content-type:text/plain;charset = UTF-8\r\n"

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

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

    Скрипт сам не чего не отправляет, он «просит» отправить одну из служб на сервере, например, sendmail, отправить письмо. Так вот скрипту нужно сказать, «кого просить», при условии, что хостер предоставляет такую возможность

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

    а как в Joomla такое осуществить?

    Ответить
    • driver:

      Дмитрий.

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

      Ответить
      • Дмитрий:

        у меня вот так все выходит

        что я делаю не так?

        Ответить
        • driver:

          На скрине я не вижу оформления самой формы, т.е. форма то есть, а стилизация отсутствует, скорее всего копать надо в сторону CSS.

  8. Дмитрий:

    размещаю как html у меня все в одной строке (( что делать? подскажите пожалуйста

    Ответить
    • driver:

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

      Удачи!

      Ответить
      • Дмитрий:

        Спасибо буду пробовать , хотя вроде все делал правильно , расписано и вправду все подробно и понятно . Попробую.

        Ответить
        • Дмитрий:

          К сожалению так и не получилось загнать в Joomla, если у кого получится отпишитесь пожалуйста , очень интересно .

  9. Александр:

    Добрый день. Не подскажите, как сделать так, чтобы при нажатии на кнопку «Отправить» модальное окно не закрывалось? Просто у меня в этой же форме выводятся некоторые данные после отправки сообщения.

    Ответить
  10. Помогите поставить эту форму. Я что то не понимаю (не практики со скриптами). Какие файлы нужно создать? У меня WP. В heder.php я подключил скрипт, скачал файлы и залил в корень шаблона но не работает. То что вы в посте приводите коды в какие их файлы вставлять. Я только в style.css в конце вставил код стилей и последний код из поста я вставил в heder.php перед скрипт. А предыдущий код на div куда вставлять? Как сделать что бы заработало?

    Ответить
    • driver:

      В начале документа между тегами <head> и </head>(header.php), или же в подвале темы (файл footer.php), перед закрывающем тегом /body подключите JQuery, код показан в статье , в разделе подключение JQuery. В CSS правильно укажите путь до файлов изображений модального окна и формы обратной связи. Div контейнер окна с формой, можно вставить и в footer.php, и в header.php после тега body, а так же в отдельной записи single.php. Во всех вариантах, при правильном подключении всех рабочих файлов и ссылки на вызов модального окна, все будет работать в лучшем виде.

      скачал файлы и залил в корень шаблона

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

      Еще раз внимательно изучите урок, прочитайте другие комментарии. Надеюсь все у вас получится. Удачи!

      Ответить
  11. Антон:

    Спасибо за материал,

    скажите как сделать так, чтобы форма появлялась через определенное время после загрузки страницы?

    Ответить
    • driver:

      Здравствуйте Антон.

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

      Готовлю материал именно на эту тему, а пока посмотрите Демо из будущей статьи. Если это оно)))), следите за обновлениями блога!

      Ответить
  12. Алексей:

    Здравствуйте.

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

    Ответить
    • driver:

      Здравствуйте, Алексей.

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

      < ?php include "ваш файл.php"; ?>

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

      Удачи!

      Ответить
      • Алексей:

        Спасибо, разобрался. Если что, можно увидеть вашу форму у меня на сайте через вкладку «Обратная связь».

        Хотел узнать, немного не по теме, но не знаю больше к кому обратиться.

        У меня много цсс файлов (css3) и сам шаблон html5, но в разных браузерах по разному отображается, можно ли интегрировать под все одинаково, вот 2 страницы:

        1) bon4.ru/tennis/arenda.html (в опере отображается нормально, в гугле строка заголовка уезжает вправо)

        2) bon4.ru/tennis (в обоих браузерах нормально отображается)

        В чем может быть проблема, чтобы каждый код в css не перебирать?

        Заранее благодарен

        Ответить
        • Алексей:

          И еще в опере иконки поворачиваются вправо/влево, а в гугле нет =(

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

Отправляя к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