Создание формы в шаблоне html в 1с-битрикс

Question

Такая проблема. Мне необходимо в шаблон html в шаблоне сайта добавить код формы обратной связи. Я добавила html в шаблон и css стили в шаблон стилей. Все вроде работает( но отображаются не все поля. Т.е не отображаются поля с input. Работает только с textarea. Вот код html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Модальная форма контактов на CSS3</title>
    <meta name="description" content="Как объеденить модальное окно и форму контактов в единый элемент, сделать контактную форму всплывающей, исключительно средствами CSS3" />
    <meta name="keywords" content="модальная, форма, конактная форма, css3, без javascript" />
    <meta name="author" content="Dbmast.ru" />
    <!-- demo page css -->
      <link href="css/demo-page.css" rel="stylesheet">
    <!-- styles post -->
      <link href="css/style-form.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- top nav demo page -->
    <div class="nav-top cf">
        <a href="http://dbmast.ru/"><span>Dobrovoimaster</span></a>
        <span class="right"><a href="http://dbmast.ru/modalnaya-forma-kontaktov-na-css3"><span>&laquo; &laquo; Подробнее Изучить Детали</span></a></span>
    </div>
    <!-- Заголовок -->
    <div class="header">
      <h1>Модальная форма контактов на CSS3</h1>
    </div>
    <!-- container -->
    <div class="container">
        <div class="main cf">
            <!-- Левый блок -->
            <div class="column">
                <p>
                  Наглядный пример того, как объеденить модальное окно и форму контактов в единый элемент, сделать контактную форму всплывающей, исключительно средствами CSS3, без javascript и дополнительных изображений в оформлении.
                </p>
            </div>
            <!-- Конец левого блока -->
            <!-- Правый блок -->
            <div class="column">
                <p>
                Чтобы посмотреть модальную форму контактов в действии просто нажмите на кнопку:
                </p>
                <div class="down">
                  <a href="#form1" class="button"><span class="submit">Кон</span>так<span class="submit">ты!</span></a>
                </div>
            </div>
            <!-- Конец правого блока -->
        </div>
        <!-- Модальная форма -->
        <a href="#x" class="overlay" id="form1"></a>
        <form class="modal">
            <input name="name" placeholder="Укажите ваше имя:" class="name" required></input>
            <input name="emailaddress" placeholder="Укажите ваш Email:" class="email" type="email" required></input>
            <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea>
            <input name="submit" class="btn" type="submit" value="Отправить" />
        </form>
        <!-- конец блока  формы-->
        <p style="text-align: center;">сделано с любовью: <a href="http://dbmast.ru/">@dobrovoi</a></p>
    </div>
  </body>
</html>

И код css:

@charset "UTF-8";
/*
* Модальная контактная формы
* без javascript и дополительных изображений;
* исключительно средствами CSS;
*
*  @dobrovoi dbmast.ru
*/
/* расчет ширины и высоты элементов */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Базовый стиль формы */
form {
    overflow: hidden;
    margin: 0 auto;
    padding: 30px 30px 6px 30px;
    min-width: 320px;
    max-width: 520px;
    width: 100%;
    border: 1px solid rgba(120,120,120,.7);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: rgba(60, 63, 65, 0.9); 
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/* общие для полей ввода */
textarea, input{
    display:block;    
    margin-bottom:20px;
    padding-right:20px;
    padding-left:20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box; 
    color:#fff;
    font-weight: 300;
    font-size:18px;
    font-family: 'Open Sans', sans-serif;
}
/* поле сообщения */
textarea{
    overflow:hidden;
    width: 100%;
    height: 110px;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(255, 255, 255, 0.4); 
}
/* поля ввода */
input {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
}
input[type=submit] {
    cursor:pointer;
}
input.name {
    background: rgba(255, 255, 255, 0.4); 
    padding-left:25px;
}
input.email {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
input.message {
    background: rgba(255, 255, 255, 0.4);
    padding-left:25px;
}
::-webkit-input-placeholder {
    color: #fff;
}
:-moz-placeholder{ 
    color: #fff; 
}
::-moz-placeholder {
    color: #fff;
}
:-ms-input-placeholder {  
    color: #fff; 
}
input:focus, textarea:focus { 
    background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden; 
}
:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }

/* Стили для кнопки отправить */
.btn {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #6da5a3, #416b68);
    background: -moz-linear-gradient(top, #6da5a3, #416b68);
    background: -ms-linear-gradient(top, #6da5a3, #416b68);
    background: -o-linear-gradient(top, #6da5a3, #416b68);
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    color: #e1e1e1;
    outline: none;
}
/* стиль кнопки при наведении */
.btn:hover {
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
 }
/* активная кнопка */
.btn:active {
    margin-top:1px;
    border: 1px solid #333333;
    background: #ffCC00;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600));
    background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
    background: -moz-linear-gradient(top, #ffcc00, #ff6600);
    background: -ms-linear-gradient(top, #ffcc00, #ff6600);
    background: -o-linear-gradient(top, #ffcc00, #ff6600);
    background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    color: #fff;
}
/* конец формы */

/** стили фона затемнения */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
visibility: hidden;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
position: fixed; /* фиксированное позиционирование */
/* трансформация прозрачности при открытии  */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
/* активируем при клике */
.overlay:target {
visibility: visible;
opacity: 1;
}
/** стили модального блока */
.modal {
 top: 0;
 right: 0;
 left: 0;
 width: 50%;
 z-index: 10001;
/** полная прозрачность изначально */
 opacity: 0;
 display: block;
 visibility: hidden;
 position: absolute;
/* трансформация прозрачности при открытии  */
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in; 
}
/* активируем при клике */
.overlay:target+.modal{
top: 25%;
visibility: visible;
opacity: 1;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .modal {
        width: 95%;
    }
}
/* смарт */
@media only screen and (min-width: 459px) and (max-width: 767px) {
    .modal {
        width:85%;  
    }
}

Если не трудно, можете по порядку объяснить как это исправить))Буду очень благодарна!

БЛОГ НА HUSL

Создание формы в шаблоне html в 1с-битрикс

Ответы (0 шт):