Форма обратной связи с автоматическим скачиванием файла

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

Статья, по просьбе одного из читателей, так что, если у вас есть какие-то вопросы, можете писать в раздел «ваши предложения» или мне в социальные сети. Периодически такие посты «по заказам» появляются на блоге. Кроме того, человек обещал отблагодарить финансово, так что, выгода и вам и мне.

Вернемся к форме. На самом деле нужно давно переписать почти все статьи о контактных формах, которые есть на сайте, так как мне реально стыдно за них. Я обязательно засяду и обновлю всё, как только появится больше времени.

Сейчас, набравшись опыта, кажется, что они настолько «корявы», что многие просто бегут с блога, видя код представленный в тех статья. Спасибо всем, кто остался, буду исправляться и обновлять контент, делая его более актуальным.

Также, стоит отметить что если это, например, не zip-архив то сначала откроется сам файл в браузере, а потом его можно будет скачать.

Контактная форма с автоматическим скачиванием

Итак, давайте перейдем к форме. Исходник, как обычно, в конце статьи.

<form class="contact-form" id="price-form" method="POST">

 <div class="contact-form__title">
  <img class="contact-form__title-icon" src="./fileform/img/pdf.svg" alt="Прайс" width="50">
  <span>Прайс на разработку landing page</span>
 </div>

 <div class="contact-form__input-wrapper">
  <input name="name" class="contact-form__input contact-form__input_name" type="text" placeholder="Введите ваше имя">
  <div class="contact-form__msgs contact-form__msgs-name"></div>
 </div>

 <div class="contact-form__input-wrapper">
  <input name="tel" class="contact-form__input contact-form__input_tel" type="tel" placeholder="Введите ваш телефон">
  <div class="contact-form__msgs contact-form__msgs-tel"></div>
 </div>

 <input name="subject" class="contact-form__input contact-form__input_subject" type="hidden" name="subject" value="Скачали прайс">
 <button class="contact-form__button">Скачать прайс</button>

</form>

Для примера я сделал простую контактную форму с 2 полями и кнопкой. Кроме того, сделал одной скрытой поле в котором передаю тему, в данном случае уведомление о том, что скачали прайс. Блоки с классом "contact-form__msgs" под каждым из полей отвечают за вывод сообщения о том, что имя или телефон небыли заполнены. На видео, вы могли видеть их, подсвеченные красным.

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

Структура проекта

Если вы давно читаете блог, то могли видеть подобную структуру в других формах. Самое интересное находится в папке "js" и "php". Как обычно, в последнее время, для отправки данных я использую PHPMailer, так как с ней удобно работать и она позволяет легко прикрепить файл, в случае необходимости, к письму, как вложение. Но прежде, чем говорить об этом всем, давайте подключим остальные необходимые файлы в наш индексный файл.

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

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Маска -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<!--Скрипт формы -->
<script src="/fileform/js/contact-form.js"></script>

Кроме того, давайте сразу инициализируем маску и привяжем к нужному полю. В моем случае это поле с классом "contact-form__input_tel".

<script>
  $(function () {
     $('.contact-form__input_tel').mask('+7(000)000-00-00')
  });
</script>

Можете вынести в отдельный файл, я же инициализировал маску в конце документа, перед закрывающим тегом "body".

Прежде чем продолжить обратите внимание на папку "file". Именно туда я положил файл, который начнет автоматически загружаться.

Теперь давайте рассмотрим папку с php-файлами. В папке phpmailer лежат файлы библиотеки. Их мы править не будем, поэтому ее пропускаем. Больше нас интересует файл "config.php", ведь именно там прописываются почты, с которой и на которую будут приходить письма.

 const SENDER = 'sender@yandex.ru';
 const CATCHER = 'catcher@list.ru';

• "SENDER" - отправитель;
• "CATCHER" - получатель.

Обратите внимание, что обе почты должны быть реальными. Если есть проблемы с доставкой на Яндекс-почту, то почитайте эту статью.

Файл "contact-form.php" отвечает за валидацию и отправку данных формы на почту. Скрипт достаточно длинный, поэтому не буду приводить его в статье. Если не планируете добавлять поля, то можете не открывать на редактирование и этот файл, ведь то, ради чего затевалась эта статья, находится в файле "contact-form.js", а именно на 33 строке.

(function ($) {
    $(".contact-form").submit(function (event) {
        event.preventDefault();
        let form = $('#' + $(this).attr('id'))[0];
        let fd = new FormData(form);
        let inpName = $(this).find('.contact-form__input_name').val();
        let inpTel = $(this).find('.contact-form__input_tel').val();
        let inpNameMsgs = $(this).find('.contact-form__msgs-name');
        let inpTelMsgs = $(this).find('.contact-form__msgs-tel');
        if (inpName.length === 0 || inpTel.length === 0) {
            if (inpName.length === 0) {
                inpNameMsgs.text('Введите имя');
            }
            if (inpTel.length === 0) {
                inpTelMsgs.text('Введите телефон');
            }
        } else {
            $.ajax({
                url: "/fileform/php/contact-form.php",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,
                success: function success(res) {
                    if (res === 'notName') {
                        inpNameMsgs.text('Введите имя');
                    } else if (res === 'notTel') {
                        inpTelMsgs.text('Введите телефон');
                    } else if (res === 'successmsgs') {
                        inpNameMsgs.text('');
                        inpTelMsgs.text('');
                        setTimeout(() => {
                            window.location = '/fileform/file/file.zip';
                        }, 1000);
                    }
                },
            });
        }

    });
}(jQuery));

Если php-обработчик вернул нам сообщение 'successmsgs', свидетельствующее, что форма прошла все проверки и данные были отправлены на почту, то обращаемся (переходим) к по указанному пути, где лежит файл. Таким образом и достигается искомый результат автоматического скачивания файла.

Кстати, если у вас форма со страницей благодарности, то можете просто разместить не ней, перед закрывающим тегом body:

<script>
(function ($) {
 setTimeout(() => {
   window.location = '/fileform/file/file.zip';
 }, 1000);
}(jQuery));
</script>

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

А как вы реализуете подобный функционал?