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

[Slon444]

Всем привет! решил сделать себе сайт на wordpress! Возникла проблема с настройкой стилей контакт форм7,, не пойму куда и что надо вписывать( нужно поменять стандартную кнопку загрузить файл на свой.. в интернете искал но толкам не понимаю что делать....
на одном из сайтом описано так

пару стилей в style.css.
[CSS].uploadButton {
display: block;
width: 100px;
background: #3df;
padding: 10px;
color: #FFF;
font-size: 16px;
font-weight: bold;
font-family: Tahoma;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
.uploadButton:hover {
background: #3ce;
}[/CSS]
2. И немного изменил код кнопки в форме:

<label for="uploadbtn" class="uploadButton">Загрузить файл</label>
<input style="opacity: 0; z-index: -1;" type="file" name="upload" id="uploadbtn">

и все красиво получилось у автора
у меня хрень получается,,,,,, Подскажите пошагово что надо делать.. извините если вопрос глуповат,,,

 

[Попай]

Можете воспользоваться таким вариантом. Добавьте стили в свой шаблон:

[CSS].wpcf7-form-control-wrap.file-185 {
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;
}


.wpcf7-form-control.file-185 {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}

/* Добавляем текст кнопки */
.file-185: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]

Это пример, а так надо более точно подгонять стили по вашему вкусу.

 

[Wildcdu]

Для исправления ситуации делаете так. (в начале все правильно Вы сделали)
Когда Вы вставляете новый код кнопки в форму, сначала вставьте кнопку как обычно она Вам даст код примерно такой
[file file-796] тут важен вот этот момент file-796
Потом перед Вашей кнопкой вставляете свой код
И в нем меняете name на свой

<label for="uploadbtn" class="uploadButton">Загрузить файл!</label>
<input style="opacity: 0; z-index: -1;" type="file" name="file-796" id="uploadbtn">

Все.

 

[Wildcdu]

Можете воспользоваться таким вариантом. Добавьте стили в свой шаблон:

[CSS].wpcf7-form-control-wrap.file-185 {
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;
}


.wpcf7-form-control.file-185 {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}

/* Добавляем текст кнопки */
.file-185: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]

не будет работать если не поменять имя ((( и каждый раз придется под новую кнопку переписывать или добавлять

 

[Wildcdu]

Да забыл добавить, после того как заработает, Вам скорее всего придется править стили кнопки под Вашу ситуацию. (фон размер итд) И убрать код вставки по умолчанию (который содержит file file-796)

 

[Попай]

не будет работать если не поменять имя ((( и каждый раз придется под новую кнопку переписывать или добавлять

Так если на сайте всего 1-5 кнопок, то не страшно.

[file file-796] тут важен вот этот момент file-796
Потом перед Вашей кнопкой вставляете свой код
И в нем меняете name на свой

Ты так тестировал, файлы на почту будут приходить через такой шаблон? Я просо с contact form 7 углублено не ковырялся.

 

[Wildcdu]

Не тестил, но тут момент такой меняется только оформление остальное родное (тип file имя file-чего_то_там) так что вопросов не возникнет.

 

[Попай]

Возможно, но решил что через css будет наверняка.

 

[Wildcdu]

Возможно, но решил что через css будет наверняка.

Так и это через CSS только отличие в том что стиль назначен один а присваивается он по имени, грубо у нас прописаны стили например ссылок и назначаются они посредством указания имени например url-action и к имени стиль зеленые ссылки и желтеют при наведении )

 

[Slon444]

Можете воспользоваться таким вариантом. Добавьте стили в свой шаблон:

[CSS].wpcf7-form-control-wrap.file-185 {
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;
}


.wpcf7-form-control.file-185 {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}

/* Добавляем текст кнопки */
.file-185: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]

Для исправления ситуации делаете так. (в начале все правильно Вы сделали)
Когда Вы вставляете новый код кнопки в форму, сначала вставьте кнопку как обычно она Вам даст код примерно такой
[file file-796] тут важен вот этот момент file-796
Потом перед Вашей кнопкой вставляете свой код
И в нем меняете name на свой

<label for="uploadbtn" class="uploadButton">Загрузить файл!</label>
<input style="opacity: 0; z-index: -1;" type="file" name="file-796" id="uploadbtn">

Все.

Спасибо большое! Все сделал как описали но файлы на почту не приходят (

 

[Wildcdu]

Спасибо большое! Все сделал как описали но файлы на почту не приходят (

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

 

[Slon444]

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

Нет не отправляет🙁

 

[Wildcdu]

Нет не отправляет🙁

думаю тут уже не в контакт форме дело )

 

[Wildcdu]

думаю в wp-config.php нужно прописать темп папку для хранения файлов
define( 'WPCF7_UPLOADS_TMP_DIR', '/your/file/path' );

 

[Wildcdu]

Хотя думаю нет. сначала нужно посмотреть есть ли папка созданная автоматически

 

[Wildcdu]

Простите, я забегался и не подсказал правильно про прикрепеление файлов!!!
Вам нужно просто в форме письма вставить тег Ваш и все например как выше я приводил примеры тег будет таким
[file-796]
Переходите в настройку контактной формы -> письмо и в самом низу вставляете прикрепление файла (вверху как раз есть подсказка тега)

 

[Slon444]

Простите, я забегался и не подсказал правильно про прикрепеление файлов!!!
Вам нужно просто в форме письма вставить тег Ваш и все например как выше я приводил примеры тег будет таким
[file-796]
Переходите в настройку контактной формы -> письмо и в самом низу вставляете прикрепление файла (вверху как раз есть подсказка тега)

У меня там стоит это тег. файлы приходят, но как меняю кнопку перестают

 

[Wildcdu]

У меня там стоит это тег. файлы приходят, но как меняю кнопку перестают

Ах вот в чем дело ) сейчас гляну на тестовой площадке

 

[Slon444]

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