Итак, я сделал несколько стилей для кнопки загрузки файла (внешний вид по умолчанию не соответствовал общему виду сайта) и смог добиться, чтобы кнопка выглядела стилизованно, но я потерял текстовое поле location, где оно показывает расположениефайл.
Ниже приведен код CSS, который я добавил в пользовательский CSS Elementor под формой 7 «Основные дополнения», чтобы сделать кнопку стильной:
/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-468 {
display: inline-block;
position: relative;
width: 120px;
height: 40px;
border-radius: 20px;
background: #699FDE;
/*border: solid 1px #4096ee;*/
color: #FFF;
overflow:hidden;
}
/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
input.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: "Browse";
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 12px;
text-transform: uppercase;
}
span.wpcf7-form-control-wrap.file-468:hover {
background: #40B8F4;
}
Вот как у меня есть раздел формы в контактеФорма 7:
<label style="color: white;"> Full Name (required)
[text* your-name] </label>
<label style="color: white;"> Email (required)
[email* your-email] </label>
<label style="color: white;"> Subject
[text your-subject] </label>
<label style="color: white;"> Message
[textarea your-message] </label>
<label style="color: white;"> File Upload
[file file-468 id:fileuploadfield class:fileuploadfield]</label>
[text uploadtextfield id:uploadtextfield class:uploadtextfield]
[submit "Send"]
И это скрипт jQuery, который я пытаюсь использовать внутри дополнительных настроек формы 7 контакта, но пока безуспешно:
jQuery(document).ready(function($) {
/*Click function of fileupload button when text field is clicked*/
$("#uploadtextfield").click(function() {
$('#fileuploadfield').click()
});
/*Click function of fileupload button when browse button is clicked*/
$("input.wpcf7-form-control.wpcf7-file").click(function() {
$('#fileuploadfield').click()
});
/*To bring the selected file value in text field*/
$('#fileuploadfield').change(function() {
$('#uploadtextfield').val($(this).val());
});
})(jQuery);
Любая помощь будет принята.