Дерево страниц

Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

...

Макрос генерирует HTML разметку
 <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.$("#contact_phone")
        .keydown(function (e) {
            var key = e.which || e.charCode || e.keyCode || 0;
            $phone = AJS.$(this);


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

            // Auto-format- do not expose the mask as the user begins to type
            if (key !== 8 && key !== 9) {
                if ($phone.val().length === 4) {
                    $phone.val($phone.val() + ')');
                }
                if ($phone.val().length === 5) {
                    $phone.val($phone.val() + ' ');
                }
                if ($phone.val().length === 9) {
                    $phone.val($phone.val() + '-');
                }
            }

            // 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 () {
            $phone = AJS.$(this);

            if ($phone.val().length === 0) {
                $phone.val('(');
            }
            else {
                var val = $phone.val();
                $phone.val('').val(val); // Ensure cursor remains at the end
            }
        })

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

            if ($phone.val() === '(') {
                $phone.val('');
            }
        });
}
</alert('taki da')};
}
</script>