RALA SoftWash 300-E

[algebehandling_el] 604327 – Elektrisk Algebehandling – 04 604327 – Elektrisk Algebehandling – 03 604327 – Elektrisk Algebehandling – 05 #stack-1964459458 > * { --stack-gap: 0rem; } (function initFormPopup() { console.log('DEBUG: Script initializing...'); // Create popup immediately var popup = document.createElement('div'); popup.className = 'custom-form-popup'; popup.setAttribute('role', 'status'); popup.setAttribute('aria-live', 'polite'); popup.style.display = 'none'; document.body.appendChild(popup); console.log('DEBUG: Popup element created'); function showPopup(type) { popup.classList.remove('error'); if (type === 'error') { popup.classList.add('error'); popup.innerHTML = 'Husk at udfylde felterneKontroller venligst alle felter og prøv igen.'; } else { popup.innerHTML = 'TAK FOR DIN FORESPØRGSEL!Vi har modtaget din besked og vender tilbage hurtigst muligt.'; } popup.style.display = 'block'; console.log('DEBUG: Popup shown with type=' + type); clearTimeout(showPopup.timer); showPopup.timer = setTimeout(function () { popup.style.display = 'none'; }, 5000); } // Function to hide default CF7 output and attach listeners function setupForm() { var formWrap = document.querySelector('.min-produkt-formular'); if (!formWrap) { console.log('DEBUG: .min-produkt-formular not found yet, retrying...'); setTimeout(setupForm, 500); return; } var cf7Form = formWrap.querySelector('.wpcf7'); if (!cf7Form) { console.log('DEBUG: .wpcf7 not found, trying document.querySelector...'); cf7Form = document.querySelector('.wpcf7'); if (!cf7Form) { console.log('DEBUG: .wpcf7 not found anywhere'); return; } } console.log('DEBUG: CF7 form found!', cf7Form); // Hide default output function hideDefaultOutput() { var output = cf7Form.querySelector('.wpcf7-response-output'); if (output) { output.style.display = 'none !important'; output.setAttribute('aria-hidden', 'true'); console.log('DEBUG: Default output hidden'); } } hideDefaultOutput(); // Listen for output being added/modified var observer = new MutationObserver(function(mutations) { hideDefaultOutput(); }); observer.observe(cf7Form, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); // Attach event listeners cf7Form.addEventListener('wpcf7mailsent', function(e) { console.log('DEBUG: wpcf7mailsent triggered', e); hideDefaultOutput(); showPopup('success'); }, false); cf7Form.addEventListener('wpcf7:mailsent', function(e) { console.log('DEBUG: wpcf7:mailsent triggered', e); hideDefaultOutput(); showPopup('success'); }, false); cf7Form.addEventListener('wpcf7invalid', function(e) { console.log('DEBUG: wpcf7invalid triggered', e); showPopup('error'); }, false); cf7Form.addEventListener('wpcf7:invalid', function(e) { console.log('DEBUG: wpcf7:invalid triggered', e); showPopup('error'); }, false); console.log('DEBUG: All event listeners attached'); } // Try multiple triggers if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', setupForm); } else { setupForm(); } // Also try after a short delay for safety setTimeout(setupForm, 1000); })(); /* ===== BASE STYLES ===== */ .min-produkt-formular { max-width: 520px; margin: 0 auto; padding: 12px 12px 16px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif !important; color: #333 !important; } .min-produkt-formular *, .min-produkt-formular *::before, .min-produkt-formular *::after { box-sizing: border-box !important; } .min-produkt-formular p, .min-produkt-formular h3, .min-produkt-formular label, .min-produkt-formular input, .min-produkt-formular textarea, .min-produkt-formular button, .min-produkt-formular span { font-family: Arial, Helvetica, sans-serif !important; line-height: 1.5 !important; letter-spacing: normal !important; text-transform: none !important; } /* 1. Intro-tekst styling */ .min-produkt-formular .intro-tekst { display: block !important; width: 100% !important; line-height: 1.6 !important; margin: 6px 0 !important; font-size: 15px !important; color: #555 !important; box-sizing: border-box !important; } /* 2. Overskriften */ .min-produkt-formular h3 { font-size: clamp(18px, 5vw, 24px) !important; font-weight: 700 !important; margin-bottom: 6px !important; margin-top: 0 !important; color: #1a1a1a !important; } /* 3. Label styling */ body .min-produkt-formular label, .min-produkt-formular label { display: block !important; font-weight: 700 !important; margin-bottom: 4px !important; margin-top: 8px !important; color: #333 !important; width: 100% !important; font-size: 13px !important; box-sizing: border-box !important; text-transform: none !important; letter-spacing: normal !important; background: transparent !important; border: none !important; padding: 0 !important; } .min-produkt-formular label:first-of-type { margin-top: 12px !important; } /* 4. Form control wrapper - reset */ .min-produkt-formular .wpcf7-form-control-wrap { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 5. Clean-text input (inline product name) */ .min-produkt-formular .clean-text, .min-produkt-formular .clean-text .wpcf7-form-control-wrap, .min-produkt-formular .clean-text input, .min-produkt-formular input.clean-text, .min-produkt-formular .wpcf7-form-control-wrap input.clean-text { display: inline !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; background-color: transparent !important; border-radius: 0 !important; font-weight: 600 !important; color: inherit !important; box-shadow: none !important; -webkit-box-shadow: none !important; pointer-events: none !important; height: auto !important; min-height: 0 !important; line-height: inherit !important; font-size: inherit !important; } /* 6. INPUT FIELDS STYLING */ body .min-produkt-formular input[type="text"], body .min-produkt-formular input[type="email"], body .min-produkt-formular input[type="tel"], body .min-produkt-formular textarea, .min-produkt-formular input[type="text"], .min-produkt-formular input[type="email"], .min-produkt-formular input[type="tel"], .min-produkt-formular textarea { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 12px !important; font-size: 14px !important; line-height: 1.4 !important; height: auto !important; min-height: 38px !important; margin: 0 !important; max-width: 100% !important; background-color: #ffffff !important; background: #ffffff !important; border: 1px solid #d0d0d0 !important; border-radius: 6px !important; -webkit-transition: all 0.2s ease !important; -moz-transition: all 0.2s ease !important; transition: all 0.2s ease !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; color: #333 !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; } /* Hide only the duplicate textarea that CF7 sometimes injects after the real one */ .min-produkt-formular textarea + textarea { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .min-produkt-formular textarea, .min-produkt-formular textarea.wpcf7-form-control, .min-produkt-formular textarea[rows], .min-produkt-formular .wpcf7-form-control-wrap textarea[rows] { min-height: 50px !important; height: 50px !important; max-height: 50px !important; resize: vertical !important; display: block !important; overflow: auto !important; line-height: 1.4 !important; } /* Hide Google reCAPTCHA's internal response textarea */ .min-produkt-formular textarea#g-recaptcha-response, .min-produkt-formular textarea[name="g-recaptcha-response"], .min-produkt-formular .g-recaptcha-response, .min-produkt-formular .wpcf7-form-control-wrap textarea[name="g-recaptcha-response"] { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; opacity: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* Focus state */ .min-produkt-formular input[type="text"]:focus, .min-produkt-formular input[type="email"]:focus, .min-produkt-formular input[type="tel"]:focus, .min-produkt-formular textarea:focus { outline: none !important; border-color: #1a4d7a !important; background-color: #ffffff !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(26, 77, 122, 0.1) !important; -webkit-box-shadow: 0 0 0 3px rgba(26, 77, 122, 0.1) !important; } /* Hover state */ .min-produkt-formular input[type="text"]:hover, .min-produkt-formular input[type="email"]:hover, .min-produkt-formular input[type="tel"]:hover, .min-produkt-formular textarea:hover { border-color: #1a4d7a !important; background-color: #ffffff !important; background: #ffffff !important; } /* Placeholder styling */ .min-produkt-formular input[type="text"]::placeholder, .min-produkt-formular input[type="email"]::placeholder, .min-produkt-formular input[type="tel"]::placeholder, .min-produkt-formular textarea::placeholder { color: #999 !important; } .min-produkt-formular input[type="text"]::-webkit-input-placeholder, .min-produkt-formular input[type="email"]::-webkit-input-placeholder, .min-produkt-formular input[type="tel"]::-webkit-input-placeholder, .min-produkt-formular textarea::-webkit-input-placeholder { color: #999 !important; } .min-produkt-formular input[type="text"]:-moz-placeholder, .min-produkt-formular input[type="email"]:-moz-placeholder, .min-produkt-formular input[type="tel"]:-moz-placeholder, .min-produkt-formular textarea:-moz-placeholder { color: #999 !important; opacity: 1 !important; } /* reCAPTCHA Container styling */ .min-produkt-formular .recaptcha-container { margin-top: 8px !important; margin-bottom: 8px !important; padding: 10px !important; background-color: #f9f9f9 !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; } .min-produkt-formular .g-recaptcha { margin-top: 6px !important; margin-bottom: 0 !important; width: fit-content !important; max-width: 100% !important; } .min-produkt-formular .wpcf7-recaptcha { margin-top: 6px !important; margin-bottom: 0 !important; width: fit-content !important; max-width: 100% !important; } .min-produkt-formular .wpcf7-form-control-wrap.recaptcha, .min-produkt-formular .wpcf7-form-control-wrap.recaptcha > div { margin-bottom: 0 !important; width: fit-content !important; max-width: 100% !important; } .min-produkt-formular .wpcf7-form, .min-produkt-formular form { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; } .min-produkt-formular .wpcf7-form-control-wrap.recaptcha + .wpcf7-submit, .min-produkt-formular .wpcf7-form-control-wrap.recaptcha + input[type="submit"], .min-produkt-formular .wpcf7-submit, .min-produkt-formular input[type="submit"] { margin-top: 0 !important; margin-left: auto !important; align-self: flex-end !important; display: block !important; width: auto !important; min-width: 140px !important; max-width: 220px !important; } .min-produkt-formular .wpcf7-submit { margin-top: 8px !important; margin-left: auto !important; align-self: flex-end !important; } /* Success / validation output placed under form */ .min-produkt-formular .wpcf7-response-output { display: none !important; } .custom-form-popup { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 999999 !important; width: min(520px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; padding: 30px 24px !important; box-sizing: border-box !important; border: 2px solid #4caf50 !important; border-radius: 12px !important; background: #ffffff !important; color: #1d1d1d !important; font-size: 16px !important; line-height: 1.6 !important; font-weight: 400 !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important; text-align: center !important; pointer-events: auto !important; font-family: Arial, Helvetica, sans-serif !important; } .custom-form-popup strong { display: block !important; margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #1d1d1d !important; } .custom-form-popup.error { border-color: #f0b7b7 !important; background: #ffe6e6 !important; color: #a43535 !important; } .custom-form-popup.error strong { color: #a43535 !important; } .min-produkt-formular .recaptcha-container label { margin: 0 !important; margin-left: 12px !important; margin-top: 0 !important; font-size: 13px !important; color: #333 !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; } .min-produkt-formular .recaptcha-container input[type="checkbox"] { margin: 0 !important; padding: 0 !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; cursor: pointer !important; display: block !important; } /* 7. SUBMIT BUTTON STYLING */ .wpcf7 input[type="submit"], .min-produkt-formular input[type="submit"] { display: block !important; width: auto !important; min-width: 140px !important; max-width: 220px !important; padding: 12px 40px !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; align-self: flex-start !important; background-color: #1a4d7a !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; cursor: pointer !important; /* Transitions */ -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; transition: all 0.3s ease !important; /* Remove default browser styles */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; line-height: 1.5 !important; min-height: 44px !important; font-family: inherit !important; } .wpcf7 input[type="submit"]:hover, .min-produkt-formular input[type="submit"]:hover { background-color: #153d63 !important; -webkit-box-shadow: 0 4px 12px rgba(26, 77, 122, 0.3) !important; box-shadow: 0 4px 12px rgba(26, 77, 122, 0.3) !important; transform: translateY(-2px) !important; } .wpcf7 input[type="submit"]:active, .min-produkt-formular input[type="submit"]:active { background-color: #0f2d47 !important; transform: translateY(0) !important; } .wpcf7 input[type="submit"]:focus, .min-produkt-formular input[type="submit"]:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(26, 77, 122, 0.2) !important; -webkit-box-shadow: 0 0 0 3px rgba(26, 77, 122, 0.2) !important; } /* ===== RESPONSIVE DESIGN ===== */ /* Tablet (768px and up) */ @media (min-width: 768px) { .min-produkt-formular { padding: 18px 18px 20px; } .min-produkt-formular h3 { font-size: 22px !important; margin-bottom: 6px !important; } .min-produkt-formular label { margin-top: 8px !important; } .min-produkt-formular input[type="text"], .min-produkt-formular input[type="email"], .min-produkt-formular input[type="tel"] { padding: 10px 12px !important; font-size: 14px !important; min-height: 40px !important; } .min-produkt-formular textarea { padding: 8px 10px !important; font-size: 14px !important; min-height: 50px !important; height: 50px !important; } } /* Mobile (under 600px) */ @media (max-width: 599px) { .min-produkt-formular { padding: 12px; } .min-produkt-formular h3 { font-size: 18px !important; margin-bottom: 6px !important; } .min-produkt-formular .intro-tekst { font-size: 14px !important; } .min-produkt-formular label { font-size: 12px !important; margin-top: 8px !important; margin-bottom: 4px !important; } .min-produkt-formular input[type="text"], .min-produkt-formular input[type="email"], .min-produkt-formular input[type="tel"] { padding: 10px 12px !important; font-size: 14px !important; min-height: 38px !important; border-radius: 6px !important; background-color: #ffffff !important; background: #ffffff !important; } .min-produkt-formular textarea { padding: 8px 10px !important; font-size: 14px !important; min-height: 50px !important; height: 50px !important; border-radius: 6px !important; background-color: #ffffff !important; background: #ffffff !important; } .wpcf7 input[type="submit"], .min-produkt-formular input[type="submit"] { display: inline-block !important; width: auto !important; padding: 10px 28px !important; font-size: 13px !important; min-height: 38px !important; margin-top: 8px !important; } } /* Large Desktop (1200px and up) */ @media (min-width: 1200px) { .min-produkt-formular { padding: 40px; max-width: 700px; } } /* ===== ACCESSIBILITY & FIXES ===== */ /* Reduced motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .min-produkt-formular input, .wpcf7 input[type="submit"] { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .min-produkt-formular input[type="text"], .min-produkt-formular input[type="email"], .min-produkt-formular input[type="tel"], .min-produkt-formular textarea { background-color: #ffffff !important; background: #ffffff !important; border-color: #d0d0d0 !important; color: #333 !important; } .min-produkt-formular input[type="text"]::placeholder, .min-produkt-formular input[type="email"]::placeholder, .min-produkt-formular input[type="tel"]::placeholder, .min-produkt-formular textarea::placeholder { color: #999 !important; } .min-produkt-formular input[type="text"]:focus, .min-produkt-formular input[type="email"]:focus, .min-produkt-formular input[type="tel"]:focus, .min-produkt-formular textarea:focus { background-color: #ffffff !important; background: #ffffff !important; border-color: #1a4d7a !important; } } Ønsker du at blive kontaktet? Ønsker du at blive kontaktet angående Udfyld nedenstående formular, så vender vi tilbage hurtigst muligt. Navn E-mail Telefonnummer Besked (valgfri)