ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Модальное окно почтовой формы на jQuery

Модальное окно почтовой формы на jQuery

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

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

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

Изначально мы наблюдаем кнопку:

Где при клике появляется форма с затемнением по сторонам:

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

Установка:

HEAD

Код

HTML

Код

<div class="content">
<button class="show_otpravka_pisuma knopasuned" rel="otpravka_uposlaniye">Отправить письмо</button>
</div>
<div class="pochtovaya_otpravka"></div>
<div class="otpravka_pisuma" id="otpravka_uposlaniye">
  <div class="format_otpravku">
  <form action= "" method= "">
  <p>Имя: </p>
  <p><input type= "text" name= "name"></p>
  <p>E-mail: </p><p> <input type= "text" name= "email"></p>
  <p>Сообщение: </p>
  <p><textarea rows= "10" cols= "45" name= "message"></textarea></p>
  <input type= "submit" value= "Отправить">
  </form>
  </div>
  </div>

CSS

Код

button {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 0;
}

button:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

button:focus {
  outline: none !important
}

input, textarea {
  color: #7d7979;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
  background: #fff;
  font-size: 14px;
  margin: 0 0 8px;
  padding: 3px;
  width: 98%;
  line-height: 1.5;
  cursor: pointer;
}

input:focus {
  border-color: #757070;
  outline: none;
}

textarea:focus {
  border-color: #757070;
  outline: none;
}

.knopasuned {
  background-color: #3793d8;
  box-shadow: 0px 5px 0px 0px #266a9e;
}

.pochtovaya_otpravka {
  display:none;
  position:fixed;
  z-index: 999;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:#000;
  opacity:0.5;
}

.otpravka_pisuma {
  display: none;
  position: relative;
  z-index: 1000;
  margin:0 25% 0 25%;
  width:50%;
}

.format_otpravku {
  width: 100%;
  height: 100%;
  background-color: #e6e4e4;
  padding: 30px 28px;
}

Код

$('.show_otpravka_pisuma').click(function() { // Вызываем функцию по нажатию на кнопку
  var otpravka_pisuma_id = $('#' + $(this).attr("rel")); // Связываем rel и otpravka_pisuma_id
  $(otpravka_pisuma_id).show(); // Открываем окно
  $('.pochtovaya_otpravka').show(); // Открываем блок заднего фона
})
$('.pochtovaya_otpravka').click(function() { // Обрабатываем клик по заднему фону
  $('.pochtovaya_otpravka, .otpravka_pisuma').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})

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

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

Демонстрация

20 Мая 2020 Загрузок: 2 Просмотров: 1268 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0