История страницы

 <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=cyrillic');
        * {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
        }

        .ss_form input[type=text],		
 		.ss_form textarea{
            padding: 12px 20px;
            margin: 8px 0;
            border: 2px solid #DBDBDB;
            border-radius: 4px;
            box-sizing: border-box;
            resize: none;
            min-width: 288px;
			width: 400px;
 			font-size: 14px;
        }
        .ss_form input[type=text]:focus,		
		.ss_form textarea:focus{
            border-color: #F5AB37;
        }
		input[type=text].error{
            border-color: red;
        }
        .ss_form button{
            padding: 12px 20px;
            margin: 8px 0;
            font-size: 16px;
            text-decoration: none;
            color: white;
            background-color: #027DC4;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }   
        .ss_form label{ 
            left: -120px;
			padding: 12px;  
            position: absolute;                   
        }           
        .ss_form{           
            min-width: 288px;
			width: 400px;
            margin: auto;  
            text-align: center;          
        }
        .ss_form div{   
            position: relative;                  
        }
        .ss_form div *{            
            vertical-align: middle;
        }
        .contacts{
            text-align: center;
            margin-top: 25px;
        }    
        .contacts p,    
        .contacts li{
            margin: 10px;
        }
        .contacts img{
            vertical-align: middle;
        }
        .contacts ul{
            list-style: none;   
            display: inline-block;
            text-align: left;         
        }
    </style>
    <form class="ss_form" action="http://google.com" method="post">
        <div><label for="city">Город*</label><input id="city" name="city" type="text" placeholder="Введите свой город"></div>
        <div><label for="ids">ИДС*</label><input id="ids" name="ids" type="text" placeholder="Название ИДС"></div>
		<div>Контакты, по которым с Вами можно связаться</div>
		<div><label for="contact_phone">Телефон</label><input id="contact_phone" name="contact_phone" type="text" placeholder="0987654321"></div>
		<div><label for="contact_mail">Email</label><input id="contact_mail" name="contact_mail" type="text" placeholder="mail@mail.com"></div>
 		<div><label for="message">Сообщение</label><textarea id="message" name="message" rows="6" placeholder="Введите сообщение"></textarea></div>
        <div><button>Отправить</button></div>        
    </form>    
    <div class="contacts">
        <p>* Принимаем Ваши заявки с вопросами, жалобами, предложениями и пожеланиями</p>
        <ul>
            <li id="mail"><img src="/download/attachments/15499631/mail_icon.png" />wd@soz.in.ua</li>
            <li id="phone"><img src="/download/attachments/15499631/phone_icon.png" />+38(093) 177 16 49</li>
            <li id="time"><img src="/download/attachments/15499631/time_icon.png" />24/7</li>
        </ul>
    </div>

<script>
AJS.toInit(function () {
    AJS.$(".ss#contact_formphone").submit
        .keydown(function (e) {
            var key = e.which || var city e.charCode || e.keyCode || 0;
            $phone = AJS.$("#city"this);


      var ids = AJS.$("#ids");
        var phone = AJS.$("#contact_phone"    // Don't let them remove the starting '('
            if ($phone.val().length === 1 && (key === 8 || key === 46)) {
                $phone.val('(');
        var email = AJS.$("#contact_mail");
        return false;
            }
            // Reset if they highlight and type over first char.
            else if ($phone.val().charAt(0) !== '(') {
     var message = AJS.$("#message")         $phone.val('(' + String.fromCharCode(e.keyCode) + '');
            }

            // Auto-format- do not expose the mask as the user begins to type
            if (citykey !== ''8 && idskey !== ''9) {
                if (validateEmail$phone.val(email) || validatePhone(phone)).length === 4) {
                 console.log(city   $phone.val($phone.val() + "')');
" + ids + " " + phone + " " + email + " " + message);
  }
                if ($phone.val().length === 5) {
         }           $phone.val($phone.val() + ' ');
                }
        return false;         //AJS.$(".ss_form input[type=text]").css("border-color","red"if ($phone.val().length === 9) {
                    $phone.val($phone.val() + '-');
    });
});

var emailPattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
var phonePattern = /^[0-9]{10,12}$/;

function validatePhone(phone){
    var phoneVal = phone.val();
    if (phoneVal != '')            }
            }

            // Allow numeric (and tab, backspace, delete) keys only
            return (key == 8 ||
                key == 9 ||
                key == 46 ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        })

        .bind('focus click', function () {
        phoneNum    $phone = phoneValAJS.replace(/\D/g, ''$(this);

            if (phoneNum$phone.searchval(phonePattern).length === 0) {
            return true    $phone.val('(');
            }
    }     return false; } else function validateEmail(email){
                var emailValval = email$phone.val();
    if (emailVal != '')          $phone.val('').val(val); // Ensure cursor remains at the end
            }
        })

        .blur(function () {
            $phone = AJS.$(this);

            if (emailVal$phone.searchval(emailPattern) === 0'(') {
            return true;   $phone.val('');
     }     }  }
  return false;     });
}
</script>