Вторник, 14 Октябрь 2014 06:35

Adobe Muse форма обратной связи с прикреплением файла

Автор
Оцените материал
(33 голосов)

В связи с популярностью LandingPage последнее время, люди массово ломанулись их делать.

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

Их web-дизайнер категорически отказался это делать. Как выяснилось, для таких страничек есть замечательный инструмент Adobe Muse. (Да Adobe как всегда идет в ногу со временем!) В нем присутствует куча готовых фенечек и дизайнер без знания css, html, php и чего бы то ни было еще быстро и недорого клепает странички.

Там есть готовые формы обратной связи, но вот незадача, поставить галочку напротив пункта "отправить файл" нельзя. Его там попросту нет!

Что же делать? А нужно просто залезть в код и немножко поправить ручками ;)


Итак:

 1) Находим в файле index.html место где описывается форма, тегом <form>

Выглядит примерно так:

         <form class="form-grp clearfix grpelem" id="widgetu633" method="post" enctype="multipart/form-data" action="scripts/form-u633.php"><!-- none box -->
          <div class="fld-grp clearfix grpelem" id="widgetu639" data-required="true"><!-- none box -->
           <span class="fld-input NoWrap actAsDiv rounded-corners clearfix grpelem" id="u642-4" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U642"><!-- content --><input class="wrapped-input" type="text" spellcheck="false" id="widgetu639_input" name="custom_U639" tabindex="1"/><label class="wrapped-input fld-prompt" id="widgetu639_prompt" for="widgetu639_input"><span class="actAsPara">Ваше имя</span></label></span>
          </div>
          <input class="submit-btn NoWrap grpelem" id="u634-17" type="submit" value="" tabindex="4"/> <!--state-based BG images -->
         </form>

красным выделил важный момент. Тот файл куда будет отправлен SUBMIT (кнопка отправить). Нам этот файл понадобится попозже.

2) Вставляем перед <input class> с типом "submit" поле для прикрепления файла:

<input class="fld-input NoWrap actAsDiv" id="u634-file" name="userfile" type="file">


в итоге получается так:

         <form class="form-grp clearfix grpelem" id="widgetu633" method="post" enctype="multipart/form-data" action="scripts/form-u633.php"><!-- none box -->
          <div class="fld-grp clearfix grpelem" id="widgetu639" data-required="true"><!-- none box -->
           <span class="fld-input NoWrap actAsDiv rounded-corners clearfix grpelem" id="u642-4" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U642"><!-- content --><input class="wrapped-input" type="text" spellcheck="false" id="widgetu639_input" name="custom_U639" tabindex="1"/><label class="wrapped-input fld-prompt" id="widgetu639_prompt" for="widgetu639_input"><span class="actAsPara">Ваше имя</span></label></span>
          </div>
          <input class="fld-input NoWrap actAsDiv" id="u634-file" name="userfile" type="file">
          <input class="submit-btn NoWrap grpelem" id="u634-17" type="submit" value="" tabindex="4"/> <!--state-based BG images -->
         </form>

3) В этом же файле "index.html" ближе к концу есть строки со скриптами виджетов. Так как у нас ID формы id="widgetu633", то ищем строку:

Muse.Utils.initWidget('#widgetu633', function(elem) { new WebPro.Widget.Form(elem, {validationEvent:'submit',errorStateSensitivity:'high',fieldWrapperClass:'fld-grp',formSubmittedClass:'frm-sub-st',formErrorClass:'frm-subm-err-st',formDeliveredClass:'frm-subm-ok-st',notEmptyClass:'non-empty-st',focusClass:'focus-st',invalidClass:'fld-err-st',requiredClass:'fld-err-st',ajaxSubmit:true}); })

Обращаем внимание на последнюю настройку: ajaxSubmit:true, ставим ее в false (отключаем отправку с использованием AJAX) иначе будут проблемы с чтением файла. В итоге должна получиться строка:

Muse.Utils.initWidget('#widgetu633', function(elem) { new WebPro.Widget.Form(elem, {validationEvent:'submit',errorStateSensitivity:'high',fieldWrapperClass:'fld-grp',formSubmittedClass:'frm-sub-st',formErrorClass:'frm-subm-err-st',formDeliveredClass:'frm-subm-ok-st',notEmptyClass:'non-empty-st',focusClass:'focus-st',invalidClass:'fld-err-st',requiredClass:'fld-err-st',ajaxSubmit:false}); })

4) правим index.css в папке css. Добавляем стили к нашему новому полю чтобы оно органично смотрелось на форме. У меня получилось так:

#u634-file
{
    z-index: 457;
    min-height: 48px;
    width: 270px;
    position: relative;
    margin-right: -10000px;
    margin-top: 40px;
    left: 150px;
}

5) Находим в папке SCRIPTS наш скрипт (в пункте 1 выделял красным) который обрабатывает нажатие кнопки отправить. В нашем случае это файл: form-u633.php

И дополняем функцию emailFormSubmission()

после строки $message = cleanupMessage($message);

добавляем код:

    $un        = strtoupper(uniqid(time()));
    $head     = 'From: Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.' . PHP_EOL .'X-Mailer: Adobe Muse 2014.0.30 with PHP/' . phpversion() .'/'. PHP_OS . PHP_EOL;
    $head  .= "Mime-Version: 1.0\n";
    $head  .= "Content-Type:multipart/mixed; charset=utf-8; ";
    $head  .= "boundary=\"----------".$un."\"\n\n";


    $body   = "------------".$un."\nContent-Type:text/html; charset=utf-8;\n";
    $body   .= "Content-Transfer-Encoding: 8bit\n\n".$message."\n\n";
    foreach($_FILES as $value)
    {
        if(!empty($value['tmp_name']))
        {
            $body   .= "------------".$un."\n";
            $body   .= "Content-Type: ".$value['type'].";";
            $body   .= "name=\"".basename($value['name'])."\"\n";
            $body   .= "Content-Transfer-Encoding:base64\n";
            $body   .= "Content-Disposition:attachment;";
            $body   .= "filename=\"".basename($value['name'])."\"\n\n";
            $body   .= chunk_split(base64_encode(file_get_contents($value['tmp_name'])))."\n";
        }
    }
    
    /*
    $sent = @mail($to, $subject, $message, $headers);
    */
    
    $sent = @mail($to, $subject, $body, $head);

 

ВАЖНО! Не забыть поправить строку отправки у нас переменная $message меняется на $body

ВСЕ! Проверяйте, должно работать.


 

Дополнение для Muse 2016 от 21.04.2016:

(спасибо Александру Юстусу и Наталье Слепцовой за присланные проекты из Adobe Muse 2016)

В новой версии Adobe Muse, код отправки e-mail'a вынесен в отдельный файл form_process.php, соответственно пятый пункт будет выглядеть так:

Находим в папке SCRIPTS файл form_process.php. В нем правим функцию email_form_submission.

Комментируем строчки:

$headers = get_email_headers($to, $form_email);

$sent = @mail($to, $subject, $message, $headers);

И добавляем вместо них код (заключил между комментариями /*kuzevich.ru*/)

В итоге функция должна выглядеть так:

function email_form_submission($form) {
if(!defined('PHP_EOL'))
define('PHP_EOL', '\r\n');


$form_email = ((array_key_exists('Email', $_REQUEST) && !empty($_REQUEST['Email'])) ? cleanup_email($_REQUEST['Email']) : '');

$to = $form['email']['to'];
$subject = $form['subject'];
$message = get_email_body($subject, $form['heading'], $form['fields'], $form['resources']);

/*
$headers = get_email_headers($to, $form_email);

$sent = @mail($to, $subject, $message, $headers);*/

/*kuzevich.ru*/
$un = strtoupper(uniqid(time()));
$head = 'From: ' . $form['email']['from'] . PHP_EOL .'X-Mailer: Adobe Muse 2014.0.30 with PHP/' . phpversion() .'/'. PHP_OS . PHP_EOL;
$head .= "Mime-Version: 1.0\n";
$head .= "Content-Type:multipart/mixed; charset=utf-8; ";
$head .= "boundary=\"----------".$un."\"\n\n";


$body = "------------".$un."\nContent-Type:text/html; charset=utf-8;\n";
$body .= "Content-Transfer-Encoding: 8bit\n\n".$message."\n\n";
foreach($_FILES as $value)
{
if(!empty($value['tmp_name']))
{
$body .= "------------".$un."\n";
$body .= "Content-Type: ".$value['type'].";";
$body .= "name=\"".basename($value['name'])."\"\n";
$body .= "Content-Transfer-Encoding:base64\n";
$body .= "Content-Disposition:attachment;";
$body .= "filename=\"".basename($value['name'])."\"\n\n";
$body .= chunk_split(base64_encode(file_get_contents($value['tmp_name'])))."\n";
}
}

$sent = @mail($to, $subject, $body, $head);
/*kuzevich.ru*/

if(!$sent)
die(get_form_error_response($form['resources']['failed_to_send_email']));

$success_data = array(
'redirect' => $form['success_redirect']
);

echo get_form_response(true, $success_data);
}

Вот теперь все ;)

На всякий случай прикрепляю сам исправленный файл form_process.php

 

Прочитано 54770 раз
Комментарии   
0 #25 triitall89 28.11.2019 13:22
Большое спасибо за ваши труды.

“Все люди разные и программисты в том числе. Одни могут летать в облаках, другие будут “цепляться” к деталям - и те и другие важны, пусть и для различных позиций, задач и даже компаний.
А так, главное, чтобы человек был хороший.
Цитировать
+1 #24 Kuzevich 09.02.2018 14:09
Цитирую Айнур:
А как сделать его не обязательным для заполнения?


htmlbook.ru/html/input/required
Цитировать
+1 #23 Айнур 30.01.2018 11:19
А как сделать его не обязательным для заполнения?
Цитировать
+1 #22 Kuzevich 09.12.2016 14:17
Цитирую bb:
поправьте файл пожалуйста, при скачивании выдаёт K2_FILE_DOES_NOT_EXIST


перезалил
Цитировать
+1 #21 bb 07.12.2016 12:52
поправьте файл пожалуйста, при скачивании выдаёт K2_FILE_DOES_NOT_EXIST
Цитировать
+4 #20 Mellofon 10.10.2016 14:53
Добрый день!

Форма с файлом отправляется - но после отправки выкидывает на страницу http://мой-домен/scripts/form-u1853.php где на экран выводится:
{"FormResponse": {"success": true, "redirect": ""}}{"FormResponse": {"success": true, "redirect": ""}}

Не подскажете как перенаправить на нужную мне страницу?
Спасибо!
Цитировать
+2 #19 Никита 10.10.2016 10:18
Всё отлично работает вот только с сайта бросает на старинцу формы с сообщением: {"FormResponse": {"success": true, "redirect": ""}} Подскажите пожалуйста как сделать так что бы просто вылезало сообщение что форма отправлена без редиректа??
Цитировать
+1 #18 Kuzevich 22.08.2016 17:23
Цитирую СЛЕПЦОВ ГЕОРГИЙ:
Как из ФОС передать в upsell.php Имя и тлф.?


Добрый день, Георгий.
На сколько я понимаю, Ваш сайт использует расширение корзины для Adobe Muse. К сожалению, я с ним не знаком, поэтому ничего не могу посоветовать.
Цитировать
+1 #17 СЛЕПЦОВ ГЕОРГИЙ 22.08.2016 15:50
Браво, ГУРУ! Браво!!! А возможно ли решение такой проблемы на сайте от AdobeMuse. На странице есть Форма Обратной Связи(ФОС). Клиент ввел Имя и тлф, нажал кн Отправить. После отправки сообщения сразу переходим на страницу с upsell.php. ВОПРОС: Как из ФОС передать в upsell.php Имя и тлф.?
Для чего это нужно: в upsell.php под каждым товаром есть кн "Добавить". Клиент выбирает нужный товар, нажимает Добавить, а мы берем Имя и тлф., переданные из ФОС, + Наименование товара из upsell.php и отправляем сообщение. Upsell.php есть и работает, но отправляет письма без Имени и тлф. С уважением, Георгий.
Цитировать
+1 #16 Kuzevich 16.08.2016 05:14
Цитирую Никита:
Подскажите пожалуйста что дописать в form_process.php что бы несколько фаилов можно было загружать а не один ??? :cry:


Надо в index.html вставить еще одно поле типа file.



А в form_process уже есть цикл по всем переменным формы типа file.
Цитировать
Добавить комментарий