Contact Form 7 file upload стилизация

Contact Form 7 WordPress file upload стилизация поля типа File. Оформление поля file Contact Form 7 с помощью плагина jQuery Filestyle. Этот плагин имеет интересный способ представить форму для отправки файлов привлекательной, при этом он простой и эффективный.

Contact Form 7 file upload стилизация

Установка и настройка jQuery Filestyle для поля Contact Form 7 file upload

Весь процесс установки и настройки я разделил на несколько этапов:

  1. Подключение jQuery Filestyle для Contact Form 7 input type="file".
  2. Настройка поля типа file формы в редакторе Contact Form 7.
  3. Настройка параметров и стилизация поля file upload Contact Form 7.

Для начала нужно скачать плагин, перейдя по ссылке — jQuery Filestyle. На сайте автора можно ознакомиться с параметрами, методами и событиями плагина.

Подключение jQuery Filestyle для Contact Form 7 input type="file"

  • Для удобства в папке шаблона сайта я создал подпапку assets а в ней jquery-filestyle, туда загрузил файлы jquery-filestyle.css и jquery-filestyle.min.js.
  • Добавил подключение стилей и скрипта в functions.php шаблона.
function my_scripts_method() {
	// jQuery Filestyle
	wp_enqueue_style( 'filestyle-style', get_template_directory_uri() . '/assets/jquery-filestyle/jquery-filestyle.css', array('paritet-style'), null);
	wp_enqueue_script( 'filestyle-script', get_template_directory_uri() . '/assets/jquery-filestyle/jquery-filestyle.min.js', array('jquery'), null, true );
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
ПРИМЕЧАНИЕ

Скрипты и стили в WordPress можно подключить несколькими способами, вот примеры подключения:
подключение скриптов JS и JQuery к WordPress,
подключение и отключение CSS через functions WordPress.

Настройка поля типа file формы в редакторе Contact Form 7

В редакторе Contact Form 7 я создал какие-то поля, плюс добавил поле типа file и добавил к нему класс jfilestyle.

Класс jfilestyle добавлять обязательно, так как к нему цепляются параметры jQuery Filestyle и по этому классу стилизуется поле.

Настройка поля типа file формы в редакторе Contact Form 7

Готовый шорткод для поля типа поля типа file, его можно просто вставить в редактор формы, подредактировав настройки под свои нужды.

[file file-3000 class:jfilestyle limit:10mb filetypes:pdf|txt|png|jpg|jpeg|docx|doc|xls]

Настройка параметров и стилизация поля file upload

Осталось задать нужные параметры и поправить стили CSS.

Для настройки параметров и стилизации поля file upload Contact Form 7 нужно добавить ниже подключенных стилей и скрипта небольшой код, который приведен ниже.

Итоговый код подключения и настроек jQuery Filestyle в файле functions.php:

<?php function my_scripts_method() {
	// jQuery Filestyle
	wp_enqueue_style( 'filestyle-style', get_template_directory_uri() . '/assets/jquery-filestyle/jquery-filestyle.css', array('paritet-style'), null);
	wp_enqueue_script( 'filestyle-script', get_template_directory_uri() . '/assets/jquery-filestyle/jquery-filestyle.min.js', array('jquery'), null, true );
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
// Параметры jQuery Filestyle
function main_hook_javascript_footer() {
      ?>
        <script>
          (function ($) {
            "use strict";

				  $(":file").jfilestyle({
				    text: 'Выберите файл',
				    theme : 'red',
				    placeholder: 'Файл не выбран'
				  });
            
          })(jQuery);
        </script>
    <?php
}
add_action('wp_footer', 'main_hook_javascript_footer', 999);	

Здесь следует обратить внимание на основные настройки..

  • theme: "blue" — цвет кнопки;
  • dragdrop: false — включает или отключает перетаскивание выбранных файлов;
  • text: "Выберите файл" — изменение текста на кнопке;
  • placeholder: "Файл не выбран" — текст заполнителя поля;
  • inputSize: "400px" — изменить ширину ввода, используются единицы измерения css.
  • buttonBefore: true — кнопка перед полем.

Более подробные можно найти в документации к плагину.

Оставьте комментарий