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. Лиза:

    Спасибо большое за статью!

    Много подобных скриптов перепробовала и только ваш подошел и прост для изменения под себя. Только возникла такая проблема. Подскажите, пожалуйста, что нужно подправить, чтобы можно было делать две ссылки на два таких разных окна. Т.е. чтобы ссылки вели на разные контактные формы. У меня никак не получается 🙁

    Ответить
  2. Лиза:

    Вопрос снят. Проблема была в том, что я размещала код форм в разных файлах. Поместив в один, все заработало.

    Ответить
    • driver:

      Лиза. Спасибо за интерес к статье и я очень рад за вас, что все получилось. Часто так и происходит, решение находится на поверхности, всегда где то рядом.

      Удачи!

      Ответить
      • Николай:

        Здравствуйте я вот не пойму почему у меня не работает окно нажимаю на ссылку но ничего не происходит, может подскажете

        Ответить
        • driver:

          Здравствуйте Николай. Проверьте еще раз где вы разместили сам скрипт и путь к нему, правильно ли оформлена ссылка, она должна быть примерно такой <a class= rel="nofollow">poplight" rel="popup_contact" href="#?w=600">Контакты</a> В статье я уже, как только мог предельно просто и ясно все расписал пошагово. Возьмите за отправную точку демостраницу и по примеру встройте окно в любую вашу тестовую страницу. Да и в комментах много раз отвечал на подобные вопросы. Надеюсь все у вас получится.

          Удачи!

  3. Алексей:

    статейка очень помогла.

    Немного усовершенствовал -т.е. раскидал лишний вес.

    Папки со Стилями и изображениями поместил в папку plugins\modal_contact

    в файл Header.php через редактор внешнего вида поместил сылку

    (link rel="stylesheet" href="сылка на стиль" type="text/css" /) между тегами HEAD.

    Ява скрипт выше изложенный поместил в файл modal.js

    Блок для публикации который будет вставляться в страницы через редактор

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

    (div id="popup_contact" class="popup_block")

    ТУТ вставляем что угодно — я лично вставил ссылку на форму плагина «contact form7»

    (/div)

    (script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js")(/script)

    (script type="text/javascript" src="путь где размещается файл /modal.js") (/script)

    теги с ссылками на скрипты можно разметить так же в header.php между тегами head . а в блоке вставки их убрать.

    И все используй данную форточку где угодно и с чем угодно.

    Соответственно круглые скобки — это угловые скобки -для тех кто не догодался.

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

    Кхм. теги со ссылками на скрипты лучше разместить в файле footer.php (также через редактор) перед закрывающий тегом body. потому что указав в заголовке -скрипт не исполняется(по крайней мере у меня).

    Ответить
  5. Я начинающий, типа веб дезайнер. Ваш плагин скачал, прицепил к нему форму php, для почты. теперь у меня огромная проблема, как это все хозяйство связать с главной страницей, чтобы нажал на ссылку, допустим «обратная связь», а окно сразу и открылось, а то у меня получается — переходит сначала на страницу, с ссылкой, а потом уже с этой ссылки открывается модальное окно :(( я понимаю, что для кого то такой вопрос решить не проблема, но для меня это выше моего понимания, и хорошо бы еще сделать, чтобы с любой страницы, это окно открывалось, а все файлы его касающиеся, хранились бы в одном месте, это возможно?

    Ответить
    • driver:

      Здравствуйте Михаил.

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

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

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

      Прочитайте предыдущие комментарии, может вам подойдет решение Алексея. Удачи!

      Ответить
  6. ага, вроде что то начало получаться, но сегодня уже поздно, завтра попробую добить. у меня так получилось, потому что я сначала к Вашему index.html, подключил php, и у меня проблем возник, но теперь я все понял вроде. Отличная статья, огромное спасибо.

    Ответить
  7. Все, поставил, оказалось проще, чем я думал 🙂 Теперь вот другой проблем, в Вашем коде html 3 ошибки стр. 12, 62, 75 и 2 опасности стр. 56, 58 (если считать по Вашему исходнику), валидатор матерится, не знаю теперь, что и делать. Потому что Вы же наверное уже поняли, что я в этом деле отнюдь не дока 🙁

    Ответить
    • driver:

      Правильно Михаил, одна ошибка это ссылка на вызов формы в тегах заголовка h3 /h3, У ВАС ЭТОГО НЕТ так что, что за волнения? Типа две опасности увидел валидатор, просто в примере javascript прописан в подвале страницы, в чем конфликт не понял, поместите перед /head и спите спокойно. По остальным двум ошибкам даже обсуждать не хочется, с какого то перепуга валидатор не видит закрывающий тег >. И напоследок проверьте любую страницу Яши, сильно удивитесь. Думаю, во чтобы то ни стало подстраиваться под валидатор не обзяательно, главное, чтобы нормально отображалось в основных браузерах.

      Ответить
  8. Кстати, все могут полюбоваться этим прекрасным плагином в деле: phototops.ru (только на этой странице, на другие еще не поставил,см в самом низу в подвале — ссылка «Обратная связь», а если письмо отправите, получите сообщение, выдернутое из исходника взятом на russeller.com, так я соединил две работы мастеров в одну :))лучше всего он в Opera и Firefox отображается, и кстати в IE с последним обновлением тоже все отлично, а вот в Хроме не очень правильно, но тоже нормально.

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

    Ответить
  10. покритикую:

    статья конечно полезная для понимания методов работы. но моё мнение такое — я не очень то понимаю смысла в таком решении. ведь контент уже вписан в страницу — он просто не виден. это не уменьшает её веса. просто отображает когда надо. тут же можно запрос отправить и квери аякс догрузить в див какой то на странице...

    желания:

    например я сейчас 3 дня гуглю и не нашёл вот такое: например — на странице в коментах есть имя юзера написавшего комент, как ссылка. мне надо чтобы при наведении курсора на сылку выполнился запрос на сервер и в див под сылкой подгрузил ответ, там аватар, откуда юзер и маил сайт и тд. в див размером 200*200 и поверх страницы. убрал мышку блок исчез, навел он опять появился.

    ну как то так.

    (ваше поле раздвинул, так оно влезло под правую часть,

    вернуть не могу...)

    я в принципе сделал, но коряво чуть получилось.

    да и хотелось бы чтобы подгруженная один раз инфа

    не убиралась вообще а сохранялась гдето, чтобы

    снова запрос не выполнять, пока тупо убираю с экрана.

    вот сделайте такой урок и сотни юзеров будуд

    вам благодарны. да и известите мне на мыло.

    Ответить
  11. Нодир:

    Спасибо, прекрасный плагин.

    Проверял на кроссбраузерность — не пойму почему не хочет работать в IE8. Подскажите пожалуйста.

    Ответить
  12. Гена:

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

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

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