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

[Wildcdu]

Попробуйте просто так сделать

У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.

В имени не указывать ни чего кроме file

 

[Wildcdu]

вот ссылка на эту Для просмотра ссылки Войди или Зарегистрируйся (если нельзя ссылки то сорри)
автор в коментах тоже что то писал

Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение

 

[Попай]

вставил только css без изменения формы

Что у вас с css скорей всего. На тестовом сайте я вставлял чистый тег [file file-185] и приведенный мной css.

 

[Di Ost]

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

 

[Slon444]

Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение

Ок спасибо большое)

 

[Slon444]

Что у вас с css скорей всего. На тестовом сайте я вставлял чистый тег [file file-185] и приведенный мной css.

Посмотреть вложение 2029

а файлы на почту приходят?

 

[Slon444]

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

он скрыт пока что

 

[Попай]

а файлы на почту приходят?

А почему он не будет приходить? Это функционал плагина. Только надо ещё шаблон проходимого письма подправить.

 

[Wildcdu]

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

Есть костыли... но думаю это лишнее.
Не знаю про пример Попай пробовал его вариант во всех ипостасях и не смог добиться такого. Точнее не добился работы этого варианта. Может кто то покажет Вам рабочий вариант
Я лично только могу менять например так

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

 

[Попай]

Wildcdu, что-то тут мудришь. Надо поставить в нашей песочнице. А то прям проблема раздувается.

 

[Slon444]

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

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

У меня тоже вот так получается( не скрывается! шаблон битемс

 

[Wildcdu]

Wildcdu, что-то тут мудришь. Надо поставить в нашей песочнице. А то прям проблема раздувается.

Поставил... мучал... пробуй ты

 

[Wildcdu]

Грубо при попытке изменить кнопку вмешивается user agent и блокирует стили... возможно (я не пробовал) если в браузере отключить агента то будет показываться оформление... не знаю этот момент

 

[Попай]

Я делал с таким тегом [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]

Я делал с таким тегом [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.

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

И нет отправки файла (

 

[Попай]

А почему нет отправки файла? Я то правил только стили. Прикрепленный файл в письме подправил.

 

[Slon444]

А почему нет отправки файла? Я то правил только стили.

Я вот вторые сутки об этом думаю)

 

[Wildcdu]

подправил письмо и прошла отправка

 

[Попай]

Вот и я о том же, что шаблон письма надо править.

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

 

[Wildcdu]

Вот и я о том же, что шаблон письма надо править.

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

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