Simplify quote form with expandable details section
Show only name, email and message by default. Detailed fields (units, connections, VPN, extras) and price calculator open via "Tarkemmat tiedot & hintalaskuri" button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
87
style.css
87
style.css
@@ -1616,12 +1616,6 @@ a:hover {
|
||||
}
|
||||
|
||||
/* === Calculator Layout === */
|
||||
.calculator-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: 40px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.calculator-form {
|
||||
min-width: 0;
|
||||
@@ -1661,10 +1655,6 @@ a:hover {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.calculator-sidebar {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.price-calculator {
|
||||
background: var(--color-dark);
|
||||
@@ -1787,14 +1777,89 @@ a:hover {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Expand form button */
|
||||
.btn-expand-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0 24px;
|
||||
background: var(--color-bg-alt);
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text-heading);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-expand-form:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
background: rgba(240, 112, 96, 0.04);
|
||||
}
|
||||
.btn-expand-form .btn-expand-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.btn-expand-form.expanded .btn-expand-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Form details (expandable) */
|
||||
.form-details {
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Calculator sidebar: hidden by default, shown when expanded */
|
||||
.calculator-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.calculator-sidebar.visible {
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
/* When sidebar not visible, form takes full width */
|
||||
.calculator-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
align-items: start;
|
||||
}
|
||||
.calculator-layout:has(.calculator-sidebar.visible) {
|
||||
grid-template-columns: 1fr 360px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.calculator-layout {
|
||||
.calculator-layout,
|
||||
.calculator-layout:has(.calculator-sidebar.visible) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.calculator-sidebar {
|
||||
position: static;
|
||||
order: -1;
|
||||
}
|
||||
.calculator-sidebar.visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Animations === */
|
||||
|
||||
@@ -62,20 +62,33 @@
|
||||
<!-- Form side -->
|
||||
<div class="calculator-form">
|
||||
<form id="quote-form">
|
||||
<!-- Yhteystiedot -->
|
||||
<!-- Yhteystiedot (aina näkyvissä) -->
|
||||
<div class="form-section-title">Yhteystiedot</div>
|
||||
<div class="form-group">
|
||||
<label for="name">Nimi</label>
|
||||
<input type="text" id="name" name="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company">Yritys</label>
|
||||
<input type="text" id="company" name="company">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Sähköposti *</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group form-group-full">
|
||||
<label for="message">Viesti</label>
|
||||
<textarea id="message" name="message" rows="4" placeholder="Kerro tarpeistasi: laitemäärät, tehovaatimukset, aikataulu, erityistoiveet..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Koko lomake -nappi -->
|
||||
<button type="button" class="btn-expand-form" id="btn-expand-form">
|
||||
<span class="btn-expand-icon">+</span>
|
||||
Tarkemmat tiedot & hintalaskuri
|
||||
</button>
|
||||
|
||||
<!-- Yksityiskohtainen lomake (piilotettu oletuksena) -->
|
||||
<div class="form-details" id="form-details" style="display:none;">
|
||||
<div class="form-group">
|
||||
<label for="company">Yritys</label>
|
||||
<input type="text" id="company" name="company">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Puhelinnumero</label>
|
||||
<input type="tel" id="phone" name="phone">
|
||||
@@ -183,12 +196,6 @@
|
||||
<span>Remote Hands (tuntiveloitus)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Lisätiedot -->
|
||||
<div class="form-section-title">Lisätiedot</div>
|
||||
<div class="form-group form-group-full">
|
||||
<label for="message">Viesti</label>
|
||||
<textarea id="message" name="message" rows="4" placeholder="Kerro lisää tarpeistasi: tehovaatimukset, aikataulu, erityistoiveet..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Captcha -->
|
||||
@@ -303,6 +310,26 @@
|
||||
window._refreshCaptcha = generateCaptcha;
|
||||
})();
|
||||
|
||||
// Expand form toggle
|
||||
(function() {
|
||||
var btn = document.getElementById('btn-expand-form');
|
||||
var details = document.getElementById('form-details');
|
||||
var sidebar = document.querySelector('.calculator-sidebar');
|
||||
var expanded = false;
|
||||
|
||||
btn.addEventListener('click', function() {
|
||||
expanded = !expanded;
|
||||
details.style.display = expanded ? '' : 'none';
|
||||
sidebar.classList.toggle('visible', expanded);
|
||||
btn.classList.toggle('expanded', expanded);
|
||||
btn.querySelector('.btn-expand-icon').textContent = expanded ? '−' : '+';
|
||||
btn.childNodes[btn.childNodes.length - 1].textContent = expanded ? ' Piilota tarkemmat tiedot' : ' Tarkemmat tiedot & hintalaskuri';
|
||||
if (expanded) {
|
||||
details.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// Price Calculator
|
||||
(function() {
|
||||
const form = document.getElementById('quote-form');
|
||||
@@ -315,13 +342,14 @@
|
||||
let lines = [];
|
||||
let hasCustom = false;
|
||||
|
||||
// Laitepaikat
|
||||
// Laitepaikat (voi olla piilossa)
|
||||
const units = [
|
||||
{ el: document.getElementById('units-1u'), name: '1U laitepaikka', price: 49 },
|
||||
{ el: document.getElementById('units-2u'), name: '2U laitepaikka', price: 79 },
|
||||
{ el: document.getElementById('units-4u'), name: '4U laitepaikka', price: 139 },
|
||||
];
|
||||
units.forEach(u => {
|
||||
if (!u.el) return;
|
||||
const qty = parseInt(u.el.value) || 0;
|
||||
if (qty > 0) {
|
||||
const subtotal = qty * u.price;
|
||||
@@ -331,7 +359,8 @@
|
||||
});
|
||||
|
||||
// Kokokaappi
|
||||
const rackQty = parseInt(document.getElementById('units-rack').value) || 0;
|
||||
const rackEl = document.getElementById('units-rack');
|
||||
const rackQty = rackEl ? (parseInt(rackEl.value) || 0) : 0;
|
||||
if (rackQty > 0) {
|
||||
hasCustom = true;
|
||||
lines.push({ label: 'Kokokaappi x' + rackQty, amount: null });
|
||||
@@ -339,7 +368,7 @@
|
||||
|
||||
// Yhteysnopeus
|
||||
const connEl = document.getElementById('connection');
|
||||
const connVal = connEl.value;
|
||||
const connVal = connEl ? connEl.value : '0';
|
||||
let connPrice = 0;
|
||||
if (connVal === 'custom') {
|
||||
hasCustom = true;
|
||||
@@ -354,28 +383,28 @@
|
||||
|
||||
// Varmennettu portti
|
||||
const redundant = form.querySelector('[name="redundant_port"]');
|
||||
if (redundant.checked) {
|
||||
if (redundant && redundant.checked) {
|
||||
total += 10;
|
||||
lines.push({ label: 'Varmennettu portti', amount: 10 });
|
||||
}
|
||||
|
||||
// BGP
|
||||
const bgpEl = document.getElementById('bgp');
|
||||
const bgpPrice = parseInt(bgpEl.value) || 0;
|
||||
if (bgpPrice > 0) {
|
||||
const bgpPrice = bgpEl ? (parseInt(bgpEl.value) || 0) : 0;
|
||||
if (bgpEl && bgpPrice > 0) {
|
||||
total += bgpPrice;
|
||||
lines.push({ label: bgpEl.options[bgpEl.selectedIndex].text.split('(')[0].trim(), amount: bgpPrice });
|
||||
}
|
||||
|
||||
// VPN
|
||||
const vpnEl = document.getElementById('vpn');
|
||||
const vpnVal = vpnEl.value;
|
||||
const vpnVal = vpnEl ? vpnEl.value : '0';
|
||||
if (vpnVal === 'custom') {
|
||||
hasCustom = true;
|
||||
lines.push({ label: 'Dedicated L2/MPLS', amount: null });
|
||||
} else {
|
||||
const vpnPrice = parseInt(vpnVal) || 0;
|
||||
if (vpnPrice > 0) {
|
||||
if (vpnEl && vpnPrice > 0) {
|
||||
total += vpnPrice;
|
||||
lines.push({ label: vpnEl.options[vpnEl.selectedIndex].text.split('(')[0].trim(), amount: vpnPrice });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user