HOSTCMS v.6
ФОРМЫ
Загрузка формы на страницу с помощью AJAX
<button
class="btn btn-secondary btn-xl"
type="button"
onclick="
return
$.openForm('/zayavka/', 18 // здесь меняем ID формы
)"
>Заполнить заявку</button>
PHP . Код настроек ТДС "Отображение формы"
XSL . Шаблон "ОтобразитьФормуЗаявкаВМодальномОкне" с отправкой изображений
<!ENTITY labelModalTitle1 "Благодарим вас за заявку!">
<!ENTITY labelModalTitle2 "Заявка получена.">
<!ENTITY labelSuccessText "Мы свяжемся с вами в ближайшее время">
<!ENTITY labelSuccessText2 "Наш менеджер ответит на все ваши вопросы">
<!ENTITY labelERROR "ОШИБКА!">
<!ENTITY labelTextErrorId0 "Вы неправильно ввели код подтверждения отправки формы!">
<!ENTITY labelTextErrorId1 "Заполните все обязательные поля!">
<!ENTITY labelTextErrorId2 "С момента отправки последней формы прошло слишком мало времени!">
<!ENTITY labelTextError1 "Это поле пустое">
<!ENTITY labelTextError2 "E-mail должен иметь вид name@domain.com">
<!ENTITY labelText1 "Обязательное поле">
<!ENTITY labelCheckNumber1 "Проверочный код">
<!ENTITY labelCheckNumber2 "показать другой код">
JavaScript / jQuery . Размещаем в макете сайта. Из XSL шаблонов валидацию форм убрать
Загрузка формы на страницу с помощью AJAX для редакции HostCMS Старт
<button
type="button"
class="btn btn-transparent btn-lg"
onclick="return $.openForm('/zayavka/', 'Вопрос на тему - Ремонт и выкуп элитных швейцарских часов в Москве')"
tabindex="0">Задать вопрос
</button>
/mform, обработчик отправки формы (в также него добавлена возможность отправки вложенных файлов) send-zakaz.php<?php
$to = "info@test.com";
$email = "zayavka@test.com";
if ( isset( $_POST['phone'] ) ) {
$username= substr( $_POST['username'], 0, 40 );
$phone = substr( $_POST['phone'], 0, 15 );
$thema = substr( $_POST['thema'], 0, 250);
$mess = substr( $_POST['mess'], 0, 250);
$body = "Имя: ".$username."\r\n";
$body .= "Телефон: ".$phone."\r\n";
$body .= "Тема: ".$thema."\r\n\r\n";
$body .= "Сообщение: ".$mess."\r\n\r\n";
send_mail($to, $body, $email);
}
// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email)
{
$subject = 'Пользователь сайта test.com заполнил форму Заявки';
$boundary = "--".md5(uniqid(time())); // генерируем разделитель
$headers .= "From: ".$email."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
$multipart = "--".$boundary."\r\n";
$multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
$multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";
$body = $body."\r\n\r\n";
$multipart .= $body;
mail($to, $subject, $multipart, $headers);
}
?>
В Основном макете, в самом низу, добавляем код модального окна, в которое будет загружаться наша форма
<div class="modal fade" id="applicationModal" tabindex="-1" aria-labelledby="applicationModalLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header justify-content-center">
<div class="h4 m-0 modal-title" id="applicationModalLabel">Заявка</div>
<button class="btn-close" type="button" data-bs-dismiss="modal"></button>
</div>
<div id="modalContent" class="modal-body"></div>
</div>
</div>
</div>PHP . В поле "Динамическая страница" вставляем следующий код формы
<div id="formUpload">
<form method="get" id="form2" action="./">
<input type="hidden" name="thema" id="thema_2">
<div class="mb-3">
<input type="text" name="username" class="form-control" maxlength="40" placeholder="Ваше Имя *">
</div>
<div class="mb-3">
<input name="phone" class="form-control" maxlength="15" placeholder="Телефон *" type="text">
</div>
<div class="mb-3">
<textarea name="mess" class="form-control" rows="2" maxlength="300" placeholder="Ваш запрос *" type="text"></textarea>
</div>
<p>Можете приложить несколько фото высокого разрешения в разных ракурсах</p>
<div id="image-holder_2" class="d-flex flex-wrap"></div>
<div class="row">
<div class="col-12 col-sm-6">
<input class="file-upload d-none" type="file" name="files[]" value="" placeholder="Загрузить фото" multiple="true" accept="image" id="fileUpload_2" data-id="2" accepts=".jpg, .jpeg, .png, .webp">
<label for="fileUpload_2" class="download-file btn btn-transparent primary">Добавить фото</label>
</div>
<div class="col-12 col-sm-6 text-end">
<button type="submit" id="submit_2" autocomplete="off" class="btn btn-transparent btn-lg primary" disabled>Отправить заявку</button>
</div>
</div>
<div class="mt-4">
<div class="form-check">
<input id="checkbox_2" class="form-check-input" type="checkbox" name="checkbox" onchange="document.getElementById('submit_2').disabled = !this.checked;">
<label for="checkbox_2" class="form-check-label small">Я соглашаюсь на обработку своих персональных данных в соответствии с <a href="/private/" class="link-border"> Политикой конфиденциальности</a></label>
</div>
</div>
</form>
</div>
JavaScript / jQuery . Размещаем в макете сайта во вкладке Javascript обработчик AJAX загрузки формы
// Функции без создания коллекции
$.extend({
// Загрузка форм заявок на ajax с валидацией
openForm: function(path, form_title) {
$("#modalContent").load(path + " #formUpload", function(response){
// Если ответ не пустой, открываем модальное окно
if (response) {
$('#applicationModal').modal('show').appendTo('body');
$('#thema_2').text(form_title);
$('#form2').validate({
rules: {
phone: "required",
mess: "required"
},
messages: {
mess: "Заполните это поле",
phone: "Заполните это поле"
},
focusInvalid: true,
errorClass: "input_error",
submitHandler: function(form){
var form = document.forms.form2,
formData = new FormData(form),
xhr = new XMLHttpRequest();
xhr.open("POST", "/mform/send-zakaz.php");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if(xhr.status == 200) {
$("#form2").html('<p style="text-align:center">Ваша Заявка отправлена!<p>');
setTimeout(function(){
location.reload();
}, 1000);
}
}
};
xhr.send(formData);
}
});
$("#fileUpload_2").on('change', function () {
//Get count of selected files
var dataID = $(this).data('id');
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder_" + dataID);
console.log(dataID);
image_holder.empty();
if (extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "webp") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("Ваш брузер не поддерживает FileReader!");
}
} else {
alert("Выберите файл в формате JPG, JPEG, PNG или WEBP!");
}
});
}
});
},
............. остальной код
}
Использование jQuery Validate для проверки форм
<script>
$(function() {
$(".validate").validate({
focusInvalid: true,
errorClass: "input_error",
onkeyup: false,
onfocusout: false,
rules: {
captcha: {
required: true,
remote: '/forms/'
},
author: "required",
text: "required",
email: {
required: true,
email: true
}
},
messages: {
author: "Пожалуйста, укажите своё Имя!",
text: "Пожалуйста, напишите свой комментарий!",
captcha: "Вы не вписали контрольное число!",
email: {
required: "Введите свой email",
email: "E-mail должен быть в формате name@domain.com"
}
}});
});
</script>
Core_Page::instance()
// jQuery
->js('/hostcmsfiles/jquery/jquery.min.js')
...
// Validate
->js('/hostcmsfiles/jquery/jquery.validate.min.js')
...
->showJs();
Указание валидации формы
<script>
$(".validate").validate();
</script>
Валидация всех форм:
<script>
$("form").validate();
</script>
Способы валидации форм
Использование имена классов как правила
<form action="." method="post" class="validate">
<input type="text" name="name" value="" class="required" />
<input type="submit" value="Submit" />
</form>
<form action="." method="post" class="validate">
<input type="text" name="name" value="" class="name" />
<input type="text" name="zip" value="" class="zip" />
<input type="submit" value="Submit" />
</form>
<script >
$.validator.addClassRules("name", {
required: true,
minlength: 2
});
</script >
<script >
$.validator.addClassRules({
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}});
</script >
Передача опций при инициализации validate()
<script >
$(".validate").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "Введите свой email",
email: "E-mail должен быть в формате name@domain.com"
}
}});
</script >
-
required — поле обязательное для заполнения (true или false);
-
remote — указывается файл для проверки поля (например: "check.php");
-
email — проверяет корректность e-mail адреса (true или false);
-
url — проверяет корректность url адреса (true или false);
-
date — проверка корректности даты (true или false);
-
dateISO — проверка корректности даты ISO (true или false);
-
number — проверка на число (true или false);
-
digits — только цифры (true или false);
-
creditcard — корректность номера кредитной карты (true или false);
-
equalTo — равное чему-то (например другому полю equalTo: "#pswd");
-
accept — проверка на правильное расширение (accept: "xls|csv");
-
maxlength — максимальное кол-во символов;
-
minlength — минимальное кол-во символов;
-
rangelength — кол-во символов от скольких и до скольких (rangelength: [2, 5]);
-
range — число должно быть в диапазоне от и до (range: [2, 12]);
-
max — максимальное значение числа;
-
min — минимальное значение числа.
Пример использования в XSL-шаблоне
<script >
$(".validate").validate({
rules: {
surname: "required",
name: "required",
email: {
required: true,
email: true
}
},
messages: {
surname: "Введите фамилию!",
name: "Введите имя!",
email: {
required: "Введите e-mail!",
email: "Адрес должен быть вида name@domain.com"
}
},
focusInvalid: true,
errorClass: "input_error"
});
</script>
Проверка валидации и заблокированного E-mail нежелательного Пользователя<SCRIPT>
$(document).ready(function() {
$('.select2').addClass('required');
$("#form<xsl:value-of select="@id" />").submit(function (event) {
event.preventDefault();
var eml = $('input[name=email]').val();
if(eml =='svinya.svintus@yandex.ru') {
alert ('Вы не можете отправлять нам письма');
$(location).attr('href', '/');
}else{
$(this).validate({
focusInvalid: true,
errorClass: "input_error"
});
}
});
});
</SCRIPT>
Модальное окно с формой подписки и сохранением куки на jQuery

Добавляем в макет код показа формы:
<?php
// add ФОРМА ПОДПИСКА ЗА СКИДКУ
$oForm = Core_Entity::factory('Form', 49); // заменить ID формы
$Form_Controller_Show = new Form_Controller_Show($oForm);
if (!is_null(Core_Array::getPost($oForm->button_name)))
{
$Form_Controller_Show
->values($_POST + $_FILES)
// 0 - html, 1- plain text
->mailType(0)
->mailXsl(
Core_Entity::factory('Xsl')->getByName('ПисьмоКураторуФормыВФорматеHTML')
)
->mailFromFieldName('email')
->process();
}
$Form_Controller_Show
->xsl(
Core_Entity::factory('Xsl')->getByName('ОтобразитьФормуВМодальномОкне')
)
->show();
?>
Подключаем в макете скрипт jquery.cookie.min.js:
<script src="/js/jquery.cookie.min.js"></script>
Проверяем куки:
<script>
$(document).ready(function($) {
if ($.cookie('was') == null) {
// Покажем всплывающее окно
setTimeout(function(){$('#popupModal').modal('show');}, 36000);
}
// Запомним в куках, что посетитель к нам уже заходил
$.cookie('was', 'value', { expires: 2, path: '/' });
});
</script>JavaScript / jQuery . jquery.cookie.min.js
ФОРМА "ЗАКАЗАТЬ ЗВОНОК" В МОДАЛЬНОМ ОКНЕ НА BOOTSTRAP
<button type="button" class="button" data-bs-toggle="modal" data-bs-target="#basicModal" >
<i class="fa fa-phone"></i> <span>Заказать звонок</span>
</button>
Добавить в Макет
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">x</button> </div>
<div class="modal-body">
<?php
// add ФОРМА ЗАКАЗАТЬ ЗВОНОК
$oForm = Core_Entity::factory('Form', 5); // Заменить id формы
$Form_Controller_Show = new Form_Controller_Show($oForm);
if (!is_null(Core_Array::getPost($oForm->button_name)))
{
$Form_Controller_Show
->values($_POST + $_FILES)
// 0 - html, 1- plain text
->mailType(1)
->mailXsl(
Core_Entity::factory('Xsl')->getByName('ПисьмоКураторуФормы')
)
->mailFromFieldName('mail@spartika.ru')
->process();
// Отправляем письмо-подтверждение пользователю
$Form_Controller_Show1 = clone $Form_Controller_Show;
$sEmail = Core_Array::get($Form_Controller_Show1->values, 'email');
if (Core_Valid::email($sEmail)){
ob_start();
$Form_Controller_Show1
->xsl(
Core_Entity::factory('Xsl')->getByName($Form_Controller_Show1->mailType == 0 ? 'ПисьмоПодтверждениеПользователюФормыВФорматеHTML' : 'ПисьмоПодтверждениеПользователюФормы')
)
->show();
$sMailText = ob_get_clean();
if (mb_strpos($sMailText, 'ERROR TRUE') === FALSE){
$subject = 'Вами была заполнена форма обратного звока на сайте jvern.club';// Тема письма отредактировать
// При текстовой отправке нужно преобразовать HTML-сущности в символы
$Form_Controller_Show->mailType == 1 && $sMailText = html_entity_decode(strip_tags($sMailText), ENT_COMPAT, 'UTF-8');
$oCore_Mail = Core_Mail::instance()
->to($sEmail)
->from(EMAIL_TO)
->subject($subject)
->message(trim($sMailText))
->contentType($Form_Controller_Show->mailType == 0 ? 'text/html' : 'text/plain')
->header('X-HostCMS-Reason', 'Form');
// Массив содержащий пути прикрепленных файлов и их имена
$aForm_Fields = $oForm->Form_Fields->findAll();
foreach ($aForm_Fields as $oForm_Field){
if ($oForm_Field->type == 2){// File
$value = Core_Array::get($Form_Controller_Show->values, $oForm_Field->name);
if (!is_null($value)){
if (is_array($value) && $value['size'] > 0){
$oForm_Fill_Fields = Core_Entity::factory('Form_Fill_Field');
$oForm_Fill_Fields->queryBuilder()
->where('form_field_id', '=', $oForm_Field->id)
->where('value', '=', $value['name'])
->limit(1);
$aForm_Fill_Fields = $oForm_Fill_Fields->findAll();
if (isset($aForm_Fill_Fields[0])){
$oCore_Mail->attach(array(
'filepath' => $aForm_Fill_Fields[0]->getPath(),
'filename' => $value['name']
));
}
}
}
}
}
$oCore_Mail->send();
}
}
// END add
}
$Form_Controller_Show
->xsl(
Core_Entity::factory('Xsl')->getByName('ОтобразитьФорму')
)
->show();
?>
</div>
</div>
</div>
</div>