Форма обратной связи Shop-script

Стандартная форма связи в Shop-script 6 не удовлетворяла всем требованиям, добавить поля оказалось небольшой проблемой, вышел из положения следующим образом:

Форма обратной связи

Нашел шаблон формы тут и переделал немного под себя.

Итак:

Создаём новый блок в (Сайт / Блоки) со следующим содержимым:

<style>
#success_message{ display: none;}
</style>
 
<form class="well form-horizontal" action="http://ваш сайт/contact_form.php" method="post"  id="contact_form">
<!-- Text input ФИО-->
 
<div class="form-group">
<div class="col-md-12 inputGroupContainer">
<p>Поля, отмеченные звёздочкой (<font color="#ff0039">*</font>) обязательны к заполнению.</p>
</div>
  <label class="col-md-12 control-label"><font color="#ff0039">*</font> Ваше имя</label>
  <div class="col-md-12 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input  name="name" placeholder="" class="form-control"  type="text">
    </div>
  </div>
</div>
 
<!-- Text input Наименование компании -->
 
<div class="form-group">
  <label class="col-md-12 control-label" ><font color="#ff0039">*</font> Наименование компании</label> 
    <div class="col-md-12 inputGroupContainer">
    <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input name="company" placeholder="" class="form-control"  type="text">
    </div>
  </div>
</div>
 
<!-- Select Basic Страна -->
 
<div class="form-group"> 
  <label class="col-md-12 control-label"><font color="#ff0039">*</font> Страна</label>
    <div class="col-md-12 selectContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
    <select name="strana" class="form-control selectpicker" >
      <option value=" " >Выберите страну из списка</option>
<option>Абхазия</option>
<option>Австралия</option>
<option>Австрия</option>
<option>Азербайджан</option>
<option>Аландские острова</option>
<option>Албания</option>
<option>Алжир</option>
<option>Ангола</option>
<option>Андорра</option>
<option>Антигуа и Барбуда</option>
<option>Аргентина</option>
<option>Армения</option>
<option>Афганистан</option>
<option>Багамы</option>
<option>Бангладеш</option>
<option>Барбадос</option>
<option>Бахрейн</option>
<option>Беларусь</option>
<option>Белиз</option>
<option>Бельгия</option>
<option>Бенин</option>
<option>Болгария</option>
<option>Боливия</option>
<option>Босния и Герцеговина</option>
<option>Ботсвана</option>
<option>Бразилия</option>
<option>Бруней</option>
<option>Буркина Фасо</option>
<option>Бурунди</option>
<option>Бутан</option>
<option>Вануату</option>
<option>Ватикан</option>
<option>Великобритания</option>
<option>Венгрия</option>
<option>Венесуэла</option>
<option>Восточный Тимор</option>
<option>Вьетнам</option>
<option>Габон</option>
<option>Гаити</option>
<option>Гайана</option>
<option>Гамбия</option>
<option>Гана</option>
<option>Гватемала</option>
<option>Гвинея</option>
<option>Гвинея-Бисау</option>
<option>Германия</option>
<option>Гондурас</option>
<option>Гренада</option>
<option>Греция</option>
<option>Грузия</option>
<option>Дания</option>
<option>Джибути</option>
<option>Доминика</option>
<option>Доминиканская Республика</option>
<option>Египет</option>
<option>Замбия</option>
<option>Зимбабве</option>
<option>Израиль</option>
<option>Индия</option>
<option>Индонезия</option>
<option>Иордания</option>
<option>Ирак</option>
<option>Иран</option>
<option>Ирландия</option>
<option>Исландия</option>
<option>Испания</option>
<option>Италия</option>
<option>Йемен</option>
<option>Кабо-Верде</option>
<option>Казахстан</option>
<option>Камбоджа</option>
<option>Камерун</option>
<option>Канада</option>
<option>Катар</option>
<option>Кения</option>
<option>Кипр</option>
<option>Киргизия</option>
<option>Кирибати</option>
<option>Китай</option>
<option>Колумбия</option>
<option>Коморы</option>
<option>Конго, демократическая республика</option>
<option>Конго, республика</option>
<option>Коста-Рика</option>
<option>Кот-д’Ивуар</option>
<option>Куба</option>
<option>Кувейт</option>
<option>Лаос</option>
<option>Латвия</option>
<option>Лесото</option>
<option>Либерия</option>
<option>Ливан</option>
<option>Ливия</option>
<option>Литва</option>
<option>Лихтенштейн</option>
<option>Люксембург</option>
<option>Маврикий</option>
<option>Мавритания</option>
<option>Мадагаскар</option>
<option>Македония</option>
<option>Малави</option>
<option>Малайзия</option>
<option>Мали</option>
<option>Мальдивы</option>
<option>Мальта</option>
<option>Марокко</option>
<option>Маршалловы Острова</option>
<option>Мексика</option>
<option>Мозамбик</option>
<option>Молдавия</option>
<option>Монако</option>
<option>Монголия</option>
<option>Мьянма</option>
<option>Намибия</option>
<option>Науру</option>
<option>Непал</option>
<option>Нигер</option>
<option>Нигерия</option>
<option>Нидерланды</option>
<option>Никарагуа</option>
<option>Новая Зеландия</option>
<option>Норвегия</option>
<option>Объединенные Арабские Эмираты</option>
<option>Оман</option>
<option>Пакистан</option>
<option>Палау</option>
<option>Панама</option>
<option>Папуа - Новая Гвинея</option>
<option>Парагвай</option>
<option>Перу</option>
<option>Польша</option>
<option>Португалия</option>
<option>Россия</option>
<option>Руанда</option>
<option>Румыния</option>
<option>Сальвадор</option>
<option>Самоа</option>
<option>Сан-Марино</option>
<option>Сан-Томе и Принсипи</option>
<option>Саудовская Аравия</option>
<option>Свазиленд</option>
<option>Северная Корея</option>
<option>Сейшелы</option>
<option>Сенегал</option>
<option>Сент-Винсент и Гренадины</option>
<option>Сент-Китс и Невис</option>
<option>Сент-Люсия</option>
<option>Сербия</option>
<option>Сингапур</option>
<option>Сирия</option>
<option>Словакия</option>
<option>Словения</option>
<option>Соединенные Штаты Америки</option>
<option>Соломоновы Острова</option>
<option>Сомали</option>
<option>Судан</option>
<option>Суринам</option>
<option>Сьерра-Леоне</option>
<option>Таджикистан</option>
<option>Таиланд</option>
<option>Танзания</option>
<option>Того</option>
<option>Тонга</option>
<option>Тринидад и Тобаго</option>
<option>Тувалу</option>
<option>Тунис</option>
<option>Туркмения</option>
<option>Турция</option>
<option>Уганда</option>
<option>Узбекистан</option>
<option>Украина</option>
<option>Уругвай</option>
<option>Федеративные штаты Микронезии</option>
<option>Фиджи</option>
<option>Филиппины</option>
<option>Финляндия</option>
<option>Франция</option>
<option>Хорватия</option>
<option>Центрально-Африканская Республика</option>
<option>Чад</option>
<option>Черногория</option>
<option>Чехия</option>
<option>Чили</option>
<option>Швейцария</option>
<option>Швеция</option>
<option>Шри-Ланка</option>
<option>Эквадор</option>
<option>Экваториальная Гвинея</option>
<option>Эритрея</option>
<option>Эстония</option>
<option>Эфиопия</option>
<option>Южная Корея</option>
<option>Южно-Африканская Республика</option>
<option>Ямайка</option>
<option>Япония</option>
    </select>
  </div>
</div>
</div>
 
<!-- Text input Город -->
 
<div class="form-group">
  <label class="col-md-12 control-label"><font color="#ff0039">*</font> Город</label>  
    <div class="col-md-12 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
  <input name="city" placeholder="" class="form-control"  type="text">
    </div>
  </div>
</div>
 
<!-- Text input Адрес -->
 
<div class="form-group">
  <label class="col-md-12 control-label">Адрес</label>  
    <div class="col-md-12 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
  <input name="address" placeholder="улица, дом, офис" class="form-control" type="text">
    </div>
  </div>
</div>
 
<!-- Text input-->
       <div class="form-group">
  <label class="col-md-12 control-label"><font color="#ff0039">*</font> E-Mail</label>  
    <div class="col-md-12 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email" placeholder="" class="form-control"  type="text">
    </div>
  </div>
</div>
 
 
<!-- Text input-->
 
<div class="form-group">
  <label class="col-md-12 control-label"><font color="#ff0039">*</font> Телефон</label>  
    <div class="col-md-12 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
  <input name="phone" placeholder="в формате +7(XXX)XXX-XX-XX" class="form-control" type="text">
    </div>
  </div>
</div>
 
<!-- Text input-->
<div class="form-group">
  <label class="col-md-12 control-label">Skype</label>  
   <div class="col-md-12 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
  <input name="skype" placeholder="" class="form-control" type="text">
    </div>
  </div>
</div>
 
<!-- Text area -->
 
<div class="form-group">
  <label class="col-md-12 control-label"><font color="#ff0039">*</font> Форма заказа продукции</label>
    <div class="col-md-12 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
        	<textarea class="form-control" name="comment" placeholder="просим Вас максимально детально указать информацию об интересующем Вас товаре" rows="3"></textarea>
  </div>
  </div>
</div>
 
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Благодарим Вас за обращение, мы свяжемся с Вами в ближайшее время.</div>
 
<!-- Button -->
<div class="form-group">
  <label class="col-md-12 control-label"></label>
  <div class="col-md-12">
    <button type="submit" class="btn btn-primary hvr-grow" >Отправить <span class="glyphicon glyphicon-send"></span></button>
  </div>
</div>
</form>
 
<script type="text/javascript">
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
locale: 'ru_RU',
fields: {
name: {
validators: {
stringLength: {
min: 3,
},
notEmpty: {
message: 'Введите ваше имя'
}
}
},
company: {
validators: {
stringLength: {
min: 3,
},
notEmpty: {
message: 'Введите компанию'
}
}
},
strana: {
validators: {
notEmpty: {
message: 'Пожалуйста выберите страну из списка'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Введите Ваш город'
}
}
},
// address: {
// validators: {
// stringLength: {
// min: 8,
// },
// notEmpty: {
// message: 'Улица, дом и т.д.'
// }
// }
// },
email: {
validators: {
notEmpty: {
message: 'Ваша электронная почта'
},
emailAddress: {
message: 'Почта введена некорректно'
}
}
},
            phone: {
                validators: {
                     stringLength: {
                        min: 8,
                        message:'Пожалуйста введите контактный номер телефона'
                    }
                }
            },
comment: {
validators: {
stringLength: {
min: 10,
max: 1000,
message:'Пожалуйста введите от 10 до 1000 символов'
},
notEmpty: {
message: 'Пожалуйста напишите краткое сообщение'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
 
// Prevent form submission
e.preventDefault();
 
// Get the form instance
var $form = $(e.target);
 
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
 
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
</script>

создаём в корне сайта вайл contact_form.php с содержимым:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Сообщение отправлено</title>
</head>
<body>
 
<?php
 
$sendto = "почта@почта.com"; // почта, на которую будет приходить письмо
$name = $_POST['name'];   // сохраняем в переменную данные полученные из поля c именем
$company = $_POST['company'];
$strana = $_POST['strana'];
$city = $_POST['city'];
$address = $_POST['address'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$skype = $_POST['skype'];
$comment = $_POST['comment'];
 
// Формирование заголовка письма
$subject  = "Новое сообщение";
$headers  = "From: от кого <почта@почта.com>" . strip_tags($email) . "\r\n";
$headers .= "Reply-To: почта@почта.com". strip_tags($email) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
 
// Формирование тела письма
$msg  = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Cообщение с сайта</h2>\r\n";
$msg .= "<p><strong>От кого:</strong> ".$name."</p>\r\n";
$msg .= "<p><strong>Почта:</strong> ".$email."</p>\r\n";
$msg .= "<p><strong>Телефон:</strong> ".$phone."</p>\r\n";
$msg .= "<p><strong>Скайп:</strong> ".$skype."</p>\r\n";
$msg .= "<p><strong>Компания:</strong> ".$company."</p>\r\n";
$msg .= "<p><strong>Страна:</strong> ".$strana."</p>\r\n";
$msg .= "<p><strong>Город:</strong> ".$city."</p>\r\n";
$msg .= "<p><strong>Адрес:</strong> ".$address."</p>\r\n";
$msg .= "<p><strong>Сообщение:</strong> ".$comment."</p>\r\n";
$msg .= "</body></html>";
 
?>
 
</body>
</html>

Затем в файле head.html подключаем:

<script src="/wa-content/js/jquery/bootstrapValidator.min.js"></script>
<script src="/wa-content/js/jquery/ru_RU.js"></script>

и соответственно в папку /wa-content/js/jquery/ закидываем файлы скачать их можно на оф.сайте валидатора

Спасибо следующим источникам:
1, 2, 3, 4

Надеюсь что кому-то это пригодится и я ничего не упустил, если что поправляйте.
Удачи!




Оставить комментарий