AjaxForm при выводе результатов

Часто бывает необходимо вывести какую-то форму по итогу расчёта. Для этого воспользуемся jQuery триггером xccResultsResponse, который появился с версии 1.0.2.

Вместо чанка tpl.xCalc.outer в сниппет передайте кастомный чанк с кодом примерно таким:

<div class="xcalc [ js-xcc ]" data-xcc-propkey="{$propkey}">
    <h1>{$calculator['title']}</h1>

    {if $calculator['description']?}
        <div>
            {$calculator['description']}
        </div>
    {/if}

    <form class="xcc-form [ js-xcc-form ]" action="" method="post">

        {* Fields *}
        {foreach $fields as $field}
            {var $tpl = ($field['tpl'] ?: ('tpl.xCalc.field.' ~ $field['type']))}
            {$_modx->getChunk($tpl, $field)}
        {/foreach}

        {* Button *}
        <button type="submit">Рассчитать</button>

    </form>

    <div class="[ js-ajaxform ]" style="display: none;">
        {'!AjaxForm' | snippet : [
            'snippet' => 'FormIt',
            'hooks' => 'email',
            'emailSubject' => 'Тестовое сообщение',
            'emailTo' => 'mymail@yandex.ru',
            'validate' => 'name:required,email:required,message:required',
            'validationErrorMessage' => 'В форме содержатся ошибки!',
            'successMessage' => 'Сообщение успешно отправлено',
        ]}
    </div>

    <div class="xcc-results [ js-xcc-results ]">
        {*...*}
    </div>
</div>

<script>
    $(document).on('xccResultsResponse', function (e, response, $form, propkey) {
        if (response['success']) {
            let $wrap = $form.closest('[data-xcc-propkey="' + propkey + '"]');
            let $af = $wrap.find('.js-ajaxform');
            $af.show();
        }
    });
</script>

Мы в коде страницы вызываем форму AjaxForm и заранее скрываем её. А при успешном расчёте, при помощи jQuery получаем эту форму и отображаем.