Битрикс создание формы с загрузкой файлов
Для того, чтобы создать форму с загрузкой файлов нужно:
1. Создание формы и подключение всех скриптов для валидации формы
Созданим папку /return/ и поместим туда все файлы с формой.
Файл index.php будет таким:
Скрипты и стили подключены через методы Битрикс. В форме с файлами будет сделана подмена стандартной кнопки (свой стили), чтобы кнопка была более презентабельной.
Далее необходимо создать файл со скриптом, script.js с содержимым кода.
Пояснения по файлам:для валидации форм используется jquery validate. Для телефона используется маска, jquery input mask.
Если форма не заполнена, то валидатор сообщит об этом:
2. Создать инфоблок со свойствами, создать почтовый шаблон
Далее переходим в админ панель Битрикс и создаем свойства: имя, телефон, фотография, копия. Будет 2 файла с картинками.
Переходим в Настройки-Почтовые и смс события-Типы событий в меню админки Битрикс. Или по адресу: /bitrix/admin/type_edit.php?lang=ru и создаем следующее содержание.
Создаем новое событие: FORM_RULES_RETURN с памятку с полями:
В почтовых шаблонах выбираем созданное событие FORM_RULES_RETURN и добавляем поля, которые есть в форме.
Сообщение почтового шаблона будет таким.
3. Создать скрипт php для проверки файлов, их загрузки, сохранением в инфоблок, отправки на почту уведомлений
Скрипт называется ajax_form.php и будет со следующим содержимым.
Здесь необходимо ввести номер информационного блока, чтобы все было корректно. В данном случае это 52 инфоблок.
Также нужно создать в корне папку для временного сохранения файлов картинок: tmp_img
Вначале происходит запись в инфоблок. Затем получение файлов из инфоблока. В письме уже создается мини-версия картинок(превью) и загруженные изображения. После отсылается email сообщение на указанный адрес в шаблон. Шаблонов писем может быть несколько и может быть разное содержание.
Файлы можно прикреплять как вложения, но здесь рассмотрен более простой вариант.
Дальше уже все проверять и тестировать.
Надеюсь статья была полезной, оставьте отзыв или мнение, что можно улучшить.
Прикрепить файлы из веб-формы 1С-Битрикс к письму
На клиентском сайте, в разделе «Карьера», есть форма для откликов на вакансии. К этой форме есть возможность прикрепить файл с резюме и фотографию. Но…
По желанию клиента резюме и фотографии должны приходить в письме на email в виде вложения, а не в виде ссылки на скачивания файла, как это реализовано в стандартной форме Bitrix.
Почему в Битриксе не предусмотрели такую возможность по стандарту, не понятно.
Итак, как реализовать прикрепление файлов в виде вложения в письмо из веб-формы на Битрикс?
Гугление дало несколько вариантов решения задачи, мне понравился вариант на форуме 1С-Битрикс.
Зарегистрируем событие OnBeforeEventAdd которое вызывается в момент добавления почтового события в таблицу b_event и с помощью него добавим в письмо наши вложения.
Для этого пройдемся циклом по всем полям веб-формы и с помощью регулярного выражения найдем все ссылки на скачивание файла.
Внимание! Чтобы была возможность прикрепить файл к письму, права доступа на форму нужно выбрать: Все пользователи — Полный доступ.
Далее разбираем ссылку и получаем rid и hash файла и прикрепляем файл к письму.
Следующий код нужно добавить в файл init.php:
Если у вас в форме несколько полей с файлами, к письму прикрепиться тоже несколько файлов.
P.s. Если письмо отправляется в формате HTML, сделайте регулярное выражение таким:
Иначе при наличии нескольких форм с файлами, у вас будет отправляться только один файл
Отправка письма со вложением через веб-формы Битрикс
Ниже рассматривается процесс создания и настройки формы на сайте для отправки писем со вложениями на почту администратора сайта. Решается данная задача через модуль «Веб-формы» от битрикса.
Идея для данной заметки возникла из следующей практической ситуации: Автору достался сайт на битриксе с самописной формой, задача которой была в том, чтобы отправлять вложенные документы на почту ответственному сотруднику. К сожалению, форма работала нестабильно, вместо вложения в письме была ссылка на это вложение, загруженное в одну из папок на сайте. Собственно, требовалось решить указанные проблемы с формой. Автором было предложено «пересобрать» данную форму средствами модуля «Веб-формы», так как данный подход, в данном случае, закрывал все описанные проблемы.
Весь процесс можно разделить на 3 условных блока:
Создание веб-формы в админке
Для создания веб-формы в битриксе нужно перейти в Сервисы > Веб-формы > Настройка форм и кликнуть кнопку «создать».
Основной интерес, на данном этапе, представляют вкладки «Свойства» и «Шаблон формы».
На вкладке «свойства» требуется ввести название, отметить привязку к сайту и отправку результатов по email, ввести название кнопки для отправки формы, капчу (опционально):
На вкладке «Шаблон формы» происходит настройка, собственно, шаблона. Можно использовать как визуальный редактор, так и отображение в виде кода. Для данной задачи нужна была форма всего из двух полей:
Как создать форму с отправкой на почту и записью в инфоблок?
Сделал все следующим образом:
Это достаточно просто, если вас устроит стандартный функционал.
Есть простой компонент в битриксе. Называется «форма добавления и редактирования элементов».
joxi.ru/52aNjzZIRedxA0
Подключаете, настраиваете, в частности в какой инфоблок добавлять элемент.
Шаблон у него, конечно, не ахти. Скорее всего, нужно будет поменять. Но это уже другая задача.
С первой задачей справились.
Все. Добавляйте элементы
А можно немного поподробнее?
Сейчас у меня обработчик формы выглядит так:
$mail = new PHPMailer;
$mail->From = «no-replay@admin.ru»;
$mail->FromName = «no-replay»;
$mail->AddAddress(‘admin@email.ru’);
$mail->isHTML(true);
$mail->CharSet = ‘UTF-8’;
$mail->Subject = ‘Тема’;
$mail->Body = ‘
Название организации: ‘.$_POST[‘name_organization’].’
Контактное лицо: ‘.$_POST[‘contact_name’].’
Город: ‘.$_POST[‘city’].’
Телефон: ‘.$_POST[‘tel’].’
Требуемая мощность: ‘.$_POST[‘power’].’
Хладогент: ‘.$_POST[‘cloudhed’].’
Температура наружного воздуха: ‘.$_POST[‘temp_air’].’
Температура конденсации хладогента: ‘.$_POST[‘temp_cloudhead’].».$_POST[‘other’].’
if($mail->Send()) <
echo ‘Отправлено’;
>
Я так понимаю надо до PHPMailer, подключить ядро Битрикса с iblock, и дальше уже использовать метод CIBlockElement::Add, для добавления записи?
И будет это все работать если использовать AJAX отправку?
А в init.php добавьте хук на добавление элемента в ваш ИБ. Что-то вроде (фигачу по памяти, так что внимательнее):
AddEventHandler(«iblock», «OnAfterIBlockElementAdd», Array(«MyClass», «OnAfterIBlockElementAddHandler»));
Как сделать форму в Битрикс со своей версткой и Ajax режимом
Покажу как сделать в 1С-Битрикс форму обратной связи, как её настроить, чтобы принимать лиды.
Форма будет называться «Оставьте заявку». Наша обратная форма Битрикс будет содержать поля имя, телефон, сообщение.
Будет использоваться модуль bitrix webforms.
Создание и настройка формы в административном разделе
Прежде, чем приступать, рекомендую выключить упрощенный режим редактирования форм в настройках модуля Вебформы. И сохранить настройку, соответственно.
В противном случае, бывают баги, по типу «не отправляются сообщения из формы на почту», «не привязывается почтовый шаблон к форме».
Во вкладке Свойства заполняем все необходимые поля. Во вкладке «Доступ» проверьте, чтобы для группы «Все пользователи» было право «Заполнение формы«.
Капчу на данном этапе включать не будем.
Жмем Применить, чтобы создать форму.
Переходим во вкладку Вопросы и добавляем их.
Настройка полей для формы:
Так же создаем статус по умолчанию для результатов, если он не создался.
Заголовок: Default. Во вкладке Доступ для всех операций поставьте «Создатель результата».
В панели администратора всё добавили и сохранили, молодцы!
Вывод формы в публичном разделе сайта
Если вы хотите разместить форму на отдельной странице, создайте страницу для формы.
А если хотите разместить в шаблоне, например в шапке, тогда создайте временную страницу, чтобы настраивать форму там. После скопируете вызов компонента формы с временной страницы. Я создам файл test.php.
Открываем редактирование страницы в визуальном редакторе, в компонентах ищем form.result.new, перетягиваем в окно правки.
Если нет поиска компонентов, то нажмите на кнопку у правой границы редактора.
Через несколько секунд появится окно настройки компонента.
Там нам надо заполнить:
После сохранения компонента, на странице появится форма. Она не очень красивая, поэтому установим свой шаблон.
Включим режим правки, наведем курсор на форму, там скопируем шаблон, как показано на картинке.
В шаблоне компонента сразу удалим все лишние файлы. Если их не удалить, в будущем они будут создавать путаницу при доработке шаблона, потому что будем иметь полно файлов не понятного назначения. А еще сайт будет тяжелый, так как пользователь будет получать много не нужных скриптов и стилей.
Оставим только файл template.php
Приступим к редактированию шаблона.
В template.php доступны следующие переменные:
Например, чтобы вывести инпут поля с символьным кодом NAME надо сделать в шаблоне так:
На основе переменных выше соберем шаблон
— выводит открытие формы со служебными скрытыми полями.
На этом можно закончить, форма уже будет работать.
Ajax отправка
Еще не забыли про ajax?
Чтобы форма отправлялась без перезагрузки страницы, надо добавить в параметры вызова компонента следующее:
«AJAX_MODE» => «Y»,
«AJAX_OPTION_SHADOW» => «N»,
«AJAX_OPTION_JUMP» => «N»,
«AJAX_OPTION_STYLE» => «Y»,
«AJAX_OPTION_HISTORY» => «N»,
Теперь Битрикс сам добавит нужные скрипты.
Алгоритм работы Ajax формы:
Из этой логики мы получаем некоторые нюансы. Поля формы, обработанные на джаваскрипте при загрузке страницы, снова будут не обработанные, так как они заменились, а события загрузки страницы заново не было.
Особенность 1
Особенность 2
Если мы форму используем в попапе, а при открытии окна верстка копируется в отдельный блок (так работает fancybox) ajax режим работать не будет.
Представим ситуацию: верстку всего попапа мы убрали в шаблон формы. Имеем структуру на странице, как показано ниже.
Проблема в том, что ajax будет заменять контент скрытого блока, внутри блока #1, а в блоке #2, который видит пользовать, изменений не будет.
Как исправить это? Вынести разметку попапа из шаблона компонента формы, то есть в нашем случае, вызов компонента сделать внутри
Настройка капчи
Чтобы в форме появилась капча:
Добавьте в шаблон формы следующий код:
В настройках формы включите показ капчи.
На этом капча уже будет работать.
Обновление капчи пользователем.
Бывает такое, что код с картинки не читается и пользователь не может отправить форму. Поможем пользователю.
Теперь, если пользователь не может прочитать код, он может обновить картинку.
Настройка формата изображения капчи
Вид капчи можно настроить в панели администратора в разделе Настройки > Настройки продукта > CAPTCHA.
Своя верстка полей ввода в форме
До этого момента поля в форму мы вставляли HTML_CODE вопроса, в котором уже содержится код инпута. Давайте и его сами генерировать, ведь бывает и такая необходимость.
Функцию генерации поля ввода объявим как анонимную, чтобы можно было копировать шаблон компонента и не было ошибок на странице, что одна функция объявлена 2 раза.