В связи с популярностью 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*/)

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

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

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