Почему в Contact Form 7 не обрабатывается скрипт?

Question

[Алина Брэнн]

Мне необходимо было стилизовать инпут файл так, чтоб при этом выводилось в определенном поле название выбранного файла. Всё отлично работает в любом месте шаблона, кроме шаблона формы contact form 7. Уже все перепробовала, и вставляла скрипт в сам шаблон формы, и выводила в хедер, и в футер, <?php wp_head(); ?> и <?php wp_footer(); ?> наместе((( все перепробовала, название все равно не выводится, то есть я вижу, что этот скрипт не обрабатывается именно в форме! Как быть, спасите!

Comments

[Игорь Воротнёв]

код в студию, или нам по кофейной гуще гадать? :)

[Алина Брэнн]

Игорь Воротнёв:
alina_ivanovna @alina_ivanovna
$(document).ready(function() {
$('.custom-file-input').on('change', function() {
realVal = $(this).val();
lastIndex = realVal.lastIndexOf('\\') + 1;
if(lastIndex !== -1) {
realVal = realVal.substr(lastIndex);
$(this).prev('.mask').find('.fileformlabel').val(realVal);
}
});
});
$('.custom-file-input').on('mouseenter mouseleave', function() {
$(this).prev('.mask').find('.selectbutton').toggleClass('hovered');
});

>div class="fileform">
>div class="mask">
>input class="fileformlabel" type="text" placeholder="Нажмите для выбора файла" disabled>
>button class="selectbutton">file.pngОбзор
>/div>
>input id="upload" class="custom-file-input" type="file" name="upload">
>/div>

.fileform {
height: 40px;
width: 100%;
margin-top: 30px;
border: 1px solid #33335b;
background-color: #21213d;
cursor: pointer !important;
position: relative;
text-align: left;
vertical-align: middle;
}
.fileform .selectbutton {
width: 33%;
height: 40px;
margin: -1px 0px -1px -1px;
float: left;
border: none;
background-color: #f96132;
color: #FFFFFF;
font-size: 17px;
line-height: 2;
overflow: hidden;
padding: 2px 6px;
text-align: center;
vertical-align: middle;
}
.fileform .selectbutton img{
margin-right: 15px;
}
.fileform #upload{
position:absolute;
top:0;
left:0;
width:100%;
-moz-opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
font-size: 150px;
height: 40px;
z-index:20;
cursor: pointer;
}
.fileformlabel {
width: 65%;
height: 38px;
padding: 2px;
color: #767b87;
border: none;
float: right;
line-height: 2;
overflow: hidden;
text-align: left;
background-color: #21213d;
vertical-align: middle;
}

.custom-file-input {
width: 252px;
opacity: 0;
filter: alpha(opacity=0);
position: relative;
top: -27px;
left: -16px;
z-index: 99999;
cursor: pointer;
}
.hovered {
color: #888;
}

вот собственно код поля
и ссылка на сайт www.mgimotranslate.ru еще только в процессе

Answer 1

[litvin2]

"чтоб выводилось в определенном поле название выбранного файла" –-– конкретнее можно?
А лучше, ссылку на страницу, где это уже работает.

Comments

[Алина Брэнн]

www.radiant-wind.com/categories/javascript-css-htm...
Вот отсюда бралось оформление