Form VGS

by serg_x

HTML

<div class="callbackform_wr">
    <div class="title">Написать нам</div>
    <div class="subtitle">Напишите нам и мы ответим вам в течении 15 минут</div>
    <div class="feedBackWrapper">
      <div class="inputs">
        <div class="nice_text_input_wr name">
          <input type="text" placeholder="Ваше ФИО *" class="isrequired nice_text_input">
        </div>
        <div class="nice_text_input_wr phone">
          <input type="text" placeholder="Телефон *" class="isrequired nice_text_input">
        </div>
        <div class="nice_text_input_wr email">
          <input type="text" placeholder="Почта" class="nice_text_input">
        </div>
        <div class="nice_text_input_wr comment">
          <textarea placeholder="Ваше сообщение" class="nice_text_input"></textarea>
        </div>
      </div>
      <input type="hidden" data-linktitle="[[*pagetitle:aqfix]]" value="[[~[[*id]]?&scheme=`full`]]" data-placeholder="Страница">
      <div class="ajax-trigger">
        <button class="ajaxgo ajaxgo_insite">Отправить</button>
        <div class="successmsg"></div>
      </div>
    </div>
  </div>

CSS

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Open sans';
}
body{
  background-color: #eaeaea;
  padding: 5px;
}
@media (max-width: 600px) {
  body{
    zoom:0.5;
  }
}
/**************/
.wbg_shaddow {
	background-color: #fff;
	box-shadow: 2px 2px 1px rgba(25, 97, 169, 0.06);
	border-radius: 3px;
}
.callbackform_wr{
  padding: 50px 60px;
  background-color: #fff;
  border-radius:15px;
}
.callbackform_wr .title{
  text-transform: uppercase;
  font-size: 30px;
  margin-bottom: 5px;
}
.callbackform_wr .subtitle{
  font-size: 13px;
  color: #757575;
  margin-bottom: 25px;
}
.callbackform_wr .inputs{
  display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 -13px;
}
.callbackform_wr .nice_text_input_wr{
	flex-basis: 33.33%;
	padding: 0 13px 20px;
}
.callbackform_wr .nice_text_input_wr.comment{
  flex-basis: 100%;
}
.callbackform_wr .ajax-trigger{
  text-align: left;
}
.callbackform_wr .ajax-trigger .ajaxgo{
	background-color: #797ff0;
	border: none;
	color: #fff;
	height: 40px;
	padding: 0 15px;
	text-transform: uppercase;
	text-align: center;
	border-radius: 3px;
	font-weight: 600;
	outline:none;
}

.nice_text_input{
  width: 100%;
  border:none;
  border-top:1px solid #e4e5ff;
  border-radius:4px;
  background: rgb(245,248,251);
  background: -moz-linear-gradient(top, rgba(245,248,251,1) 0%, rgba(250,252,255,1) 100%);
  background: -webkit-linear-gradient(top, rgba(245,248,251,1) 0%,rgba(250,252,255,1) 100%);
  background: linear-gradient(to bottom, rgba(245,248,251,1) 0%,rgba(250,252,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f8fb', endColorstr='#fafcff',GradientType=0 );
	padding: 17px 21px;
}
.nice_text_input.haserror{
	background: rgba(255, 52, 52, 0.08);
	border-color: rgba(255, 59, 59, 0.8);
}