Самый простой способ! На бутстрапе, для плагина Contact Form 7 и вордпресса.
В Гугле можно найти множество способов застилить кнопку загрузки файлов. Нативного способа нет, проблема решается с помощью css и java-script. Например, самый классный вариант здесь: Styling & Customizing File Inputs the Smart Way.
К сожалению, плагин Contact Form 7 накладывает определенные ограничения. В частности, мы не можем привязать к инпуту дополнительные параметры:
data-multiple-caption="{count} files selected" multiple
Инпут файла перестает выводится вовсе. А значит — мы не можем быстро и просто привязать ява-скрипт к инпуту.
Слава Бутстрапу — у них есть целый набор готовых стилей здесь: Bootstrap / jQuery input type file upload buttons and script, вместе с демо и исходными кодами.
Не забудьте прикрепить файлики bootstrap-filestyle.min.js, они доступны внутри демо-страниц, по таким адресам, например:
http://www.jquery-az.com/boots/js/bootstrap-filestyle.min.js.
Тогда в настройках Contact Form 7 функционал инпута вы прописываете например так:
<div class="form-group"> [file your-file id:icondemo ] </div>
А в кастомном ява-скрипте прописываете:
$('#icondemo').filestyle({ iconName : 'glyphicon glyphicon-download-alt', buttonText : 'Select File', buttonName : 'btn-warning' });
И ВСЁ!!!
Для смены стиля кнопки — класс btn-warning (или другой — ваш), для смены иконки — глифониконы отсюда — getbootstrap.com/components.
Хэппи кодинг:
You must be logged in to post a comment.