• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

    Мы активно растущий клуб по WordPress и нам нужна помощь каждого человека, в том числе и Ваша! Не стесняйтесь и станьте частью большого сообщества.
    Мы делимся новостями, отытом и полезными советами! Пройдите простую регистрацию, чтобы пользоваться всеми возможностями нашего клуба.

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

Вопрос Как сделать красивую кнопку загрузки "Выберите файл" в contact form7 - WordPress

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Попробуйте просто так сделать
Код:
<label for="uploadbtn" class="uploadButton">Загрузить файл!</label>
<input style="opacity: 0; z-index: -1;" type="file" name="file" id="uploadbtn">
В имени не указывать ни чего кроме file
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
вот ссылка на эту Для просмотра ссылки Войди или Зарегистрируйся (если нельзя ссылки то сорри)
автор в коментах тоже что то писал
Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247

Di Ost

WP шаман
СВОЙ

Di Ost

WP шаман
СВОЙ
Сообщения
271
Ребят, по мне вы не то делаете, перехват CSS селектора + увеличение приоритета важности и все, самый край скрыть элемент и допилить нужные части с помощью бефор и афтер.
Этот сайт уже опубликован, что бы посмотреть или он на локальном сервере ?
 

Slon444

ПРОВЕРЕННЫЙ

Slon444

ПРОВЕРЕННЫЙ
Сообщения
17
Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение
Ок спасибо большое)
 

Slon444

ПРОВЕРЕННЫЙ

Slon444

ПРОВЕРЕННЫЙ
Сообщения
17
Ребят, по мне вы не то делаете, перехват CSS селектора + увеличение приоритета важности и все, самый край скрыть элемент и допилить нужные части с помощью бефор и афтер.
Этот сайт уже опубликован, что бы посмотреть или он на локальном сервере ?
он скрыт пока что
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
проблему стилизации поля ввода input[type=file]. Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input[type=file] не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла.

Есть костыли... но думаю это лишнее.
Не знаю про пример Попай пробовал его вариант во всех ипостасях и не смог добиться такого. Точнее не добился работы этого варианта. Может кто то покажет Вам рабочий вариант
Я лично только могу менять например так
11111.png
С учетом оформления темы
И это работает (цвет размер все меняется)
Стилизовать кнопку отправить не проблема а вот с импутом я проблему описал
Про костыли... есть 3 варианта с ними нужно играться и пробовать, почему играться и пробовать, во первых знаю как на PHP это делать а вот как совместить с Контакт формой... тут вопрос... тут будет сложно точно тк в PHP это просто поле-кнопка ввода-выбора а в контакт форме это шорт код со своим обработчиком получается для совмещения придется еще один костыль строить
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247

Slon444

ПРОВЕРЕННЫЙ

Slon444

ПРОВЕРЕННЫЙ
Сообщения
17
проблему стилизации поля ввода input[type=file]. Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input[type=file] не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла.

Есть костыли... но думаю это лишнее.
Не знаю про пример Попай пробовал его вариант во всех ипостасях и не смог добиться такого. Точнее не добился работы этого варианта. Может кто то покажет Вам рабочий вариант
Я лично только могу менять например так
Посмотреть вложение 2033
С учетом оформления темы
И это работает (цвет размер все меняется)
Стилизовать кнопку отправить не проблема а вот с импутом я проблему описал
Про костыли... есть 3 варианта с ними нужно играться и пробовать, почему играться и пробовать, во первых знаю как на PHP это делать а вот как совместить с Контакт формой... тут вопрос... тут будет сложно точно тк в PHP это просто поле-кнопка ввода-выбора а в контакт форме это шорт код со своим обработчиком получается для совмещения придется еще один костыль строить
У меня тоже вот так получается( не скрывается! шаблон битемс
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Грубо при попытке изменить кнопку вмешивается user agent и блокирует стили... возможно (я не пробовал) если в браузере отключить агента то будет показываться оформление... не знаю этот момент
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247
Я делал с таким тегом [file wpcf7-file], а с этим тегом [file file-185] стили почему-то не срабатывают до конца. Просто сейчас нет времени смотреть и подправлять стили.

Стили в своем варианте ставил эти:
[CSS].wpcf7-form-control-wrap.wpcf7-file {
display: inline-block;
position: relative;
width: 150px;
height: 40px;
border-radius: 5px;
border: solid 1px #4096ee;
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
color: #FFF;
overflow:hidden;
}

/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}

/* Add button text */
.wpcf7-file:before {
content: "Загрузить файл";
display: block;
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}[/CSS]

Под каждый шаблон скорей всего надо подправлять стили CSS.

Вот пример работы Для просмотра ссылки Войди или Зарегистрируйся
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Я делал с таким тегом [file wpcf7-file], а с этим тегом [file file-185] стили почему-то не срабатывают до конца. Просто сейчас нет времени смотреть и подправлять стили.

Стили в своем варианте ставил эти:
[CSS].wpcf7-form-control-wrap.wpcf7-file {
display: inline-block;
position: relative;
width: 150px;
height: 40px;
border-radius: 5px;
border: solid 1px #4096ee;
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
color: #FFF;
overflow:hidden;
}

/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}

/* Add button text */
.wpcf7-file:before {
content: "Загрузить файл";
display: block;
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}[/CSS]

Под каждый шаблон скорей всего надо подправлять стили CSS.

Вот пример работы Для просмотра ссылки Войди или Зарегистрируйся
И нет отправки файла (
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247
А почему нет отправки файла? Я то правил только стили. Прикрепленный файл в письме подправил.
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
подправил письмо и прошла отправка
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247
Вот и я о том же, что шаблон письма надо править.

Единственный минус не видно название файла, когда его прикрепил в форме.
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Вот и я о том же, что шаблон письма надо править.

Единственный минус не видно название файла, когда его прикрепил в форме.
Сравню твой код и то что я мучал... странно то что все совпадает (может где то разница есть не увидел сходу)
Принцип тот же делаем свою форму старую скрываем растягиваем и имитируем в новой клик по старой...
 
Сверху