Форма обратного звонка AjaxForm на Fenom

Быстрые решения
25 октября 2018, 11:16

Форма состоит из двух полей: имя и телефон


{$_modx->runSnippet('!AjaxForm', [
        'snippet'=>'FormIt',
        'formName' => 'Заказ звонка',
        'validationErrorMessage' => 'Форма содержит ошибки',
        'formSelector' => 'af_callback',
        'emailTo'=> $_modx->config.emailto,
        'emailSubject'=>$_modx->config.http_host ~ ' - Заказ звонка',
        'emailFrom'=>$_modx->config.emailsender,
        'emailFromName'=>$_modx->config.site_name,
        'form'=>'callback.form',
        'emailTpl'=>'callback.emailTpl',
        'hooks'=>'stopspam,email,FormItSaveForm',
        'customValidators'=>'isXcode',
        'validate'=>'phone:required,agree:required,xcode:isXcode',
    ])}

stopspam — кастомный хук для борьбы со спамом
isXcode — кастомный валидатор на заполнение полей ботом

Содержимое чанка callback.form:


<div id="callback" class="form-callback xform ajax_form af_callback">
        <div class="xform__caption">
            Перезвоним и ответим<br /> на все вопросы
        </div>
        <form action="">
            <div class="xform__group">
                <div class="xform__item">
                    <input type="text" name="name" placeholder="ФИО">
                </div>
            </div>
            <div class="xform__group">
                <div class="xform__item">
                    <input type="text" name="phone" placeholder="Телефон" data-mask="+7 (999) 999-99-99">
                    <input type="hidden" name="xcode" value="1" />
                </div>
            </div>
            <div class="xform__group">
                <label class="check-custom">
                    <input type="hidden" name="agree[]" value="0" />
                    <input type="checkbox" name="agree" value="Согласен" class="checkbox">
                    <span class="checkbox-custom"></span>
                    <span class="label">Согласие на обработку личных данных</span>
                </label>
            </div>
            <div class="xform__button">
                <button class="btn">Заказать звонок</button>
            </div>
        </form>
</div>

Содержимое чанка callback.emailTpl:


<p>С сайта {$_modx->config.http_host} оставлено сообщение.</p>

<p>
Имя: {$name ?: 'не указано'}<br />
Телефон: {$phone ?: 'не указано'}<br />
<br />
</p>
<p>Адрес страницы: {$_modx->resource.id | url : ['scheme' => 'full']}</p>