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

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

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

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

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

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

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

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

Приступаем к установке:

HTML

Код

<div class="kectiveneb-mesignakes">
  <div class="getukolas-verading">
  <div class="derstana-kodeas">
  <div class="demikolpasika"></div>
  </div>
  <div class="consan-dotemen">
  <h1>Zornet.Ru<span>Администратор <i>&</i>Kosten</span></h1>
  <ul>
  <li>+7-764-297-34-93</li>
  <li>Kosten@email.com</li>
  <li>Zornet.Ru</li>
  </ul>
  </div>
  </div>
  </div>

CSS

Код

.kectiveneb-mesignakes {
  width: 595px;
  height: 337px;
  margin: 0 auto;
  position: relative;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
  -moz-transform: perspective(1400px);
  -ms-transform: perspective(1400px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective-origin: right;
  -moz-perspective-origin: right;
  perspective-origin: right;
}
.getukolas-verading {
  width: 595px;
  height: 337px;
  box-shadow: 0 30px 60px 0 rgba(16, 16, 16, 0.7), 0 20px 20px 0 rgba(12, 12, 12, 0.5);
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: .7s ease-in-out;
}
.demikolpasika {
  background-image: url(http://images.vfl.ru/ii/1545066194/1228d0a8/24637380.png);
  width: 165px;
  height: 165px;
  border-radius: 100px;
  position: relative;
  border: 3px solid rgba(193, 193, 193, 0.66);
box-shadow: 1px 2px 14px 8px rgba(41, 38, 38, 0.24), 2px 3px 20px 12px rgba(49, 48, 48, 0.2);
}
.derstana-kodeas, .consan-dotemen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  background: url(http://zornet.ru/_fr/72/0971168.jpg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 2px solid rgb(191, 185, 185);
}
.derstana-kodeas {
  display:-webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.consan-dotemen {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  font-family: 'Arimo', sans-serif;
}
.kectiveneb-mesignakes:hover .getukolas-verading {
  -webkit-transform: rotateY(180deg) translateX(100%);
  -moz-transform: rotateY(180deg) translateX(100%);
  -ms-transform: rotateY(180deg) translateX(100%);
  transform: rotateY(180deg) translateX(100%);
  cursor: pointer;
}
ul {
  margin: 0;
  width: 100%;
  list-style: none;
  position: absolute;
  bottom: 29px;
  left: 0;
  padding: 0 1%;
}
ul:after {
  content: '';
  display: table;
  clear: both;
}
li {
  width: 31%;
  margin: 0 1%;
  float: left;
  padding: 8px;
  border: 1.7px solid #ea3213;
  border-radius: 100px;
  position: relative;
  text-align: center;
  color: #401830;
}
li:before {
  position: absolute;
  top: -27px;
  left: 50%;
  margin-left: -15px;
  width: 29px;
  height:29px;
  background: #d63d24;
  color: #fbf5f5;
  line-height: 29px;
  text-align: center;
  border-radius: 100%;
  font-family: FontAwesome;
}
li:nth-child(1):before {content: "\f095"}
li:nth-child(2):before {content: "\f003"}
li:nth-child(3):before {content: "\f0c1"}
h1 {
  color: #f54629;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  margin-top: 97px;
  text-align: center;
  font-size: 38px;
}
h1 span {
  color: #4E203C;
  display: block;
  font-size:15px;
  letter-spacing: 2px;
}

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

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

17 Декабря 2018 Загрузок: 1 Просмотров: 1394 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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