Застилить кнопку input type file, на бутстрапе, для плагина Contact Form 7

Самый простой способ! На бутстрапе, для плагина 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.

Хэппи кодинг: