ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Контактная форма связи на HTML и CSS3

Контактная форма связи на HTML и CSS3

Удивительную контактная форма связи, которая выполнена в оригинальном стиле на CSS и jQuery, где имеет адаптивную верстку на мобильные аппараты. Безусловно не один сайт или блог не может идти без обратного общение, здесь главное как его представить в форменном дизайне. Это оставить по умолчанию или поставить свой оригинальный стиль, чтоб соответствовал основному дизайну и безусловно тематике сайта.

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

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

Так смотрится при открытие страницы с формой:

Контактная форма обратной связи для сайта

Установочный процесс:

HTML

Код

<section id="kontaktnaya-forma">
  <h1>Свяжитесь со мной</h1>

  <form>
  <div class="kadiagama name-box">
  <input type="text" id="name" placeholder="Кто ты?"/>
  <label for="name">Имя</label>
  </div>

  <div class="kadiagama email-box">
  <input type="text" id="email" placeholder="kosten@email.com"/>
  <label for="email">Email</label>
  </div>

  <div class="kadiagama msg-box">
  <textarea id="msg" rows="4" placeholder="Your message goes here..."/></textarea>
  <label for="msg">Сообщение</label>
  </div>

  <input class="button" type="submit" value="Отправить" />
  </form>
</section>

CSS

Код

body section {
  background: #847d7d;
  margin: 60px auto 120px;
  border-top: 15px solid #082942;
  text-align: center;
  padding: 50px 0 110px;
  width: 80%;
  max-width: 1100px;
}
body section h1 {
  margin-bottom: 35px;
  font-size: 28px;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  color: #eeefc8;
}
form {
  width: 58%;
  margin: 0 auto;
}
form .kadiagama {
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}
form .kadiagama label {
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  background: #0e273a;
  width: 100%;
  padding: 18px 0;
  font-size: 15px;
  letter-spacing: 0.080em;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .kadiagama label + span {
  font-family: 'SSStandard';
  opacity: 0;
  color: white;
  display: block;
  position: absolute;
  top: 12px;
  left: 7%;
  font-size: 2.5em;
  text-shadow: 1px 2px 0 #cd6302;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .kadiagama input[type="text"],
form .kadiagama textarea {
  border: none;
  background: #E8E9EA;
  width: 80.5%;
  margin: 0;
  padding: 18px 0;
  padding-left: 19.5%;
  color: #002038;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
form .kadiagama input[type="text"]#msg,
form .kadiagama textarea#msg {
  height: 18px;
  resize: none;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form .kadiagama input[type="text"]:focus, form .kadiagama input[type="text"].focused,
form .kadiagama textarea:focus,
form .kadiagama textarea.focused {
  outline: none;
}
form .kadiagama input[type="text"]:focus#msg, form .kadiagama input[type="text"].focused#msg,
form .kadiagama textarea:focus#msg,
form .kadiagama textarea.focused#msg {
  padding-bottom: 150px;
}
form .kadiagama input[type="text"]:focus + label, form .kadiagama input[type="text"].focused + label,
form .kadiagama textarea:focus + label,
form .kadiagama textarea.focused + label {
  width: 18%;
  background: #f79600;
  color: #002038;
}
form .kadiagama input[type="text"].focused + label,
form .kadiagama textarea.focused + label {
  color: #f79600;
}
form .kadiagama:hover label {
  width: 18%;
  background: #002038;
  color: white;
}
form input[type="submit"] {
  background: #f79600;
  color: white;
  -webkit-appearance: none;
  border: none;
  text-transform: uppercase;
  position: relative;
  padding: 13px 50px;
  font-size: 1.4em;
  letter-spacing: 0.1em;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  -o-transition: all 333ms ease-in-out;
  -ms-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
}
form input[type="submit"]:hover {
  background: #002038;
  color: #f79600;
}
form input[type="submit"]:focus {
  outline: none;
  background: #cd6302;
}
@media (max-width:765px) {
  form {
  width: 100%;
  }
  body section {
  width: 100%;
  }
}

Код

$('textarea').blur(function () {
  $('#kontaktnaya-forma textarea').each(function () {
  $this = $(this);
  if ( this.value != '' ) {
  $this.addClass('focused');
  $('textarea + label + span').css({'opacity': 1});
  }
  else {
  $this.removeClass('focused');
  $('textarea + label + span').css({'opacity': 0});
  }
  });
});

$('#kontaktnaya-forma .kadiagama:first-child input').blur(function () {
  $('#kontaktnaya-forma .kadiagama:first-child input').each(function () {
  $this = $(this);
  if ( this.value != '' ) {
  $this.addClass('focused');
  $('.kadiagama:first-child input + label + span').css({'opacity': 1});
  }
  else {
  $this.removeClass('focused');
  $('.kadiagama:first-child input + label + span').css({'opacity': 0});
  }
  });
});

$('#kontaktnaya-forma .kadiagama:nth-child(2) input').blur(function () {
  $('#kontaktnaya-forma .kadiagama:nth-child(2) input').each(function () {
  $this = $(this);
  if ( this.value != '' ) {
  $this.addClass('focused');
  $('.kadiagama:nth-child(2) input + label + span').css({'opacity': 1});
  }
  else {
  $this.removeClass('focused');
  $('.kadiagama:nth-child(2) input + label + span').css({'opacity': 0});
  }
  });
});

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

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

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

Видео обзор:

Теперь вы успешно создали HTML контактную форму с отзывчивый дизайн при помощи CSS.

23 Сентября 2019 Загрузок: 1 Просмотров: 1380 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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