تغیر بخش آپلود فرم المنتور
در این آموزش خیلی راحت بخش آپلود فرم المنتور رو خیلی راحت میتونی تغیر بدی
کد js
زبان: JAVASCRIPT
<script>
document.addEventListener('DOMContentLoaded', function () {
const fileInputs = document.querySelectorAll('.elementor-field-type-upload input[type="file"]');
fileInputs.forEach(function (input) {
const label = document.createElement('label');
label.className = 'upload-label';
label.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 16V4m0 0l-4 4m4-4l4 4M4 16v4h16v-4" />
</svg>
<span>انتخاب فایل</span>
`;
input.style.display = 'none';
input.parentNode.insertBefore(label, input);
label.addEventListener('click', () => input.click());
input.addEventListener('change', function () {
const span = label.querySelector('span');
const svg = label.querySelector('svg');
if (input.files.length > 0) {
// انیمیشن fade برای متن
span.classList.add('fade-out');
setTimeout(() => {
span.textContent = input.files[0].name;
span.classList.remove('fade-out');
label.classList.add('uploaded');
// آیکن تغییر کنه به تیک ✅
svg.outerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
`;
}, 200);
} else {
label.classList.remove('uploaded');
span.textContent = 'انتخاب فایل';
}
});
});
});
</script>
کد css
زبان: CSS
.upload-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #f5f5f5;
color: #333;
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
transition: all 0.25s ease;
}
.upload-label:hover {
background: #eaeaea;
}
.upload-label svg {
width: 18px;
height: 18px;
stroke: #555;
transition: all 0.3s ease;
}
.upload-label.uploaded {
border-color: #4caf50;
background: #f0fff4;
color: #2e7d32;
}
.upload-label.uploaded svg {
stroke: #2e7d32;
transform: scale(1.2);
}
.upload-label span {
transition: opacity 0.3s ease;
}
.fade-out {
opacity: 0;
}