Создание форм обратной связи на ModX

Создаем чанк "ModalForm_KP".

ModalForm_KP (символ "((" заменяем на две квадратные скобки)

  <div class="modal fade" id="modalForm_KP" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">ПОЛУЧИТЬ КОММЕРЧЕСКОЕ ПРЕДЛОЖЕНИЕ</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ((!AjaxForm?
            &snippet=`FormIt`
            &form=`ModalForm_KP_Tpl`
            &hooks=`email`
            &emailSubject=`На сайте ТехСтрой оставили заявку на коммерческое предложение`
            &emailTo=`Udnlx@yandex.ru`  
            &emailFrom=`no-reply@mysite.com`
            &emailTpl=`ModalForm_KP_EmailTpl`
            &validate=`name:required,phone:required,iagree:required`
            &validationErrorMessage=`В форме содержатся ошибки!`
            &successMessage=`Сообщение успешно отправлено`
        ))
      </div>
    </div>
  </div>
</div>
</div>

Создаем чанк "ModalForm_KP_EmailTpl".

ModalForm_KP_EmailTpl (символ "((" заменяем на две квадратные скобки)

<h3>На сайте ТехСтрой оставили заявку на коммерческое предложение</h3>
<p>От кого: ((+name))</p>
<p>Телефон: ((+phone))</p>
<p>EMail: ((+email))</p>

Создаем чанк "ModalForm_KP_Tpl".

ModalForm_KP_Tpl (символ "((" заменяем на две квадратные скобки)

<form action="" method="post" class="ajax_form af_example" enctype="multipart/form-data">

    <div class="form-group">
        <label class="col-form-label" for="af_name">Имя</label>
        <div class="container-form-input">
            <input type="text" id="af_name" name="name" value="((+fi.name))" placeholder="" class="form-control bg-light"/>
            <span class="error_name">((+fi.error.name))</span>
        </div>
    </div>

    <div class="form-group">
        <label class="col-form-label" for="af_phone">Ваш телефон:</label>
        <div class="container-form-input">
            <input type="text" id="af_phone" name="phone" value="((+fi.phone))" placeholder="" class="form-control bg-light"/>
            <span class="error_phone">((+fi.error.phone))</span>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-form-label" for="af_email">Ваш email:</label>
        <div class="container-form-input">
            <input type="text" id="af_email" name="email" value="((+fi.email))" placeholder="" class="form-control bg-light"/>
            <span class="error_email">((+fi.error.email))</span>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-form-label" for="af_email">Прикрепить файлы:</label>
        <div class="container-form-input">
            <input type="file" id="af_file" name="file" value="((+fi.file))" placeholder="" class="form-control bg-light"/>
            <span class="error_email">((+fi.error.file))</span>
        </div>
    </div>
    
    <div class="form-group-rightlock">
        <input type="hidden" name="iagree" value="">
        <input type="checkbox" name="iagree" id="iagree" class="rightlock-chekbox">
        <p style="margin: 0 0 0 10px; line-height: 1;">Нажимая кнопку,<br>я соглашаюсь с <a href="" target="_blank">политикой конфиденциальности</a><br><span style="font-size:15px;" class="error_iagree"> ((+fi.error.iagree))</span></p>
	</div>

    <div class="form-group">
        <div class="controls">
            <button type="submit" class="btn-submit" style="border: 0">Оставить заявку</button>
        </div>
    </div>

    ((+fi.success:is=`1`:then=`
    <div class="alert alert-success">((+fi.successMessage))</div>
    `))
    ((+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">((+fi.validation_error_message))</div>
    `))
</form>

Если нужно прикрепить не один файл то добавляем в строку инпута с фалом тег - multiple.

Пример

<div class="form-group input-files">
                <label class="col-form-label" for="af_doc">Прикрепить файлы:</label>
                <div class="container-form-input">
                    <input type="file" id="af_doc" name="doc" class="container-form-control" multiple/>
                    <span class="error_doc">((+fi.error.doc))</span>
                </div>
            </div>

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены