« Адаптивная форма обратной связи на CSS, HTML и JS »

Описание материала:

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

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

Если вы хотите увидеть форму, как она выглядит на самом деле, то перейдите по ссылке Демонстрация, она будет находиться после всего описания к данному материалу.

HTML код:

Код

<div class="ufive-feedback">
  <section id="feedback">
  <h1>Форма обратной связи</h1>
  <form>

  <div class="field name-box">
  <input type="text" id="name" placeholder="Как Вас зовут?" />
  <label for="name">Имя</label>
  </div>

  <div class="field email-box">
  <input type="text" id="email" placeholder="Ваш e-mail адрес" />
  <label for="email">E-mail</label>
  </div>

  <div class="field msg-box">
  <textarea id="msg" rows="4" placeholder="Излагайте ваш вопрос четко и подробно" /></textarea>
  <label for="msg">Текст</label>
  </div>

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

  </form>
  </section>
</div>

CSS код:

Код

@import url("https://fonts.googleapis.com/css2?family=Exo+2&display=swap");

.ufive-feedback {
  font-size: 62.5%;
  font-family: "Exo 2", sans-serif;
  font-weight: 600;
}

.ufive-feedback section {
  background: #eee;
  margin: 60px auto 120px;
  border-top: 15px solid #393939;
  text-align: center;
  padding: 50px 0 110px;
  width: 80%;
  max-width: 1100px;
}

.ufive-feedback section h1 {
  margin-bottom: 40px;
  font-size: 4em;
  text-transform: uppercase;
  font-family: "Exo 2", sans-serif;
  font-weight: 400;
  color: #393939;
}

.ufive-feedback form {
  width: 58.3333333333%;
  margin: 0 auto;
  color: #f3be81;
}

.ufive-feedback form .field {
  width: 100%;
  position: relative;
  margin-bottom: 15px;
  color: #f3be81;
}

.ufive-feedback form .field label {
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  background: #393939;
  width: 100%;
  padding: 18px 0;
  font-size: 1.45em;
  letter-spacing: 0.075em;
  -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;
}

.ufive-feedback form .field label + span {
  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;
}

.ufive-feedback form .field input[type="text"],
form .field textarea {
  border: none;
  background: #393939;
  width: 80.5%;
  font-family: "Exo 2", sans-serif;
  margin: 0;
  padding: 18px 0;
  padding-left: 19.5%;
  color: #fff;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ufive-feedback form .field input[type="text"]#msg,
form .field textarea#msg {
  height: 12px;
  resize: none;
  font-size: 10px;
  font-family: "Exo 2", sans-serif;
  -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;
}

.ufive-feedback form .field input[type="text"]:focus,
form .field input[type="text"].focused,
form .field textarea:focus,
form .field textarea.focused {
  outline: none;
  color: #f3be81;
  font-family: "Exo 2", sans-serif;
}

.ufive-feedback form .field input[type="text"]:focus#msg,
form .field input[type="text"].focused#msg,
form .field textarea:focus#msg,
form .field textarea.focused#msg {
  padding-bottom: 150px;
  font-size: 10px;
  font-family: "Exo 2", sans-serif;
}

.ufive-feedback form .field input[type="text"]:focus + label,
form .field input[type="text"].focused + label,
form .field textarea:focus + label,
form .field textarea.focused + label {
  width: 18%;
  background: #393939;
  color: #fff;
}

.ufive-feedback form .field input[type="text"].focused + label,
form .field textarea.focused + label {
  color: #fff;
}

.ufive-feedback form .field:hover label {
  width: 18%;
  background: #f3be81;
  color: #393939;
}

.ufive-feedback form input[type="submit"] {
  background: #f3be81;
  color: #393939;
  -webkit-appearance: none;
  border: none;
  text-transform: uppercase;
  position: relative;
  padding: 13px 50px;
  font-size: 1.4em;
  letter-spacing: 0.1em;
  font-family: "Exo 2", sans-serif;
  font-weight: 300;
  cursor: pointer;
  -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;
}

.ufive-feedback form input[type="submit"]:hover {
  background: #393939;
  color: #f3be81;
}

.ufive-feedback form input[type="submit"]:focus {
  outline: none;
  background: #f3be81;
  color: #393939;
}

@media (max-width: 765px) {
  .ufive-feedback form {
  width: 100%;
  }

  .ufive-feedback section {
  width: 100%;
  }
}

JS код:

Код

$("textarea").blur(function () {
  $("#feedback 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 });
  }
  });
});

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

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

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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Формы | Просмотров: 1521

Теги к материалу: css, форма обратной связи, html, JS, Адаптивная форма

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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

uFive.Ru

« Адаптивная форма обратной связи на CSS, HTML и JS »