Формы в Elementor не совсем удобные, не сделать 2 колонки, не сделать форму для публикации постов фронтенд, не сделать пошаговую форму, форму регистрации и так далее.
Поэтому обычно, если на сайте несколько форм, то имеет смысл пользоваться не стандартными формами от Elementor, а с помощью плагина jetformbuilder.
Создайте форму как обычно в jetformbuilder и разместите её на странице.
Теперь сделаем форму загрузки медиа красивой drag-and-drop.
Добавьте виджет HTML и вставьте код:
<script>
document.addEventListener('DOMContentLoaded', function() {
const { addAction } = window.JetPlugins.hooks;
addAction('jet.fb.input.makeReactive', 'set-upload-labels', function(input) {
if (!input?.nodes?.length || !input.nodes[0].classList.contains('jet-form-builder-file-upload__input')) {
return;
}
const $ = jQuery;
const upload = $(input.nodes[0]);
const fields = $(input.nodes[0].closest('.jet-form-builder-file-upload__fields'));
if (!fields.find('.addfile').length) {
fields.append(`<input type="button" class="addfile" value="Загрузить"/>`);
fields.append(`<div class="labeladdfile">Выбрать файлы</div>`);
}
const labelAdd = fields.find('.labeladdfile');
const buttonAdd = fields.find('.addfile');
upload.css('display', 'none');
buttonAdd.click(function() {
upload.trigger('click');
});
input.value.watch(function() {
const fileCount = this.current.length;
const fileText = fileCount > 0 ? `Загруженные файлы (${fileCount})` : 'Выбрать файлы';
buttonAdd.val(fileCount > 0 ? 'Загрузить ещё' : 'Выбрать файлы');
labelAdd.html(fileText);
labelAdd.toggleClass('files-uploaded', fileCount > 0);
});
});
});
</script>Также немного сss:
.jet-form-builder__field-wrap.jet-form-builder-file-upload {
background: #fff !important;
border: 2px dashed #D47DD6 !important;
padding: 20px !important;
text-align: center;
position: relative;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px !important;}
.jet-form-builder-file-upload__file img {
display: block;
width: 100%;
height: 100% !important;
padding: 0;
margin: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
border-radius: 20px !important;}
.jet-form-builder-file-upload__file{background-color:#fff;}
.jet-form-builder-file-upload__content {
min-height: auto !important;}
.addfile {
padding: 10px 20px;
background-color: #D47DD6 !important;
color: #000 !important;
border: none !important;
font-size: 16px;
font-weight: 600;
cursor: pointer;
border-radius: 100px;
margin-top: 10px;}
.labeladdfile {
padding: 6px 12px;
background-color: transparent;
color: #000000 !important;
font-size: 12px;
font-weight: 400;
display: block;
margin-top: 10px;
border-radius: 6px;}
.files-uploaded {
background-color: #f0d5f0 !important;
padding: 6px 12px;
color: #000 !important;
border-radius: 6px;}
.jet-form-builder-file-upload__input {display: none;}
.addfile, .labeladdfile {padding: 8px 16px;font-size: 12px;}
.jet-form-builder-repeater__row-fields{margin-top:30px;}
.jet-form-builder-file-upload__file-remove svg path{fill:#D47DD6;}
.jet-form-builder-file-upload__file-remove{border-radius:100px;opacity:1;left:60px;width:30px;top:70px;background-color:#fff;}И вот что у нас получится 😇
Изображения можно перетаскивать, то есть менять местами.
У меня есть небольшой сниппет, чтобы сделать первое изображение в галерее миниатюрой поста. А также при удалении поста, удалять все прикреплённые медиа.
А вот аватарки таким способом не советую делать, потому что старые аватарки не будут удаляться и это быстро раздует медиатеку.
Недавно вышло обновление и теперь в drag and drop можно сделать с помощью платного дополнения. Но на мой взгляд конечно лучше разместить маленький js на страницу 😺
