Progetta il tuo arredo ideale
con Conforama
Cucine, soggiorni, camere, camerette, divani, ufficio, garden e molto altro. Raccontaci il tuo progetto e progetta al centimetro con noi LA TUA CONSULENZA GRATUITA.
Richiesta inviata!
Un consulente Conforama ti contatterà entro 24 ore.
<!-- ============================================================
CONFORAMA LEAD CONFIGURATORE — Magento CMS Row
v5: bordo selezione con inset box-shadow, nessun ::after
============================================================ -->
<style>
#lpcfr-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
#lpcfr-wrap {
--cr: #E30613; --cr-dark: #b5000e; --dark: #111111; --mid: #444;
--gray: #888; --light: #f7f5f2; --border: #e4e2de; --white: #fff;
--radius: 12px; --shadow: 0 2px 16px rgba(0,0,0,0.07);
--shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--dark); width: 100%; overflow-x: hidden; background: var(--light);
}
#lpcfr-hero {
background: var(--dark); padding: 48px 24px 72px;
text-align: center; position: relative; overflow: hidden;
}
#lpcfr-hero::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(227,6,19,0.18) 0%, transparent 70%);
pointer-events: none;
}
#lpcfr-hero::after {
content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
height: 50px; background: var(--light);
clip-path: ellipse(60% 100% at 50% 100%);
}
.lpcfr-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(227,6,19,0.15); border: 1px solid rgba(227,6,19,0.3);
color: #ff7070; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 2px;
text-transform: uppercase; padding: 10px 24px; border-radius: 100px;
margin-bottom: 24px; position: relative; z-index: 1;
}
.lpcfr-badge-dot {
width: 6px; height: 6px; background: #ff7070; border-radius: 50%;
animation: lpcfrPulse 2s infinite; flex-shrink: 0;
}
@keyframes lpcfrPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
#lpcfr-hero h2 {
font-size: clamp(24px, 6vw, 52px); color: var(--white); font-weight: 700;
line-height: 1.15; max-width: 600px; margin: 0 auto 16px;
letter-spacing: -0.5px; position: relative; z-index: 1;
}
#lpcfr-hero h2 em { font-style: italic; color: var(--cr); }
#lpcfr-hero p {
color: rgba(255,255,255,0.5); font-size: clamp(13px, 2vw, 16px);
max-width: 440px; margin: 0 auto 32px; line-height: 1.6; position: relative; z-index: 1;
}
.lpcfr-hero-cta {
display: inline-flex; align-items: center; gap: 12px;
background: var(--cr); color: var(--white); font-size: 16px; font-weight: 700;
padding: 20px 44px; border-radius: 100px; border: none; cursor: pointer;
font-family: inherit; box-shadow: 0 6px 28px rgba(227,6,19,0.4);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
position: relative; z-index: 1; text-decoration: none;
margin-bottom: 32px !important;
}
.lpcfr-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(227,6,19,0.5); background: var(--cr-dark); }
.lpcfr-hero-cta:active { transform: scale(0.97); }
.lpcfr-trust {
margin-top: 48px; display: flex; gap: 20px; justify-content: center;
flex-wrap: wrap; position: relative; z-index: 1;
}
.lpcfr-trust-item { color: rgba(255,255,255,0.35); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lpcfr-trust-item strong { color: rgba(255,255,255,0.6); font-weight: 600; }
#lpcfr-outer { max-width: 1200px; margin: 0 auto; padding: 0 8px 48px; }
#cfr-wrap {
--cr: #E30613; --cr-dark: #b5000e; --dark: #111111; --mid: #444;
--gray: #888; --light: #f7f5f2; --border: #e4e2de; --white: #fff; --radius: 12px;
font-family: inherit; color: var(--dark); background: var(--white);
border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden;
}
#cfr-progress-wrap { padding: 14px 16px 0; background: var(--white); border-bottom: 1px solid var(--border); }
#cfr-progress-track {
display: flex; align-items: center; width: 100%; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 14px;
}
#cfr-progress-track::-webkit-scrollbar { display: none; }
.cfr-prog-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.cfr-prog-dot {
width: 28px; height: 28px; border-radius: 50%; background: var(--border);
color: var(--gray); font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
transition: background 0.3s, color 0.3s; flex-shrink: 0;
}
.cfr-prog-dot.active { background: var(--cr); color: var(--white); box-shadow: 0 0 0 4px rgba(227,6,19,0.12); }
.cfr-prog-dot.done { background: var(--dark); color: var(--white); }
.cfr-prog-lbl { font-size: 9px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.cfr-prog-lbl.active { color: var(--cr); }
.cfr-prog-lbl.done { color: var(--dark); }
.cfr-prog-line { flex: 1; min-width: 12px; height: 2px; background: var(--border); margin-bottom: 16px; transition: background 0.3s; }
.cfr-prog-line.done { background: var(--dark); }
#cfr-body { padding: 24px 16px 36px; }
.cfr-panel { display: none; }
.cfr-panel.active { display: block; animation: cfrFade 0.25s ease; }
@keyframes cfrFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cfr-step-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.cfr-step-num {
width: 32px; height: 32px; flex-shrink: 0; background: var(--cr); color: var(--white);
border-radius: 50%; font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.cfr-stitle { font-size: clamp(18px, 3.5vw, 24px); font-weight: 700; color: var(--dark); line-height: 1.2; margin-bottom: 4px; }
.cfr-subtitle { font-size: 13px; color: var(--gray); line-height: 1.4; }
/* ---- CATEGORIA GRID ---- */
.cfr-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
@media(min-width: 480px) { .cfr-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 600px) { .cfr-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cfr-cat-card {
border: 3px solid var(--border); border-radius: var(--radius); cursor: pointer;
transition: border-color 0.18s; position: relative;
user-select: none; -webkit-tap-highlight-color: transparent;
overflow: hidden; aspect-ratio: 4 / 3; background: var(--light);
}
.cfr-cat-card:active { opacity: 0.85; }
/* SELEZIONE: bordo rosso spesso visibile sopra overflow:hidden */
.cfr-cat-card.selected { border-color: var(--cr) !important; box-shadow: inset 0 0 0 3px var(--cr); }
.cfr-cat-card img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block; transition: transform 0.3s ease;
}
.cfr-cat-card:hover img { transform: scale(1.04); }
.cfr-cat-card-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.68));
padding: 20px 10px 10px; z-index: 1;
}
.cfr-cat-card-check {
position: absolute; top: 7px; right: 8px; width: 22px; height: 22px;
background: var(--cr); border-radius: 50%; color: var(--white);
font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; z-index: 2;
}
.cfr-cat-card.selected .cfr-cat-card-check { display: flex; }
.cfr-cat-name { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; text-align: center; }
.cfr-cat-sub { font-size: 10px; color: rgba(255,255,255,0.7); margin-top: 2px; text-align: center; }
.cfr-cat-card.no-img {
background: var(--light); display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: 16px 10px;
}
.cfr-cat-card.no-img .cfr-cat-card-overlay { position: static; background: none; padding: 0; }
.cfr-cat-card.no-img .cfr-cat-name { color: var(--dark); }
.cfr-cat-card.no-img .cfr-cat-sub { color: var(--gray); }
.cfr-cat-card.no-img .cfr-cat-icon { font-size: 28px; margin-bottom: 8px; display: block; }
/* ---- CARD GRID step 2/3 ---- */
.cfr-grid { display: grid; gap: 14px; margin-bottom: 0; }
.cfr-grid-2 { grid-template-columns: 1fr 1fr; }
.cfr-grid-3 { grid-template-columns: 1fr 1fr; }
@media(min-width: 460px) { .cfr-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.cfr-card {
background: var(--light); border: 3px solid var(--border); border-radius: var(--radius);
padding: 16px 10px 12px; text-align: center; cursor: pointer;
transition: border-color 0.18s; position: relative;
user-select: none; -webkit-tap-highlight-color: transparent;
min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.cfr-card:active { opacity: 0.85; }
.cfr-card.selected { border-color: var(--cr) !important; background: #fff8f8; box-shadow: inset 0 0 0 2px var(--cr); }
.cfr-card-check {
position: absolute; top: 7px; right: 8px; width: 20px; height: 20px;
background: var(--cr); border-radius: 50%; color: var(--white);
font-size: 11px; font-weight: 700; display: none; align-items: center; justify-content: center; z-index: 2;
}
.cfr-card.selected .cfr-card-check { display: flex; }
.cfr-card-name { font-size: 12px; font-weight: 700; color: var(--dark); line-height: 1.3; }
/* card con immagine step 2/3 */
#cfr-wrap .cfr-card.has-img {
padding: 0; overflow: hidden; min-height: 120px; justify-content: flex-end;
}
#cfr-wrap .cfr-card.has-img img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block; transition: transform 0.3s ease;
}
#cfr-wrap .cfr-card.has-img:hover img { transform: scale(1.04); }
#cfr-wrap .cfr-card.has-img .cfr-card-overlay {
position: relative; z-index: 1; width: 100%;
background: linear-gradient(transparent, rgba(0,0,0,0.65));
padding: 18px 10px 10px;
}
#cfr-wrap .cfr-card.has-img .cfr-card-name { color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
#cfr-wrap .cfr-card.has-img .cfr-card-check { top: 8px; right: 8px; z-index: 2; }
/* SELEZIONE card con foto */
#cfr-wrap .cfr-card.has-img.selected { border-color: var(--cr) !important; box-shadow: inset 0 0 0 3px var(--cr); }
@media(min-width: 768px) { #cfr-wrap .cfr-card.has-img { min-height: unset; aspect-ratio: 4 / 3; } }
/* Centra card Altro (2 opzioni) */
#cfrgrid-spazio { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
#cfrgrid-spazio .cfr-card { max-width: 280px; width: calc(50% - 7px); flex: 1 1 140px; }
.cfr-desc-box {
display: none; background: var(--light); border-left: 4px solid var(--cr);
border-radius: 0 8px 8px 0; padding: 14px 18px; margin-top: 10px; margin-bottom: 24px;
font-size: 16px; font-weight: 600; color: var(--dark); line-height: 1.6;
max-width: 100%; animation: cfrFade 0.2s ease;
}
.cfr-desc-box.show { display: block; }
.cfr-summary-box {
background: var(--light) !important; border-radius: var(--radius) !important;
padding: 16px 14px !important; margin-bottom: 14px !important;
margin-top: 0 !important; border: 1px solid var(--border) !important;
}
.cfr-summary-heading {
font-size: 11px; font-weight: 700; color: var(--dark); text-transform: uppercase;
letter-spacing: 1.2px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--cr);
}
.cfr-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.cfr-sum-row:last-child { border-bottom: none; }
.cfr-sum-k { color: var(--gray); }
.cfr-sum-v { font-weight: 700; color: var(--dark); }
.cfr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media(max-width: 400px) { .cfr-form-grid { grid-template-columns: 1fr; } }
.cfr-field { display: flex; flex-direction: column; gap: 5px; }
.cfr-field.full { grid-column: 1 / -1; }
.cfr-field label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray); }
.cfr-field input, .cfr-field select, .cfr-field textarea {
padding: 11px 13px; border: 2px solid var(--border); border-radius: 10px;
font-size: 15px; font-family: inherit; color: var(--dark); background: var(--white);
outline: none; transition: border-color 0.18s, box-shadow 0.18s;
-webkit-appearance: none; appearance: none;
}
.cfr-field input:focus, .cfr-field select:focus, .cfr-field textarea:focus { border-color: var(--cr); box-shadow: 0 0 0 3px rgba(227,6,19,0.08); }
.cfr-field textarea { resize: none; min-height: 76px; }
.cfr-privacy {
display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
font-size: 12px; color: var(--gray); line-height: 1.6; padding: 14px;
background: var(--light); border-radius: 8px; border: 1px solid var(--border);
}
.cfr-privacy input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin-top: 2px; accent-color: var(--cr); }
.cfr-privacy a { color: var(--cr); text-decoration: none; }
.cfr-privacy-marketing { border-color: rgba(227,6,19,0.25) !important; background: rgba(227,6,19,0.03) !important; }
.cfr-privacy-marketing strong { color: var(--cr); }
.cfr-err { display: none; color: var(--cr); font-size: 13px; font-weight: 600; margin-bottom: 10px; padding: 11px 14px; background: rgba(227,6,19,0.05); border-radius: 7px; border-left: 3px solid var(--cr); }
.cfr-err.show { display: block; }
#cfr-wrap .lpcfr-nav { display: flex; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
#cfr-wrap .lpcfr-btn-back {
flex: 0 0 auto; background: transparent !important; border: 2px solid var(--border) !important;
color: var(--mid) !important; width: 50px; height: 50px; border-radius: 10px;
cursor: pointer !important; font-family: inherit; transition: border-color 0.18s, color 0.18s;
-webkit-tap-highlight-color: transparent; display: flex !important; align-items: center; justify-content: center;
flex-shrink: 0; padding: 0 !important; margin: 0 !important; text-decoration: none !important;
position: static !important; float: none !important; box-shadow: none !important;
user-select: none !important; -webkit-user-select: none !important;
}
#cfr-wrap .lpcfr-btn-back:hover { border-color: var(--dark) !important; color: var(--dark) !important; background: var(--light) !important; }
#cfr-wrap .lpcfr-btn-next {
flex: 1; margin-left: 16px !important; background: var(--cr) !important;
border: 2px solid var(--cr) !important; color: var(--white) !important;
height: 54px; border-radius: 12px; font-size: 15px; font-weight: 700;
cursor: pointer; font-family: inherit; transition: background 0.18s, transform 0.18s;
box-shadow: 0 6px 24px rgba(227,6,19,0.32) !important; -webkit-tap-highlight-color: transparent;
display: flex !important; align-items: center; justify-content: center; gap: 10px;
padding: 0 20px !important; text-decoration: none !important; position: static !important;
float: none !important; width: auto !important; user-select: none !important; cursor: pointer !important;
}
#cfr-wrap .lpcfr-btn-next:hover { background: var(--cr-dark) !important; transform: translateY(-1px); }
#cfr-wrap .lpcfr-btn-next:active { transform: scale(0.98); }
#cfr-wrap .lpcfr-btn-next svg { display: block; flex-shrink: 0; }
#cfr-wrap .lpcfr-btn-only { width: 100% !important; margin-left: 0 !important; box-sizing: border-box !important; }
#cfr-wrap .lpcfr-btn-label { display: none; }
#cfr-wrap .lpcfr-btn-next::before { content: attr(data-label); font-size: 15px; font-weight: 700; color: var(--white); line-height: 1; display: inline; }
.lpcfr-btn-next:not(#cfr-wrap .lpcfr-btn-next),
.lpcfr-btn-back:not(#cfr-wrap .lpcfr-btn-back) {
display: none !important; visibility: hidden !important; opacity: 0 !important;
pointer-events: none !important; position: absolute !important; width: 0 !important; height: 0 !important;
}
body > .lpcfr-btn-next, body > .lpcfr-btn-back,
.page-wrapper > .lpcfr-btn-next, .page-wrapper > .lpcfr-btn-back,
.columns > .lpcfr-btn-next, .column.main > .lpcfr-btn-next { display: none !important; }
#cfr-success { text-align: center; padding: 40px 16px 36px; }
.cfr-success-circle {
width: 72px; height: 72px; background: linear-gradient(135deg, var(--cr), var(--cr-dark));
border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px; box-shadow: 0 8px 28px rgba(227,6,19,0.35);
}
.cfr-success-circle svg { width: 32px; height: 32px; }
#cfr-success h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--dark); }
#cfr-success .cfr-success-sub { font-size: 14px; color: var(--gray); line-height: 1.7; max-width: 340px; margin: 0 auto 24px; }
.cfr-success-detail { background: var(--light); border-radius: var(--radius); padding: 14px; max-width: 360px; margin: 0 auto; text-align: left; border: 1px solid var(--border); }
.cfr-success-detail-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cfr-success-detail-row { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cfr-success-detail-row:last-child { border-bottom: none; }
.cfr-success-detail-row span:first-child { color: var(--gray); }
.cfr-success-detail-row span:last-child { font-weight: 700; }
.cfr-email-note-box { display: flex; align-items: center; gap: 16px; background: var(--dark); border-radius: var(--radius); padding: 20px; max-width: 360px; margin: 0 auto 20px; text-align: left; }
.cfr-email-note-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.cfr-email-note-sub { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; }
#cfr-wrap .cfr-field input.cfr-field-error, #cfr-wrap .cfr-field select.cfr-field-error {
border-color: var(--cr) !important; background: rgba(227,6,19,0.04) !important;
box-shadow: 0 0 0 3px rgba(227,6,19,0.12) !important; animation: cfr-shake 0.3s ease;
}
@keyframes cfr-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#cfr-wrap .cfr-field .cfr-field-msg { font-size: 11px; color: var(--cr); font-weight: 600; margin-top: 4px; display: none; }
#cfr-wrap .cfr-field .cfr-field-msg.show { display: block; }
@media(min-width: 768px) {
#lpcfr-hero { padding: 72px 48px 88px; }
#cfr-body { padding: 36px 40px 52px; }
#cfr-progress-wrap { padding: 22px 36px 0; }
.cfr-cat-grid { grid-template-columns: repeat(4, 1fr); }
.cfr-grid { gap: 18px; }
.cfr-card { min-height: 120px; }
.cfr-card:not(.has-img) { justify-content: center; }
}
</style>
<div id="lpcfr-wrap">
<div id="lpcfr-hero">
<div class="lpcfr-badge"><span class="lpcfr-badge-dot"></span>Consulenza gratuita</div>
<h2>Progetta il tuo <em>arredo ideale</em><br>con Conforama</h2>
<p>Cucine, soggiorni, camere, camerette, divani, ufficio, garden e molto altro. Raccontaci il tuo progetto e progetta al centimetro con noi<strong style="color:#fff;font-weight:700"> LA TUA CONSULENZA GRATUITA</strong>.</p>
<button class="lpcfr-hero-cta" onclick="document.getElementById('lpcfr-outer').scrollIntoView({behavior:'smooth'})">
Inizia subito
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div class="lpcfr-trust">
<div class="lpcfr-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 3.5" stroke="#ff7070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><strong>Nessun impegno</strong></div>
<div class="lpcfr-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 3.5" stroke="#ff7070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><strong>Finanziamenti su misura</strong></div>
<div class="lpcfr-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 3.5" stroke="#ff7070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><strong>Consulente dedicato</strong></div>
<div class="lpcfr-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 3.5" stroke="#ff7070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><strong>19 negozi in Italia</strong></div>
</div>
</div>
<div id="lpcfr-outer">
<div id="cfr-wrap">
<div id="cfr-progress-wrap"><div id="cfr-progress-track"></div></div>
<div id="cfr-body">
<!-- STEP 1: CATEGORIA -->
<div class="cfr-panel active" id="cfrp-1">
<div class="cfr-step-header">
<div class="cfr-step-num">1</div>
<div><div class="cfr-stitle">Di cosa hai bisogno?</div><div class="cfr-subtitle">Seleziona la categoria che ti interessa</div></div>
</div>
<div class="cfr-cat-grid" id="cfrgrid-cat">
<div class="cfr-cat-card" data-val="Cucina" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<img src="https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucine_Intro.jpg" alt="Cucina" loading="lazy">
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Cucina</div><div class="cfr-cat-sub">Su misura</div></div>
</div>
<div class="cfr-cat-card" data-val="Soggiorno" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<img src="https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_intro.jpg" alt="Soggiorno" loading="lazy">
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Soggiorno</div><div class="cfr-cat-sub">Living & pareti</div></div>
</div>
<div class="cfr-cat-card" data-val="Camera da letto" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<img src="https://conforama.it/media/wysiwyg/raccontaci_la_idea/Camera_Intro.jpg" alt="Camera" loading="lazy">
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Camera</div><div class="cfr-cat-sub">Armadi & letti</div></div>
</div>
<div class="cfr-cat-card" data-val="Cameretta" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<img src="https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cameretta_Intro.jpg" alt="Cameretta" loading="lazy">
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Cameretta</div><div class="cfr-cat-sub">Bambini & ragazzi</div></div>
</div>
<div class="cfr-cat-card" data-val="Divano" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<img src="https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divani_Intro.jpg" alt="Divano" loading="lazy">
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Divano</div><div class="cfr-cat-sub">Angolari & letto</div></div>
</div>
<div class="cfr-cat-card" data-val="Ufficio" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<img src="https://conforama.it/media/wysiwyg/raccontaci_la_idea/Ufficio_Intro.jpg" alt="Ufficio" loading="lazy">
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Ufficio</div><div class="cfr-cat-sub">Home office</div></div>
</div>
<div class="cfr-cat-card" data-val="Garden" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<img src="https://conforama.it/media/wysiwyg/raccontaci_la_idea/Garden_Intro.jpg" alt="Garden" loading="lazy">
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Garden</div><div class="cfr-cat-sub">Outdoor & terrazzo</div></div>
</div>
<div class="cfr-cat-card no-img" data-val="Altro" onclick="cfrSelectCat(this)">
<div class="cfr-cat-card-check">✓</div>
<span class="cfr-cat-icon">✨</span>
<div class="cfr-cat-card-overlay"><div class="cfr-cat-name">Altro</div><div class="cfr-cat-sub">Libera i tuoi desideri. Dicci come possiamo esaudirli</div></div>
</div>
</div>
<div class="cfr-err" id="cfre-cat">Seleziona una categoria per continuare.</div>
<div class="lpcfr-nav">
<div class="lpcfr-btn-next lpcfr-btn-only" role="button" tabindex="0" data-label="Avanti" onclick="cfrNext(1)">
<span class="lpcfr-btn-label" aria-hidden="true"></span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
<!-- STEP 2: SPAZIO -->
<div class="cfr-panel" id="cfrp-2">
<div class="cfr-step-header">
<div class="cfr-step-num">2</div>
<div><div class="cfr-stitle" id="cfr-s2-title">Com'è il tuo spazio?</div><div class="cfr-subtitle" id="cfr-s2-sub">Dimensioni orientative</div></div>
</div>
<div class="cfr-grid cfr-grid-3" id="cfrgrid-spazio"></div>
<div class="cfr-desc-box" id="cfrd-spazio"></div>
<div class="cfr-err" id="cfre-spazio">Seleziona un'opzione per continuare.</div>
<div class="lpcfr-nav">
<div class="lpcfr-btn-back" role="button" tabindex="0" onclick="cfrPrev(2)">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M11 4L6 9l5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="lpcfr-btn-next" role="button" tabindex="0" data-label="Avanti" onclick="cfrNext(2)">
<span class="lpcfr-btn-label" aria-hidden="true"></span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
<!-- STEP 3: STILE -->
<div class="cfr-panel" id="cfrp-3">
<div class="cfr-step-header">
<div class="cfr-step-num">3</div>
<div><div class="cfr-stitle">Quale stile preferisci?</div><div class="cfr-subtitle">Scegli l'estetica che ti rappresenta</div></div>
</div>
<div class="cfr-grid cfr-grid-3" id="cfrgrid-stile"></div>
<div class="cfr-desc-box" id="cfrd-stile"></div>
<div class="cfr-err" id="cfre-stile">Seleziona uno stile per continuare.</div>
<div class="lpcfr-nav">
<div class="lpcfr-btn-back" role="button" tabindex="0" onclick="cfrPrev(3)">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M11 4L6 9l5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="lpcfr-btn-next" role="button" tabindex="0" data-label="Avanti" onclick="cfrNext(3)">
<span class="lpcfr-btn-label" aria-hidden="true"></span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
<!-- STEP 4: FORM -->
<div class="cfr-panel" id="cfrp-5">
<div class="cfr-step-header">
<div class="cfr-step-num">4</div>
<div><div class="cfr-stitle">Quasi fatto!</div><div class="cfr-subtitle">Un consulente ti contatta entro 24h</div></div>
</div>
<div class="cfr-summary-box">
<div class="cfr-summary-heading">Il tuo progetto</div>
<div id="cfr-sum-rows"></div>
</div>
<div class="cfr-summary-box">
<div class="cfr-summary-heading">I tuoi dati</div>
<div class="cfr-form-grid">
<div class="cfr-field">
<label>Nome *</label>
<input type="text" id="cfrf-nome" placeholder="Mario" autocomplete="given-name" maxlength="50">
<span class="cfr-field-msg"></span>
</div>
<div class="cfr-field">
<label>Cognome *</label>
<input type="text" id="cfrf-cogn" placeholder="Rossi" autocomplete="family-name" maxlength="50">
<span class="cfr-field-msg"></span>
</div>
<div class="cfr-field">
<label>Email *</label>
<input type="email" id="cfrf-mail" placeholder="mario@email.it" autocomplete="email" inputmode="email" maxlength="100">
<span class="cfr-field-msg"></span>
</div>
<div class="cfr-field">
<label>Telefono *</label>
<input type="tel" id="cfrf-tel" placeholder="+39 347 000000" autocomplete="tel" inputmode="tel" maxlength="15">
<span class="cfr-field-msg"></span>
</div>
<div class="cfr-field full">
<label>Negozio Conforama preferito</label>
<select id="cfrf-negozio">
<option value="">— Seleziona —</option>
<optgroup label="Piemonte">
<option value="Conforama Torino">Conforama Torino</option>
<option value="Conforama Tortona (AL)">Conforama Tortona (AL)</option>
</optgroup>
<optgroup label="Lombardia">
<option value="Conforama Vergiate (VA)">Conforama Vergiate (VA)</option>
<option value="Conforama Castel Mella (BS)">Conforama Castel Mella (BS)</option>
<option value="Conforama Milano">Conforama Milano</option>
</optgroup>
<optgroup label="Veneto">
<option value="Conforama Affi (VR)">Conforama Affi (VR)</option>
<option value="Conforama Veggiano (PD)">Conforama Veggiano (PD)</option>
<option value="Conforama Mestre - Venezia">Conforama Mestre - Venezia</option>
</optgroup>
<optgroup label="Friuli Venezia Giulia">
<option value="Conforama Martignacco (UD)">Conforama Martignacco (UD)</option>
<option value="Conforama Palmanova (UD)">Conforama Palmanova (UD)</option>
</optgroup>
<optgroup label="Emilia-Romagna">
<option value="Conforama Campogalliano (MO)">Conforama Campogalliano (MO)</option>
</optgroup>
<optgroup label="Lazio">
<option value="Conforama Aprilia (LT)">Conforama Aprilia (LT)</option>
<option value="Conforama Rieti">Conforama Rieti</option>
</optgroup>
<optgroup label="Puglia">
<option value="Conforama Fasano (BR)">Conforama Fasano (BR)</option>
</optgroup>
<optgroup label="Sicilia">
<option value="Conforama Belpasso (CT)">Conforama Belpasso (CT)</option>
<option value="Conforama Riposto (CT)">Conforama Riposto (CT)</option>
<option value="Conforama Melilli (SR)">Conforama Melilli (SR)</option>
</optgroup>
<optgroup label="Sardegna">
<option value="Conforama San Sperate (CA)">Conforama San Sperate (CA)</option>
<option value="Conforama Sassari (SS)">Conforama Sassari (SS)</option>
</optgroup>
</select>
</div>
<div class="cfr-field full">
<label>Note aggiuntive</label>
<textarea id="cfrf-note" placeholder="Dimensioni della stanza, esigenze particolari..."></textarea>
</div>
</div>
<div class="cfr-privacy">
<input type="checkbox" id="cfrf-priv">
<label for="cfrf-priv">Ho letto e accetto la <a href="/privacy-policy" target="_blank">Privacy Policy</a> di Conforama Italia S.r.l. Acconsento al trattamento dei miei dati per ricevere la consulenza richiesta.</label>
</div>
<div class="cfr-privacy cfr-privacy-marketing">
<input type="checkbox" id="cfrf-mktg">
<label for="cfrf-mktg">Desidero ricevere offerte promozionali, novità. <strong></strong>. Potrai disiscriverti in qualsiasi momento.</label>
</div>
<div class="cfr-err" id="cfre-form">Compila tutti i campi obbligatori (*) e accetta la privacy policy.</div>
</div>
<div class="lpcfr-nav">
<div class="lpcfr-btn-back" role="button" tabindex="0" onclick="cfrPrev(3)">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M11 4L6 9l5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="lpcfr-btn-next" role="button" tabindex="0" data-label="Invia richiesta" onclick="lpcfrInviaLead()">
<span class="lpcfr-btn-label" aria-hidden="true"></span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
<!-- STEP 5: SUCCESS -->
<div class="cfr-panel" id="cfrp-6">
<div id="cfr-success">
<div class="cfr-success-circle">
<svg viewBox="0 0 32 32" fill="none"><path d="M6 16 L13 23 L26 9" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Richiesta inviata!</h3>
<p class="cfr-success-sub">Un consulente Conforama ti contatterà entro <strong>24 ore</strong>.</p>
<div class="cfr-email-note-box">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
<rect x="3" y="7" width="22" height="15" rx="2" stroke="white" stroke-width="1.8"/>
<path d="M3 10l11 7 11-7" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<div>
<div class="cfr-email-note-title" id="cfr-email-note-title">La tua conferma ti aspettaa in email</div>
<div class="cfr-email-note-sub" id="cfr-email-note-sub">Controlla la tua casella — ti abbiamo inviato la conferma</div>
</div>
</div>
<div class="cfr-success-detail" id="cfr-success-detail">
<div class="cfr-success-detail-title">Riepilogo richiesta</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var STORE_EMAIL_MAP = {
'Conforama Torino': 'rep.mobili_to@conforamaitalia.it',
'Conforama Tortona (AL)': 'rep.mobili_al@conforamaitalia.it',
'Conforama Vergiate (VA)': 'rep.mobili_va@conforamaitalia.it',
'Conforama Castel Mella (BS)': 'rep.mobili_bs@conforamaitalia.it',
'Conforama Milano': 'rep.mobili_mi@conforamaitalia.it',
'Conforama Affi (VR)': 'rep.mobili_vr@conforamaitalia.it',
'Conforama Veggiano (PD)': 'rep.mobili_pd@conforamaitalia.it',
'Conforama Mestre - Venezia': 'rep.mobili_ve@conforamaitalia.it',
'Conforama Martignacco (UD)': 'rep.mobili_uc@conforamaitalia.it',
'Conforama Palmanova (UD)': 'rep.mobili_ud@conforamaitalia.it',
'Conforama Campogalliano (MO)':'rep.mobili_mo@conforamaitalia.it',
'Conforama Aprilia (LT)': 'rep.mobili_lt@conforamaitalia.it',
'Conforama Rieti': 'rep.mobili_ri@conforamaitalia.it',
'Conforama Fasano (BR)': 'rep.mobili_br@conforamaitalia.it',
'Conforama Belpasso (CT)': 'rep.mobili_ep@conforamaitalia.it',
'Conforama Riposto (CT)': 'rep.mobili_cr@conforamaitalia.it',
'Conforama Melilli (SR)': 'rep.mobili_sr@conforamaitalia.it',
'Conforama San Sperate (CA)': 'rep.mobili_ca@conforamaitalia.it',
'Conforama Sassari (SS)': 'rep.mobili_ss@conforamaitalia.it'
};
var STORE_EMAIL_FALLBACK = 'ecommerce@conforamaitalia.it';
function getStoreEmail() {
var sel = document.getElementById('cfrf-negozio');
if (!sel) return STORE_EMAIL_FALLBACK;
return STORE_EMAIL_MAP[sel.value] || STORE_EMAIL_FALLBACK;
}
var S2_CONFIG = {
'Cucina': {
title:"Com'è la tua cucina?", sub:'Tipologia di layout',
options:[{val:'Lineare',sub:'Una parete'},{val:'Angolare',sub:'Due pareti'},{val:'Penisola',sub:'Con penisola'},{val:'Isola',sub:'Con isola'},{val:'Non so ancora',sub:'Il consulente mi aiuterà'}],
descs:{'Lineare':'Tutti i moduli su una sola parete: ideale per spazi stretti e lunghi.','Angolare':'Due pareti ad angolo per massimizzare contenimento e piano di lavoro.','Penisola':'Blocco parzialmente aperto che divide cucina e living.','Isola':'Blocco centrale indipendente: il massimo per spazi generosi.','Non so ancora':'Nessun problema, il nostro consulente ti guiderà nella scelta migliore.'}
},
'Soggiorno': {
title:'Dimensioni del soggiorno?', sub:'Misura orientativa della stanza',
options:[{val:'Piccolo (fino a 20mq)',sub:'Fino a 20 mq'},{val:'Medio (20-35mq)',sub:'20-35 mq'},{val:'Grande (oltre 35mq)',sub:'Oltre 35 mq'},{val:'Open space',sub:'Cucina-soggiorno'},{val:'Non so ancora',sub:''}],
descs:{'Piccolo (fino a 20mq)':'Soluzioni compatte e multifunzione per ottimizzare ogni centimetro.','Medio (20-35mq)':'La dimensione più comune: mille possibilità di arredo.','Grande (oltre 35mq)':'Pareti attrezzate complete e composizioni importanti.','Open space':'Living integrato con la cucina: coerenza estetica e suddivisione spazio.','Non so ancora':'Il consulente ti aiuterà a misurare e progettare.'}
},
'Camera da letto': {
title:'Cosa stai cercando?', sub:'Prodotto principale di interesse',
options:[{val:'Armadio su misura',sub:'Scorrevole o battente'},{val:'Cabina armadio',sub:'Walk-in closet'},{val:'Letto + contenitore',sub:'Con rete e materasso'},{val:'Camera completa',sub:'Armadio + letto + comodini'},{val:'Solo complementi',sub:'Comodini e accessori'},{val:'Non so ancora',sub:''}],
descs:{'Armadio su misura':'Ante scorrevoli o battenti, interni personalizzabili.','Cabina armadio':'Walk-in closet su misura: il massimo dello spazio e dell\'organizzazione.','Letto + contenitore':'Letti con contenitore, reti e materassi abbinati.','Camera completa':'Soluzione chiavi in mano: armadio, letto, comodini coordinati.','Solo complementi':'Arredi aggiuntivi per completare la tua camera.','Non so ancora':'Il consulente valuterà insieme a te la soluzione migliore.'}
},
'Cameretta': {
title:'Per chi è la cameretta?', sub:'Età del bambino / ragazzo',
options:[{val:'Bambino (0-6 anni)',sub:'Prima infanzia'},{val:'Bambino (7-11 anni)',sub:'Età scolare'},{val:'Ragazzo (12-16 anni)',sub:'Preadolescente'},{val:'Giovane (17+ anni)',sub:'Studio e riposo'},{val:'Non so ancora',sub:''}],
descs:{'Bambino (0-6 anni)':'Lettini, fasciatoi e arredi sicuri per i più piccoli.','Bambino (7-11 anni)':'Letti a castello, scrivanie e tanto spazio giochi.','Ragazzo (12-16 anni)':'Design giovane, scrivania studio, letto singolo o matrimoniale.','Giovane (17+ anni)':'Arredi che crescono con il ragazzo, funzionali e moderni.','Non so ancora':'Il consulente ti guiderà nella scelta più adatta.'}
},
'Divano': {
title:'Che tipo di divano cerchi?', sub:'Tipologia principale',
options:[{val:'Divano 2/3 posti',sub:'Classico'},{val:'Divano angolare',sub:'Configurazione L'},{val:'Divano letto',sub:'Con funzione letto'},{val:'Chaise longue',sub:'Con penisola'},{val:'Divano relax',sub:'Poltrone & relax'},{val:'Non so ancora',sub:''}],
descs:{'Divano 2/3 posti':'Compatto e versatile, perfetto per ogni ambiente.','Divano angolare':'Maxi comfort, ideale per soggiorni generosi o open space.','Divano letto':'Doppia funzione: ospitalità senza rinunciare allo stile.','Chaise longue':'Relax totale con penisola, il massimo del comfort.','Divano relax':'Poltrone relax, reclinabili e chaise longue per il massimo comfort.','Non so ancora':'Il consulente ti mostrerà tutte le soluzioni disponibili.'}
},
'Ufficio': {
title:'Che tipo di spazio ufficio?', sub:"Destinazione d'uso",
options:[{val:'Home office (angolo)',sub:'Spazio dedicato in casa'},{val:'Studio separato',sub:'Stanza autonoma'},{val:'Ufficio professionale',sub:'Ambiente di lavoro'},{val:'Scrivania + libreria',sub:'Essenziale'},{val:'Non so ancora',sub:''}],
descs:{'Home office (angolo)':'Soluzioni compatte per creare un angolo lavoro funzionale.','Studio separato':'Arredo completo per uno studio dedicato.','Ufficio professionale':'Scrivanie operative, contenitori e pareti attrezzate.','Scrivania + libreria':'Il minimo indispensabile per lavorare o studiare.','Non so ancora':'Il consulente valuterà le tue esigenze specifiche.'}
},
'Garden': {
title:'Dove vuoi arredare?', sub:'Tipo di spazio outdoor',
options:[{val:'Giardino privato',sub:"Spazio all'aperto"},{val:'Terrazzo / Balcone',sub:'Spazio in quota'},{val:'Bordo piscina',sub:'Area relax piscina'},{val:'Veranda coperta',sub:'Spazio semicoperto'},{val:'Pergola',sub:'Struttura ombreggiante'},{val:'Non so ancora',sub:''}],
descs:{'Giardino privato':'Set tavolo e sedie, dondoli, lettini e accessori outdoor.','Terrazzo / Balcone':'Arredi compatti e resistenti agli agenti atmosferici.','Bordo piscina':'Lettini, tende da sole e complementi per il relax.','Veranda coperta':'Arredo semi-outdoor: comfort e protezione dalle intemperie.','Pergola':'Strutture, arredi e accessori per pergole bioclimatiche e classiche.','Non so ancora':'Il consulente ti mostrerà tutte le soluzioni outdoor Conforama.'}
},
'Altro': {
title:'Quale zona ti interessa?', sub:'Seleziona la tipologia di prodotto',
options:[{val:'Zona giorno',sub:'Tavoli, sedie, complementi soggiorno'},{val:'Zona notte',sub:'Materassi, letti, armadi'}],
descs:{'Zona giorno':'Tavoli da pranzo, sedie, complementi e tutto per il tuo soggiorno.','Zona notte':'Letti, materassi, armadi e tutto per la tua zona notte.'}
}
};
var S3_CONFIG = {
'Cucina':[{val:'Moderna',desc:'Linee pulite, ante lisce, maniglie a gola. Estetica essenziale per ambienti contemporanei.'},{val:'Contemporanea',desc:'Mix di materiali e finiture calde: eleganza accessibile che unisce tradizione e modernità.'},{val:'Classica',desc:'Ante decorate, cornici e dettagli raffinati. Senza tempo, perfetta per case di charme.'},{val:'Rustica',desc:'Legno naturale, finiture vissute e calore autentico. Ideale per ambienti informali.'},{val:'Non so ancora',desc:'Il consulente ti guiderà nella scelta più adatta al tuo ambiente.'}],
'Soggiorno':[{val:'Moderno',desc:'Linee nette, superfici lisce, minimalismo funzionale. Colori neutri e accenti decisi.'},{val:'Contemporaneo',desc:'Mix di materiali naturali e moderni. Calore ed eleganza accessibile.'},{val:'Classico',desc:'Dettagli, cornici e finiture pregiate. Senza tempo, raffinato.'},{val:'Industrial',desc:'Metallo, legno grezzo e linee essenziali. Look autentico e carattere urbano.'},{val:'Shabby Chic',desc:'Palette chiare, dettagli romantici e arredi vissuti. Calore e femminilità senza tempo.'},{val:'Non so ancora',desc:'Il consulente ti presenterà le soluzioni più adatte al tuo gusto.'}],
'Camera da letto':[{val:'Moderno',desc:'Linee pulite e materiali di qualità. Camera minimal per chi ama l\'ordine visivo.'},{val:'Contemporaneo',desc:'Elegante e accogliente: legno, tessuti morbidi e palette neutre.'},{val:'Classico',desc:'Testiere imbottite, finiture laccate e dettagli pregiati. Un classico senza tempo.'},{val:'Nordico / Scandi',desc:'Legno chiaro, toni naturali e funzionalità. Il comfort nordico per il riposo.'},{val:'Non so ancora',desc:'Il consulente ti aiuterà a trovare lo stile giusto per la tua camera.'}],
'Cameretta':[{val:'Colorata / Giocosa',desc:'Colori vivaci, forme divertenti e tanta fantasia. Perfetta per i più piccoli.'},{val:'Neutra / Minimal',desc:'Toni chiari, arredi puliti e versatili. Cresce con il bambino senza stancare.'},{val:'Tematica',desc:'Space, principesse, sport o natura: un tema unico per il mondo del bambino.'},{val:'Non so ancora',desc:'Il consulente ti aiuterà in base all\'età e ai gusti del bambino.'}],
'Divano':[{val:'Moderno_div',desc:'Forme geometriche, tessuti tecnici e colori decisi. Design contemporaneo per il living.'},{val:'Contemporaneo_div',desc:'Comfort e stile in equilibrio: bouclé, velluto e palette calde per ogni ambiente.'},{val:'Classico_div',desc:'Linee morbide, braccioli arrotondati e tessuti pregiati. Senza tempo.'},{val:'Nordico / Scandi_div',desc:'Gambe in legno, tessuti naturali e toni neutri. Si abbina a tutto.'},{val:'Non so ancora',desc:'Il consulente ti mostrerà tutta la gamma disponibile in negozio.'}],
'Ufficio':[{val:'Moderno / Minimal',desc:'Scrivania pulita, linee essenziali e niente distrazioni. Focus e produttività.'},{val:'Contemporaneo_uff',desc:'Materiali nobili e design curato per uno studio professionale e accogliente.'},{val:'Industrial_uff',desc:'Metallo, legno grezzo e lampade a vista. Carattere urbano nel lavoro.'},{val:'Nordico / Scandi_uff',desc:'Funzionalità e leggerezza. Spazio ordinato, toni chiari, massimo comfort.'},{val:'Non so ancora',desc:'Il consulente valuterà le tue esigenze e lo spazio disponibile.'}],
'Garden':[{val:'Moderno / Design',desc:'Materiali tecnici, linee geometriche e finiture premium. Outdoor da rivista.'},{val:'Naturale / Legno',desc:'Teak, acacia e rattan naturale. Il giardino che profuma di vacanza.'},{val:'Tropicale / Rattan',desc:'Rattan sintetico, cuscini vivaci e atmosfera resort. Estate tutto l\'anno.'},{val:'Non so ancora',desc:'Il consulente ti mostrerà tutte le collezioni outdoor disponibili.'}],
'Altro':[{val:'Moderno / Minimal',desc:'Linee essenziali, colori neutri, materiali di qualità. Eleganza senza eccessi.'},{val:'Contemporaneo',desc:'Mix di materiali caldi e moderni. Accogliente e accessibile.'},{val:'Classico',desc:'Dettagli raffinati e senza tempo. Per chi ama l\'eleganza tradizionale.'},{val:'Nordico / Scandi',desc:'Legno chiaro, toni naturali e funzionalità. Il comfort nordico in casa.'},{val:'Non so ancora',desc:'Il consulente ti presenterà le soluzioni più adatte al tuo gusto.'}]
};
var STEPS = [{id:1,lbl:'Categoria'},{id:2,lbl:'Spazio'},{id:3,lbl:'Stile'},{id:4,lbl:'Contatti'}];
var CFR_IMG_MAP = {
'Lineare':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_lineare.jpg',
'Angolare':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_angolare.jpg',
'Penisola':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_con_penisola.jpg',
'Isola':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_con_isola.jpg',
'Moderna':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_stile_moderno.jpg',
'Contemporanea':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_stile_contemporaneo.jpg',
'Classica':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_stile_classico.jpg',
'Rustica':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cucina_stile_nordico_country.jpg',
'Piccolo (fino a 20mq)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_piccolo.jpg',
'Medio (20-35mq)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_medio.jpg',
'Grande (oltre 35mq)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_grande.jpg',
'Open space':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Open_Space.jpg',
'Moderno':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_moderno.jpg',
'Contemporaneo':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_contemporaneo.jpg',
'Classico':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_classico.jpg',
'Industrial':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_industrial.jpg',
'Shabby Chic':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Soggiorno_shabby_chic.jpg',
'Armadio su misura':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Armadio_su_misura.jpg',
'Cabina armadio':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cabina_armadio.jpg',
'Letto + contenitore':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Letto_con_contenitore.jpg',
'Camera completa':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Camera_completa.jpg',
'Solo complementi':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Solo_complementi.jpg',
'Nordico / Scandi':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Camera_nordica.jpg',
'Bambino (0-6 anni)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Camera_bambino_0-6_anni.jpg',
'Bambino (7-11 anni)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Camera_ragazzo_7-11_anni.jpg',
'Ragazzo (12-16 anni)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Camera_ragazzo_12-16_anni.jpg',
'Giovane (17+ anni)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Camera_giovane_17.jpg',
'Colorata / Giocosa':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cameretta_giocosa.jpg',
'Neutra / Minimal':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cameretta_neutra-minimal.jpg',
'Tematica':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Cameretta_tematica.jpg',
'Divano 2/3 posti':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_2_e_3_posti.jpg',
'Divano angolare':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_angolare.jpg',
'Divano letto':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_letto.jpg',
'Chaise longue':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Chaise_Longue.jpg',
'Divano relax':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_relax.jpg',
'Moderno_div':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_moderno.jpg',
'Contemporaneo_div':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_contemporaneo.jpg',
'Classico_div':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_classico.jpg',
'Nordico / Scandi_div':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Divano_nordico.jpg',
'Giardino privato':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Giardino_privato.jpg',
'Terrazzo / Balcone':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Terrazzo_balcone.jpg',
'Bordo piscina':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Bordo_piscina.jpg',
'Pergola':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Pergola.jpg',
'Moderno / Design':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Giardino_moderno.jpg',
'Naturale / Legno':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Giardino_legno.jpg',
'Tropicale / Rattan':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Giardino_rattan.jpg',
'Home office (angolo)':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Home_office.jpg',
'Studio separato':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Studio_separato.jpg',
'Ufficio professionale':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Ufficio_professionale.jpg',
'Scrivania + libreria':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Scrivania_libreria.jpg',
'Moderno / Minimal':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Ufficio_minimal.jpg',
'Contemporaneo_uff':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Ufficio_moderno.jpg',
'Industrial_uff':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Ufficio_industrial.jpg',
'Nordico / Scandi_uff':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Ufficio_nordico.jpg',
'Zona giorno':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Zona_Giorno_Intro.jpg',
'Zona notte':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Zona_Notte_Intro.jpg',
'Veranda coperta':'https://conforama.it/media/wysiwyg/raccontaci_la_idea/Giardino_veranda_coperta.jpg'
};
var cfrData = { categoria:null, spazio:null, stile:null };
var cur = 1;
var PANEL_TO_PROGRESS = {1:1,2:2,3:3,5:4};
function renderProg() {
var track = document.getElementById('cfr-progress-track');
var progStep = PANEL_TO_PROGRESS[cur] || cur;
var html = '';
STEPS.forEach(function(s,i) {
var done=s.id<progStep, active=s.id===progStep;
var dc=done?'done':(active?'active':'');
html+='<div class="cfr-prog-step"><div class="cfr-prog-dot '+dc+'">'+(done?'✓':s.id)+'</div><div class="cfr-prog-lbl '+dc+'">'+s.lbl+'</div></div>';
if(i<STEPS.length-1) html+='<div class="cfr-prog-line '+(done?'done':'')+'"></div>';
});
track.innerHTML=html;
setTimeout(function(){
var dots=track.querySelectorAll('.cfr-prog-dot.active');
if(dots.length) dots[0].scrollIntoView({behavior:'smooth',block:'nearest',inline:'center'});
},50);
}
function showStep(n) {
document.querySelectorAll('.cfr-panel').forEach(function(p){p.classList.remove('active');});
var panel=document.getElementById('cfrp-'+n);
if(panel) panel.classList.add('active');
cur=n;
if(n!==6) renderProg();
var outer=document.getElementById('lpcfr-outer');
if(outer) outer.scrollIntoView({behavior:'smooth',block:'start'});
}
function buildStep2() {
var cat=cfrData.categoria;
var cfg=S2_CONFIG[cat]||S2_CONFIG['Soggiorno'];
document.getElementById('cfr-s2-title').textContent=cfg.title;
document.getElementById('cfr-s2-sub').textContent=cfg.sub;
var grid=document.getElementById('cfrgrid-spazio');
grid.innerHTML='';
cfrData.spazio=null;
cfg.options.forEach(function(opt){
var div=document.createElement('div');
div.className='cfr-card';
div.dataset.val=opt.val;
div.addEventListener('click',function(){ cfrSelectSpazio(div); });
var imgSrc=CFR_IMG_MAP[opt.val]||null;
if(imgSrc){
div.classList.add('has-img');
div.innerHTML='<div class="cfr-card-check">✓</div><img src="'+imgSrc+'" alt="'+opt.val+'" loading="lazy"><div class="cfr-card-overlay"><div class="cfr-card-name">'+opt.val+'</div></div>';
} else {
div.innerHTML='<div class="cfr-card-check">✓</div><div class="cfr-card-name">'+opt.val+'</div>'+(opt.sub?'<div style="font-size:10px;color:var(--gray);margin-top:2px">'+opt.sub+'</div>':'');
}
grid.appendChild(div);
});
document.getElementById('cfrd-spazio').textContent='';
document.getElementById('cfrd-spazio').classList.remove('show');
}
function buildStep3() {
var cat=cfrData.categoria;
var opts=S3_CONFIG[cat]||S3_CONFIG['Soggiorno'];
var grid=document.getElementById('cfrgrid-stile');
grid.innerHTML='';
cfrData.stile=null;
opts.forEach(function(opt){
var div=document.createElement('div');
div.className='cfr-card';
div.dataset.val=opt.val;
div.dataset.desc=opt.desc;
div.addEventListener('click',function(){ cfrSelectStile(div); });
var imgSrc3=CFR_IMG_MAP[opt.val]||null;
if(imgSrc3){
div.classList.add('has-img');
var dv3=opt.val.replace(/_div$|_uff$/,'');
div.innerHTML='<div class="cfr-card-check">✓</div><img src="'+imgSrc3+'" alt="'+dv3+'" loading="lazy"><div class="cfr-card-overlay"><div class="cfr-card-name">'+dv3+'</div></div>';
} else {
var dv=opt.val.replace(/_div$|_uff$/,'');
div.innerHTML='<div class="cfr-card-check">✓</div><div class="cfr-card-name">'+dv+'</div>';
}
grid.appendChild(div);
});
var descEl=document.getElementById('cfrd-stile');
descEl.textContent='';
descEl.classList.remove('show');
}
window.cfrSelectCat = function(el) {
document.querySelectorAll('#cfrgrid-cat .cfr-cat-card').forEach(function(c){c.classList.remove('selected');});
el.classList.add('selected');
cfrData.categoria=el.dataset.val;
document.getElementById('cfre-cat').classList.remove('show');
};
window.cfrSelectSpazio = function(el) {
var cfg=S2_CONFIG[cfrData.categoria]||{};
document.querySelectorAll('#cfrgrid-spazio .cfr-card').forEach(function(c){c.classList.remove('selected');});
el.classList.add('selected');
cfrData.spazio=el.dataset.val;
document.getElementById('cfre-spazio').classList.remove('show');
var descEl=document.getElementById('cfrd-spazio');
var desc=cfg.descs&&cfg.descs[el.dataset.val];
if(desc){
descEl.innerHTML='<p style="margin:0">'+desc+'</p>';
descEl.classList.add('show');
} else { descEl.classList.remove('show'); }
};
window.cfrSelectStile = function(el) {
document.querySelectorAll('#cfrgrid-stile .cfr-card').forEach(function(c){c.classList.remove('selected');});
el.classList.add('selected');
cfrData.stile=el.dataset.val;
document.getElementById('cfre-stile').classList.remove('show');
var descEl=document.getElementById('cfrd-stile');
if(el.dataset.desc){
descEl.innerHTML='<p style="margin:0">'+el.dataset.desc+'</p>';
descEl.classList.add('show');
} else { descEl.classList.remove('show'); }
};
window.cfrNext = function(from) {
if(from===1){
if(!cfrData.categoria){document.getElementById('cfre-cat').classList.add('show');return;}
buildStep2(); showStep(2); return;
}
if(from===2){
if(!cfrData.spazio){document.getElementById('cfre-spazio').classList.add('show');return;}
if(cfrData.categoria==='Altro'){cfrData.stile='\u2014';buildSummary();showStep(5);return;}
buildStep3(); showStep(3); return;
}
if(from===3){
if(!cfrData.stile){document.getElementById('cfre-stile').classList.add('show');return;}
buildSummary(); showStep(5); return;
}
};
window.cfrPrev = function(from) {
if(from===2){showStep(1);return;}
if(from===3){showStep(2);return;}
if(cur===5){
if(cfrData.categoria==='Altro'){showStep(2);return;}
showStep(3);return;
}
showStep(from-1);
};
function buildSummary() {
var rows=[['Categoria',cfrData.categoria],['Spazio',cfrData.spazio],['Stile',(cfrData.stile||'').replace(/_div$|_uff$/,'')]];
document.getElementById('cfr-sum-rows').innerHTML=rows.map(function(r){
return '<div class="cfr-sum-row"><span class="cfr-sum-k">'+r[0]+'</span><span class="cfr-sum-v">'+(r[1]||'—')+'</span></div>';
}).join('');
}
window.lpcfrInviaLead = function() {
var nome=document.getElementById('cfrf-nome').value.trim();
var cogn=document.getElementById('cfrf-cogn').value.trim();
var mail=document.getElementById('cfrf-mail').value.trim();
var tel=document.getElementById('cfrf-tel').value.trim();
var priv=document.getElementById('cfrf-priv').checked;
var mktg=document.getElementById('cfrf-mktg').checked;
var errEl=document.getElementById('cfre-form');
var emailOk=/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(mail);
var telOk=/^[\+]?[0-9\s\-]{7,15}$/.test(tel);
var nomeOk=nome.length>=2, cognOk=cogn.length>=2;
['cfrf-nome','cfrf-cogn','cfrf-mail','cfrf-tel'].forEach(function(id){
var el=document.getElementById(id); if(el) el.classList.remove('cfr-field-error');
});
document.querySelectorAll('#cfrp-5 .cfr-field-msg').forEach(function(m){m.classList.remove('show');m.textContent='';});
var hasError=false;
function setErr(id,msg){
var el=document.getElementById(id);
if(el){el.classList.add('cfr-field-error');var msgEl=el.parentNode.querySelector('.cfr-field-msg');if(msgEl){msgEl.textContent=msg;msgEl.classList.add('show');}}
hasError=true;
}
if(!nomeOk) setErr('cfrf-nome','Inserisci il nome (min. 2 caratteri)');
if(!cognOk) setErr('cfrf-cogn','Inserisci il cognome (min. 2 caratteri)');
if(!emailOk) setErr('cfrf-mail','Email non valida — deve contenere @');
if(!telOk) setErr('cfrf-tel','Telefono non valido (7-15 cifre)');
if(hasError||!priv){
if(!priv){errEl.textContent='Accetta la privacy policy per continuare.';errEl.classList.add('show');}
else errEl.classList.remove('show');
var first=document.querySelector('#cfrp-5 .cfr-field-error');
if(first) first.scrollIntoView({behavior:'smooth',block:'center'});
else errEl.scrollIntoView({behavior:'smooth',block:'nearest'});
return;
}
errEl.classList.remove('show');
var neg=document.getElementById('cfrf-negozio').value||'';
var note=document.getElementById('cfrf-note').value.trim()||'';
var payload={
form_identifier:'conforama-configuratore',
store_email:getStoreEmail(),
user_email:mail, phone:tel,
privacy_consent:1, marketing_consent:mktg?1:0,
nome_cognome:nome+' '+cogn,
categoria:cfrData.categoria||'',
spazio:cfrData.spazio||'',
stile:(cfrData.stile||'').replace(/_div$|_uff$/,''),
negozio:neg, note:note
};
var btnSubmit=document.querySelector('#cfrp-5 .lpcfr-btn-next');
if(btnSubmit){btnSubmit.style.opacity='0.6';btnSubmit.style.pointerEvents='none';}
var xhr=new XMLHttpRequest();
xhr.open('POST','/ioho_leadform/index/submit',true);
xhr.setRequestHeader('Content-Type','application/json');
xhr.onload=function(){
if(btnSubmit){btnSubmit.style.opacity='';btnSubmit.style.pointerEvents='';}
var result;
try{result=JSON.parse(xhr.responseText);}
catch(e){result={success:false,message:'Risposta non valida dal server.'};}
if(result.success){
var detailRows=[['Nome',nome+' '+cogn],['Email',mail],['Telefono',tel],['Categoria',cfrData.categoria],['Spazio',cfrData.spazio],['Stile',(cfrData.stile||'').replace(/_div$|_uff$/,'')],['Negozio',neg||'\u2014'],['Offerte email',mktg?'Sì':'No']];
var detailEl=document.getElementById('cfr-success-detail');
detailEl.innerHTML='<div class="cfr-success-detail-title">Riepilogo richiesta</div>'+detailRows.map(function(r){return '<div class="cfr-success-detail-row"><span>'+r[0]+'</span><span>'+(r[1]||'\u2014')+'</span></div>';}).join('');
if(!mktg){
var nt=document.getElementById('cfr-email-note-title');
var ns=document.getElementById('cfr-email-note-sub');
if(nt) nt.textContent='Un consulente ti contatterà presto';
if(ns) ns.textContent='Riceverai una chiamata entro 24 ore per ricevere il tuo preventivo personalizzato.';
}
document.getElementById('cfr-progress-wrap').style.display='none';
showStep(6);
} else {
errEl.textContent=result.message||'Errore durante l\'invio. Riprova tra qualche istante.';
errEl.classList.add('show');
errEl.scrollIntoView({behavior:'smooth',block:'nearest'});
}
};
xhr.onerror=function(){
if(btnSubmit){btnSubmit.style.opacity='';btnSubmit.style.pointerEvents='';}
errEl.textContent='Errore di connessione. Controlla la rete e riprova.';
errEl.classList.add('show');
errEl.scrollIntoView({behavior:'smooth',block:'nearest'});
};
xhr.send(JSON.stringify(payload));
};
/* URL Prefill */
(function(){
var p=new URLSearchParams(window.location.search);
var formMap={nome:'cfrf-nome',cogn:'cfrf-cogn',email:'cfrf-mail',tel:'cfrf-tel',negozio:'cfrf-negozio',note:'cfrf-note'};
Object.keys(formMap).forEach(function(k){var v=p.get(k);if(v){var el=document.getElementById(formMap[k]);if(el) el.value=v;}});
var cat=p.get('categoria');
if(cat){var el=document.querySelector('#cfrgrid-cat [data-val="'+cat+'"]');if(el) el.click();}
})();
/* Reset errore campo su input */
['cfrf-nome','cfrf-cogn','cfrf-mail','cfrf-tel'].forEach(function(id){
var el=document.getElementById(id);
if(!el) return;
el.addEventListener('input',function(){
el.classList.remove('cfr-field-error');
var msgEl=el.parentNode.querySelector('.cfr-field-msg');
if(msgEl){msgEl.classList.remove('show');msgEl.textContent='';}
});
});
renderProg();
})();
</script>