Redesign contact form as comprehensive quote request

Form now has sections: contact info, rack units (1U/2U/4U/full),
connection speed (1G-100G), redundant port, BGP, site-to-site VPN,
and add-on services (Anycast DNS, block storage, S3 backups, remote hands).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-09 19:08:35 +02:00
parent 165bce6f69
commit 3f117f764f
2 changed files with 208 additions and 3 deletions

View File

@@ -868,6 +868,8 @@
<p class="section-subtitle">Kerro tarpeistasi, niin teemme sinulle tarjouksen</p>
<div class="contact-grid">
<form class="contact-form" id="contact-form">
<!-- Yhteystiedot -->
<div class="form-section-title">Yhteystiedot</div>
<div class="form-group">
<label for="name">Nimi *</label>
<input type="text" id="name" name="name" required>
@@ -884,15 +886,122 @@
<label for="phone">Puhelinnumero</label>
<input type="tel" id="phone" name="phone">
</div>
<!-- Laitepaikat -->
<div class="form-section-title">Laitepaikat</div>
<div class="unit-row">
<div class="form-group">
<label for="units-1u">1U laitepaikka</label>
<select id="units-1u" name="units_1u">
<option value="">Ei tarvetta</option>
<option value="1">1 kpl</option>
<option value="2">2 kpl</option>
<option value="3">3 kpl</option>
<option value="4">4 kpl</option>
<option value="5+">5+ kpl</option>
</select>
</div>
<div class="form-group">
<label for="units-2u">2U laitepaikka</label>
<select id="units-2u" name="units_2u">
<option value="">Ei tarvetta</option>
<option value="1">1 kpl</option>
<option value="2">2 kpl</option>
<option value="3">3 kpl</option>
<option value="4">4 kpl</option>
<option value="5+">5+ kpl</option>
</select>
</div>
</div>
<div class="unit-row">
<div class="form-group">
<label for="units-4u">4U laitepaikka</label>
<select id="units-4u" name="units_4u">
<option value="">Ei tarvetta</option>
<option value="1">1 kpl</option>
<option value="2">2 kpl</option>
<option value="3">3 kpl</option>
<option value="5+">5+ kpl</option>
</select>
</div>
<div class="form-group">
<label for="units-rack">Kokokaappi (42U)</label>
<select id="units-rack" name="units_rack">
<option value="">Ei tarvetta</option>
<option value="1">1 kpl</option>
<option value="2">2 kpl</option>
<option value="3+">3+ kpl</option>
</select>
</div>
</div>
<!-- Yhteysnopeus -->
<div class="form-section-title">Yhteysnopeus</div>
<div class="form-group form-group-full">
<label for="message">Viesti *</label>
<textarea id="message" name="message" rows="5" required placeholder="Kerro meille tarpeistasi: montako laitepaikkaa tarvitset, millaisia laitteita, tehovaatimukset..."></textarea>
<label for="connection">Haluttu yhteysnopeus</label>
<select id="connection" name="connection">
<option value="">Valitse yhteysnopeus</option>
<option value="1g-shared">1 Gbit/s jaettu (sis. hintaan)</option>
<option value="1g-dedicated">1 Gbit/s dedicated (€99/kk)</option>
<option value="10g">10 Gbit/s dedicated (€299/kk)</option>
<option value="100g">100 Gbit/s (räätälöity)</option>
</select>
</div>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" name="redundant_port" value="1">
<span>Varmennettu portti (kahdennettu)</span>
</label>
<label class="checkbox-label">
<input type="checkbox" name="bgp" value="1">
<span>BGP-reititys / oma AS</span>
</label>
</div>
<!-- VPN -->
<div class="form-section-title">Site-to-Site VPN</div>
<div class="form-group form-group-full">
<label for="vpn">VPN toimitilan ja konesalin väliin</label>
<select id="vpn" name="vpn">
<option value="">Ei tarvetta</option>
<option value="ipsec">IPsec VPN (max 100 Mbit/s, €49/kk)</option>
<option value="ipsec-pro">IPsec VPN Pro (max 1 Gbit/s, €99/kk)</option>
<option value="l2-mpls">Dedicated L2/MPLS (räätälöity)</option>
</select>
</div>
<!-- Lisäpalvelut -->
<div class="form-section-title">Lisäpalvelut</div>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" name="anycast_dns" value="1">
<span>Anycast DNS -palvelu</span>
</label>
<label class="checkbox-label">
<input type="checkbox" name="block_storage" value="1">
<span>Blokkitason storage</span>
</label>
<label class="checkbox-label">
<input type="checkbox" name="s3_storage" value="1">
<span>S3-levypinta (backupit)</span>
</label>
<label class="checkbox-label">
<input type="checkbox" name="remote_hands" value="1">
<span>Remote Hands -palvelu</span>
</label>
</div>
<!-- Viesti -->
<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>
<!-- Honeypot -->
<div style="display:none" aria-hidden="true">
<input type="text" name="website" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="btn btn-primary btn-submit">Lähetä viesti</button>
<button type="submit" class="btn btn-primary btn-submit">Lähetä tarjouspyyntö</button>
<div class="form-status" id="form-status"></div>
</form>
<div class="contact-info">