...
| Макрос генерирует 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: 400px288px;
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: 300px288px;
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_form").submit(function () {
var city = AJS.$("#city");
var ids = AJS.$("#ids");
var phone = AJS.$("#contact_phone");
var email = AJS.$("#contact_mail");
var message = AJS.$("#message");
if (city != '' && ids != '') {
if (validateEmail(email) || validatePhone(phone)) {
console.log(city + " " + ids + " " + phone + " " + email + " " + message);
}
}
return false;
//AJS.$(".ss_form input[type=text]").css("border-color","red");
});
});
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 != ''){
phoneNum = phoneVal.replace(/\D/g, '');
if (phoneNum.search(phonePattern) == 0){
return true;
}
}
return false;
}
function validateEmail(email){
var emailVal = email.val();
if (emailVal != ''){
if (emailVal.search(emailPattern) == 0){
return true;
}
}
return false;
}
</script>
|
...