/* ✅ ПРОСТОЕ СКРЫТИЕ FLUENT FORM */
.fluentform {
display: none;
}
/* ✅ ПОКАЗЫВАЕМ ЧЕРЕЗ КЛАСС */
.fluentform.show-form {
display: block !important;
}
/* ✅ СКРЫВАЕМ ВСЕ ВНУТРЕННИЕ ЭЛЕМЕНТЫ ДО ПОКАЗА */
.fluentform:not(.show-form) * {
display: none !important;
}
/* ОСНОВНЫЕ СТИЛИ */
.hausbewertung-form {
max-width: 600px;
margin: 0 auto;
padding: 40px;
}
.progress-container {
margin-bottom: 30px;
position: relative;
}
.progress-bar {
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(–global-palette15, #007cba);
width: 0%;
transition: width 0.4s ease;
}
.progress-text {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #666;
}
.quiz-step {
display: none;
animation: slideIn 0.4s ease;
}
.quiz-step.active {
display: block;
}
.quiz-title {
color: #1a1a1a;
font-size: 28px;
font-weight: 700;
margin-bottom: 24px;
}
.quiz-label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 8px;
font-size: 15px;
}
.form-group {
margin-bottom: 24px;
}
.quiz-input {
width: 100%;
padding: 16px 20px !important;
border: 1px solid var(–global-palette15, #007cba) !important;
border-radius: 0 !important;
font-size: 16px;
box-sizing: border-box;
}
.quiz-input:focus {
outline: none;
border-color: var(–global-palette15, #007cba) !important;
box-shadow: 0 0 0 2px rgba(0, 123, 186, 0.2);
}
/* ? RADIO-IMAGES – ОБЩИЕ СТИЛИ */
.radio-images-group {
margin-bottom: 24px;
}
.radio-image-label {
cursor: pointer;
border: 2px solid #e1e5e9;
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
background: white;
}
.radio-image-label:hover {
border-color: var(–global-palette15, #007cba);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.radio-image-label input {
display: none;
}
.radio-image {
text-align: center;
}
.radio-image img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 12px;
display: block;
margin-left: auto;
margin-right: auto;
filter: grayscale(100%) opacity(0.6);
transition: all 0.3s ease;
}
.radio-image span {
font-size: 16px;
font-weight: 600;
color: #333;
display: block;
}
.radio-image-label input:checked + .radio-image img {
filter: none !important;
opacity: 1 !important;
}
.radio-image-label:has(input:checked) {
border-color: var(–global-palette15, #007cba) !important;
background: linear-gradient(135deg, rgba(var(–global-palette15-rgb, 0,123,186), 0.05), transparent);
box-shadow: 0 0 0 3px rgba(var(–global-palette15-rgb, 0,123,186), 0.1);
}
.haus-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.park-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.btn-row {
display: flex;
gap: 12px;
margin: 24px 0;
}
.btn-row .quiz-btn {
flex: 1;
}
.btn-full-width {
margin: 24px 0;
}
.btn-full-width .quiz-btn {
width: 100% !important;
}
.quiz-btn-primary {
background-color: var(–global-palette15, #007cba) !important;
color: #ffffff !important;
padding: 18px 24px !important;
border: none !important;
border-radius: 0 !important;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
.quiz-btn-secondary {
background-color: #6c757d !important;
color: white !important;
padding: 18px 24px !important;
border: none !important;
border-radius: 0 !important;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
let quizData = {};
let currentStep = 1;
const totalSteps = 7;
document.addEventListener(‘DOMContentLoaded’, function() {
document.querySelectorAll(‘.fluentform’).forEach(form => {
form.classList.remove(‘show-form’);
});
updateProgress();
});
function updateProgress() {
const progressFill = document.getElementById(‘progress-fill’);
const progressText = document.getElementById(‘progress-text’);
if (progressFill && progressText) {
const progress = (currentStep / totalSteps) * 100;
progressFill.style.width = progress + ‘%’;
progressText.textContent = `Schritt ${currentStep} von ${totalSteps}`;
}
}
function showStep(step) {
document.querySelectorAll(‘.quiz-step’).forEach(s => s.classList.remove(‘active’));
const stepEl = document.getElementById(`step${step}`);
if (stepEl) {
stepEl.classList.add(‘active’);
currentStep = step;
updateProgress();
}
}
function validateStep(step) {
switch(step) {
case 1: return !!document.getElementById(‘wohnflaeche’)?.value;
case 2:
return !!document.getElementById(‘strasse’)?.value &&
!!document.getElementById(‘plz-ort’)?.value;
case 3: return !!document.querySelector(‘input[name=”hausart”]:checked’);
case 4: return !!document.querySelector(‘input[name=”park”]:checked’);
case 5: return !!document.getElementById(‘baujahr’)?.value;
case 6: return !!document.getElementById(‘grundstueck’)?.value;
default: return true;
}
}
function collectStepData(step) {
switch(step) {
case 1: quizData.wohnflaeche = document.getElementById(‘wohnflaeche’)?.value; break;
case 2:
quizData.strasse = document.getElementById(‘strasse’)?.value;
quizData.plz_ort = document.getElementById(‘plz-ort’)?.value;
quizData.bundesland = document.getElementById(‘bundesland’)?.value;
break;
case 3: quizData.hausart = document.querySelector(‘input[name=”hausart”]:checked’)?.value; break;
case 4: quizData.park = document.querySelector(‘input[name=”park”]:checked’)?.value; break;
case 5: quizData.baujahr = document.getElementById(‘baujahr’)?.value; break;
case 6: quizData.grundstueck = document.getElementById(‘grundstueck’)?.value; break;
}
}
function nextStep(step) {
if (!validateStep(step)) {
alert(‘Bitte füllen Sie alle Felder aus!’);
return;
}
collectStepData(step);
if (step 1) showStep(step – 1);
}
function showContactForm() {
console.log(‘? showContactForm() – показываем форму’);
const quizContainer = document.getElementById(‘quiz-container’);
if (quizContainer) {
quizContainer.style.display = ‘none’;
}
const fluentForms = document.querySelectorAll(‘.fluentform’);
if (fluentForms.length > 0) {
fluentForms[0].classList.add(‘show-form’);
console.log(‘✅ Fluent Form показана’);
}
const progressFill = document.getElementById(‘progress-fill’);
const progressText = document.getElementById(‘progress-text’);
if (progressFill) progressFill.style.width = ‘100%’;
if (progressText) progressText.textContent = ‘Abschicken’;
// ✅ ЗАПОЛНЯЕМ ОТДЕЛЬНЫЕ СКРЫТЫЕ ПОЛЯ Fluent Form
setTimeout(() => {
const fluentForm = document.querySelector(‘.fluentform.show-form form’);
if (fluentForm) {
console.log(‘✅ Заполняем отдельные поля формы…’);
// Маппинг полей quizData → имена hidden fields Fluent Form
const fieldMapping = {
‘wohnflaeche’: ‘wohnflaeche’,
‘strasse’: ‘strasse’,
‘plz_ort’: ‘plz_ort’,
‘bundesland’: ‘bundesland’,
‘hausart’: ‘hausart’,
‘park’: ‘park’,
‘baujahr’: ‘baujahr’,
‘grundstueck’: ‘grundstueck’
};
// Заполняем каждое поле
Object.entries(fieldMapping).forEach(([quizKey, formFieldName]) => {
if (quizData[quizKey]) {
// Ищем поле по name атрибуту
const field = fluentForm.querySelector(`[name=”${formFieldName}”]`);
if (field) {
field.value = quizData[quizKey];
console.log(`✅ ${formFieldName} = ${quizData[quizKey]}`);
} else {
console.warn(`⚠️ Поле ${formFieldName} не найдено в Fluent Form`);
}
}
});
}
}, 600);
}
