<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;
			width: 400px;
 			font-size: 14px;
        }
        .ss_form input[type=text]:focus,		
		.ss_form textarea:focus{
            border-color: #F5AB37;
        }
		.ss_form 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{          
			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;         
        }
			
		@media (max-width: 680px) {
  			.ss_form input[type=text],
			.ss_form textarea{
				width: 288px;				
			}
			.ss_form{width: 288px;}		
			.ss_form label{display: none;}
 		}
    </style>
<p>Принимаем Ваши заявки с вопросами, жалобами, предложениями и пожеланиями</p> <form class="ss_form" id="contactForm" action="http://desktop-le6tl76:1990/confluence/plugins/servlet/wdsozcontact" 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" maxlength="19" 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">        
        <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 () {
    PhoneMaskInit();
    FormInit();
    InputFocusInit()
});



function PhoneMaskInit() {
    AJS.$("#contact_phone")
        .keydown(function (e) {
            var key = e.which || e.charCode || e.keyCode || 0;
            $phone = $(this);

            if ($phone.val().length === 4 && (key === 8 || key === 46)) {
                $phone.val('+38 (');
                return false;
            }

            else if ($phone.val().charAt(0) !== '+') {
                $phone.val('+38 (' + String.fromCharCode(e.keyCode) + '');
            }

            if (key !== 8 && key !== 9) {
                if ($phone.val().length === 8) {
                    $phone.val($phone.val() + ') ');
                }
                if ($phone.val().length === 13) {
                    $phone.val($phone.val() + ' ');
                }
                if ($phone.val().length === 16) {
                    $phone.val($phone.val() + ' ');
                }
            }

            return (key == 8 ||
                key == 9 ||
                key == 46 ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        })

        .bind('focus click', function () {
            $phone = $(this);

            if ($phone.val().length === 0) {
                $phone.val('+38 (');
            }
            else {
                var val = $phone.val();
                $phone.val('').val(val);
            }
        })

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

            if ($phone.val() === '+38 (') {
                $phone.val('');
            }
        });
}

function FormInit() {
    AJS.$(".ss_form")
        .submit(function (e) {

            AJS.$(".ss_form input").removeClass("error");

            var city = AJS.$("#city");
            var ids = AJS.$("#ids");
            var phone = AJS.$("#contact_phone");
            var email = AJS.$("#contact_mail");
            var message = AJS.$("#message");

            if (city.val().length >= 2) {

                if (ids.val().length >= 2) {
                    if (phone.val().length === 19 || validateEmail(email)) {
                        //SendContact();             
return true;           
                    }
                    else {
                        phone.addClass("error");
                        email.addClass("error");
                    }
                }
                else {
                    ids.addClass("error");
                }
            }
            else {
                city.addClass("error");
            }
            return true;
        });
};

function InputFocusInit() {
    AJS.$(".ss_form input")
        .focus(function () {
            $(this).removeClass("error");
        });
}

function validateEmail(email) {
    var emailPattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
    var emailVal = email.val();
    if (emailVal != '') {
        if (emailVal.search(emailPattern) == 0) {
            return true;
        }
    }
    return false;
};

function SendContact() {

    var url = "http://desktop-le6tl76:1990/confluence/plugins/servlet/wdsozcontact";

    AJS.$.ajax({
        type: "POST",
        url: url,
        data: AJS.$("#contactForm").serialize(),
        success: alert("Ваша заявка успешно отправлена!")
    });
}
</script>