jukka/konesaliturku.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign contact form as comprehensive quote request

Browse Source 
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:
Jukka Lampikoski
2026-03-09 19:08:35 +02:00
parent 165bce6f69
commit 3f117f764f
2 changed files with 208 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
index.html
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">

96
style.css
View File

@@ -747,6 +747,102 @@ a:hover {
min-height: 120px;
}
.form-group select {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 10px 14px;
font-size: 0.95rem;
font-family: inherit;
color: var(--color-text);
transition: border-color 0.2s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.form-group select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.1);
}
.form-section-title {
grid-column: 1 / -1;
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text-heading);
padding-top: 20px;
margin-bottom: -4px;
border-top: 1px solid var(--color-border);
}
.form-section-title:first-child {
border-top: none;
padding-top: 0;
}
.checkbox-group {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--color-text);
cursor: pointer;
padding: 8px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
transition: border-color 0.2s, background 0.2s;
user-select: none;
}
.checkbox-label:hover {
border-color: var(--color-primary-light);
background: rgba(232, 93, 74, 0.03);
}
.checkbox-label:has(input:checked) {
border-color: var(--color-primary);
background: rgba(232, 93, 74, 0.06);
}
.checkbox-label input[type="checkbox"] {
accent-color: var(--color-primary);
width: 16px;
height: 16px;
cursor: pointer;
}
.unit-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 100px;
gap: 12px;
align-items: end;
}
.unit-row .form-group {
margin: 0;
}
.unit-row input[type="number"] {
text-align: center;
-moz-appearance: textfield;
}
.unit-row input[type="number"]::-webkit-inner-spin-button {
opacity: 1;
}
.btn-submit {
grid-column: 1 / -1;
margin-top: 4px;