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

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

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

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

Попробуйте просто так сделать
Код: 
<label for="uploadbtn" class="uploadButton">Загрузить файл!</label>
<input style="opacity: 0; z-index: -1;" type="file" name="file" id="uploadbtn">
В имени не указывать ни чего кроме file
 
Slon444 написал(а):
вот ссылка на эту тему (если нельзя ссылки то сорри)
автор в коментах тоже что то писал
Нажмите для раскрытия...
Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение
 
Slon444 написал(а):
вставил только css без изменения формы
Нажмите для раскрытия...
Что у вас с css скорей всего. На тестовом сайте я вставлял чистый тег [file file-185] и приведенный мной css.

screenshot61.png
 
Ребят, по мне вы не то делаете, перехват CSS селектора + увеличение приоритета важности и все, самый край скрыть элемент и допилить нужные части с помощью бефор и афтер.
Этот сайт уже опубликован, что бы посмотреть или он на локальном сервере ?
 
Wildcdu написал(а):
Это устарело ((( это 2014 год и плагин сильно изменился. Вечером дам решение. Сейчас извините ехать нужно. Я забросил все данные на тест площадку и разберу по кускам что как и дам решение
Нажмите для раскрытия...
Ок спасибо большое)
 
Di Ost написал(а):
Ребят, по мне вы не то делаете, перехват CSS селектора + увеличение приоритета важности и все, самый край скрыть элемент и допилить нужные части с помощью бефор и афтер.
Этот сайт уже опубликован, что бы посмотреть или он на локальном сервере ?
Нажмите для раскрытия...
он скрыт пока что
 
проблему стилизации поля ввода input[type=file]. Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input[type=file] не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла.

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

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

Вот пример работы http://dc.irtel.ru/sample-page/
 
Попай написал(а):
Я делал с таким тегом [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.

Вот пример работы http://dc.irtel.ru/sample-page/
Нажмите для раскрытия...
И нет отправки файла (
 
подправил письмо и прошла отправка
 
Вот и я о том же, что шаблон письма надо править.

Единственный минус не видно название файла, когда его прикрепил в форме.
 
Попай написал(а):
Вот и я о том же, что шаблон письма надо править.

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

Последние сообщения

Назад
Сверху