Я уже писал про создание контактных форм на MODX при помощи Formit + AjaxForm, как что особо в теорию вникать не буду, а по сути приведу готовое решение, которое вы с легкость сможете переделать под себя.
Документация по компонентам:
- FormIt — docs.modx.com/extras/revo/formit
- AjaxForm — docs.modx.pro/components/ajaxform
Устанавливаем эти 2 компонета, документация выше.
В рамках данного урока будем создавать вот такую форму.
По сути она достаточно простая. но ее особая особенность. это вложения.
И так. данная форма имеет, вот такой html код
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <form class="ajax_form" method="post" action="" enctype="multipart/form-data"> <fieldset> <div class="row"> <div class="col-sm-4"> <div class="fancy-form"> <i class="fa fa-user"></i> <input type="text" name="name" required="" class="form-control" placeholder="Ваше имя*" value=""> </div> </div> <div class="col-sm-4"> <div class="fancy-form"> <i class="fa fa-at"></i> <input type="text" name="email" required="" class="form-control" placeholder="Ваш email*" value=""> </div> </div> <div class="col-sm-4"> <div class="fancy-form"> <i class="fa fa-phone"></i> <input type="text" class="form-control" id="pfone" name="pfone" required="" placeholder="Ваш телефон*" value=""> </div> </div> </div> <div class="fancy-form bottom-21"> <select class="form-control pointer" name="department"> <option value="">--- Выберите тип работы ---</option> <option value="Разработка-сайта-под-ключ">Разработка сайта под ключ</option> <option value="Доработка-сайта">Доработка сайта</option> <option value="Адаптация-имеющегося-сайта">Адаптация имеющегося сайта</option> <option value="Разработка-верстка-дизайна-сайта">Разработка/верстка дизайна сайта</option> <option value="Продвижение-сайта">Продвижение сайта</option> <option value="Рекламные-компании">Рекламные компании</option> <option value="Разработка-дизайна-групп">Разработка дизайна групп</option> <option value="Продвижение-групп">Продвижение групп</option> <option value="Прочеее">Прочеее</option> </select> </div> <div class="fancy-form bottom-21"> <textarea rows="5" name="message" required="" class="form-control word-count" data-maxlength="2000" data-info="textarea-words-info" placeholder="Примечания / пожелания"></textarea> <i class="fa fa-comments"><!-- icon --></i> <span class="error error_name"></span> </div> <div class="input-group file-upload w100"> <div class="input-group"><span class="input-group-addon"><i class="fa fa-paperclip"></i></span><input class="custom-file-upload custom-file-upload-hidden" placeholder="Ваше задание, методичка и т.д.*" type="file" id="file" name="attachment" data-btn-text="Выберите файл" tabindex="-1" style="position: absolute; left: -9999px;"><input type="text" class="form-control file-upload-input text-left"><span class="input-group-btn" tabindex="-1"><button type="button" class="file-upload-button btn btn-primary">Выберите файл</button></span></div> </div> </fieldset> <button type="submit" class="btn btn-3d btn-xmg btn-primary btn-w100">Отправить</button> </form> |
По сути обычная немного модифицированная bootstrap 3 разметка.
Обязательный атрибут для использования вложений в MODX: enctype=»multipart/form-data»
Ну а теперь ближе к делу:
Создаем чанк, ну к к примеру form-uslugi и помещаем в него весть вышеприведенный код, далее модифицируем его под Formit + AjaxForm, получаем:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <form method="post" action="[[~[[*id]]]]" enctype="multipart/form-data"> <fieldset> <div class="row"> <div class="col-sm-4"> <div class="fancy-form"> <i class="fa fa-user"></i> <input type="text" name="name" required="" class="form-control" placeholder="Ваше имя*" value="[[+fi.name]]"> <span class="error error_name">[[+fi.error.name]]</span> </div> </div> <div class="col-sm-4"> <div class="fancy-form"> <i class="fa fa-at"></i> <input type="text" name="email" required="" class="form-control" placeholder="Ваш email*" value="[[+fi.email]]"> <span class="error error_name">[[+fi.error.email]]</span> </div> </div> <div class="col-sm-4"> <div class="fancy-form"> <i class="fa fa-phone"></i> <input type="text" class="form-control" id="pfone" name="pfone" required="" placeholder="Ваш телефон*" value="[[+fi.pfone]]"> <span class="error error_name">[[+fi.error.pfone]]</span> </div> </div> </div> <div class="fancy-form bottom-21"> <select class="form-control pointer" name="department"> <option value="">--- Выберите тип работы ---</option> <option value="Разработка-сайта-под-ключ">Разработка сайта под ключ</option> <option value="Доработка-сайта">Доработка сайта</option> <option value="Адаптация-имеющегося-сайта">Адаптация имеющегося сайта</option> <option value="Разработка-верстка-дизайна-сайта">Разработка/верстка дизайна сайта</option> <option value="Продвижение-сайта">Продвижение сайта</option> <option value="Рекламные-компании">Рекламные компании</option> <option value="Разработка-дизайна-групп">Разработка дизайна групп</option> <option value="Продвижение-групп">Продвижение групп</option> <option value="Прочеее">Прочеее</option> </select> </div> <div class="fancy-form bottom-21"> <textarea rows="5" name="message" required="" class="form-control word-count" data-maxlength="2000" data-info="textarea-words-info" placeholder="Примечания / пожелания"></textarea> <i class="fa fa-comments"><!-- icon --></i> <span class="error error_name">[[+fi.error.message]]</span> </div> <div class="input-group file-upload w100"> <input class="custom-file-upload custom-file-upload-hidden" type="file" id="file" name="attachment" data-btn-text="Выберите файл" tabindex="-1" style="position: absolute; left: -9999px;"> </div> </fieldset> <button type="submit" class="btn btn-3d btn-xmg btn-primary btn-w100">Отправить</button> [[+fi.success:is=`1`:then=` <div class="alert alert-success">[[+fi.successMessage]]</div>`]] [[+fi.validation_error:is=`1`:then=`<div class="alert alert-error">[[+fi.validation_error_message]]</div>`]] </form> |
Далее создаем 2й чанк tpl-form-uslugi, со следующим содержимым
1 2 3 4 5 6 | <p>Имя: [[+name]]</p> <p>Email: [[+email]]</p> <p>Телефон: [[+pfone]]</p> <p>Тип работы: [[+department]]</p> <p>Сообщение: [[+message]]</p> <p>Файл: [[+attachment]]</p> |
Ну и остается лишь только вызвать эту форму в нужном месте.
1 2 3 4 5 6 7 8 9 10 11 | [[!AjaxForm? &snippet=`FormIt` &form=`form-uslugi` &emailTpl=`tpl-form-uslugi` &hooks=`spam,email` &emailSubject=`Сообщение с сайта [[++site_url]]` &emailTo=`mail@webadaptiv.ru` &validate=`name:required,email:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]] |
Ну и проверяем работоспособность
Все отлично работает)
