Contact Form 7 — как настроить прикрепление и отправку файлов к письму в WordPress

В данном видео мы разберем, как настроить прикрепление и отправку файлов к письму для формы обратной связи WordPress на примере Contact form 7.

Пример контактной формы Contact Form 7 с возможностью прикрепления файлов

Одной текстовой информации в форме заявки не всегда бывает недостаточно, чтобы понять, что нужно клиентам. Или клиент сам не может до конца объяснить, что ему нужно. В таком случае нужны фотографии, чтобы мастер мог посмотреть и сориентировать. Рассмотрим на примере одной компании, которая занимается складским оборудованием. В частности, запчастями для складской техники.

Например, у человека что-то сломалась (в данном случае гидравлическая тележка), и ему нужна какая-то запчасть. Он заполняет заявку на ремонт запчастей, указывает свои контактные данные и пытается в текстовом виде описать, что у него сломалась. Здесь к стандартной форме заявки можно и нужно добавить опцию, когда человек может прикрепить несколько фото поломки.

Прикрепление нескольких файлов через Drag and Drop

Опция «Drag and Drop» (перетаскивания файлов) позволяет прикрепить  сразу несколько фотографий с компьютера. Например, человек может выделить файлы и перетащить их в форму, куда они прикрепятся. Либо можно вызвать стандартную форму загрузки, например, с телефона, где нет возможности использовать «Drag and Drop». Он нажимает текстовую ссылку, открывается окно загрузки, в котором он  добавляет файлы для загрузки.

После того как человек заполнил заявку и прикрепил файлы, он нажимает кнопку «Отправить». Нам на почту приходит письмо со всеми контактными данными, которые заполнял клиент, и со всеми прикрепленными файлами.  Клиент может добавить фото поломки или фото изделия. Если заявки обслуживают несколько менеджеров, то можно указать несколько адресов получателей через запятую, и все они получат эту информацию/заявку.

Как настроить прикрепление файлов к форме обратной связи Contact Form 7

Давайте теперь разберемся, что нужно сделать, чтобы настроить такую форму:

• В первую очередь нам понадобится плагин для формы обратной связи — Contact Form 7. Он бесплатный, простой и удобный, поэтому довольно популярный.
• Далее нам понадобится дополнение к этому плагину, которое называется Drag and Drop Multiple file upload — Contact Form 7. Как обычно устанавливаем плагин и далее переходим к настройке.

У Вас нет желания разбираться, как это все делать, или как самому настраивать форму,  устанавливать плагины, или возможно вы не знаете, как это технически настроить?  Просто переходите по ссылке в описании к этому видео на страницу контактов и оставляйте свою заявку. Я посмотрю,  что именно вам нужно настроить и сориентирую по срокам и цене.

В данном видео мы не будем подробно разбирать, как настраивать отдельные поля в этой форме, используя Contact Form 7. Я запишу отдельные видео о том, как настроить внешний вид, и как все правильно оформить. В данном случае мы сфокусируемся именно на том, как настроить прикрепление файлов к форме заявки, чтобы они уходили на почту.

Настройка прикрепления файлов через Drag and Drop Multiple file upload — Contact Form 7

После того как мы установили Contact Form 7, настроили основные поля, добавили расширение для прикрепления файлов (Drag and Drop Multiple file upload — Contact Form 7), в настройках шаблона формы появляется дополнительный генератор тега. Эта дополнительная опция называется «Multiple file upload»:

• Мы нажимаем на вкладку «Multiple file upload» и генерируем тег, который позволит нам добавлять и прикреплять файлы.
• Вы можете поставить галочку в поле «Обязательное поле», если вы хотите чтобы клиент обязательно заполнял это поле.
• В поле «Имя» мы задаем имя.
• В поле «Предельный размер файла в байтах» нужно установить максимальное значение размера файла, который можно прикрепить.
• Если вы хотите, чтобы клиенты имели возможность прикреплять фотографии в хорошем качестве, то предельный размер файла можно установить 10 мегабайт (в байтах это примерно получается 10 миллионов байт).
• Далее мы перечисляем разрешенные типы файлов. Если говорить о фотографиях, то это графические форматы: JPEG, PNG, JPG, GIF, TIFF, BMP. Вы можете сделать этот список более обширным и перечислить все поддерживаемые графические файлы.
• Далее указываем, какое максимальное количество файлов может загрузить человек. Указывайте то количество, которое вам необходимо, чтобы иметь возможность разобраться, что же он хочет.
• Если вы планируете загружать не только фотографии, но и файлы с реквизитами компаний, то в этом случае можно разрешить загрузку файлов формата PDF. Также это могут быть файлы Excel или Word, либо файлы сканов в графическом формате.

После того как мы указали опции для загружаемых файлов, нам генерируется тег. В данном примере у нас получается:

• Мы разрешаем загрузку графических файлов типов: GIF, PNG, JPG, JPEG, TIFF.
• Максимальное количество файлов 10, и максимальный размер файла 10 мегабайт.
• Внутри тега <label> мы оформляем подпись к этой секции контактной формы заявки. Например, можно написать: «Загрузите фото поломки не более 10 файлов».
• Пользователь может выбрать загрузку фото путем перетаскивания файлов — это актуально для людей работающих с компьютера. Или может выбрать сразу нескольких файлов через стандартный загрузчик файлов, если он делает это с телефона.

После этого в настройках формы на вкладке «Письмо» в поле «Кому» мы указываем адрес/несколько адресов тех, кому будет приходить уведомление об этой заявке и вся информация вместе с прикрепленными файлами.

В поле «Тело письма» прописываем теги с данными, которые там должны быть прикреплены:

• От: [your-name]
• Email: [your-email]
• Тел: [your-tel]
• Сообщение: [your-message]

После этого форма будет иметь завершенный вид.

Таким образом, к любой форме на сайте вы можете добавить опцию по загрузке файлов, они будут прикрепляться и отправляться на почту. В данном видео мы разобрали как прикрепить файлы к контактной форме, если вам нужно настроить защиту от спама Contact Form7, то можно посмотреть это видео.

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