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:
115
index.html
115
index.html
@@ -868,6 +868,8 @@
|
|||||||
<p class="section-subtitle">Kerro tarpeistasi, niin teemme sinulle tarjouksen</p>
|
<p class="section-subtitle">Kerro tarpeistasi, niin teemme sinulle tarjouksen</p>
|
||||||
<div class="contact-grid">
|
<div class="contact-grid">
|
||||||
<form class="contact-form" id="contact-form">
|
<form class="contact-form" id="contact-form">
|
||||||
|
<!-- Yhteystiedot -->
|
||||||
|
<div class="form-section-title">Yhteystiedot</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="name">Nimi *</label>
|
<label for="name">Nimi *</label>
|
||||||
<input type="text" id="name" name="name" required>
|
<input type="text" id="name" name="name" required>
|
||||||
@@ -884,15 +886,122 @@
|
|||||||
<label for="phone">Puhelinnumero</label>
|
<label for="phone">Puhelinnumero</label>
|
||||||
<input type="tel" id="phone" name="phone">
|
<input type="tel" id="phone" name="phone">
|
||||||
</div>
|
</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">
|
<div class="form-group form-group-full">
|
||||||
<label for="message">Viesti *</label>
|
<label for="connection">Haluttu yhteysnopeus</label>
|
||||||
<textarea id="message" name="message" rows="5" required placeholder="Kerro meille tarpeistasi: montako laitepaikkaa tarvitset, millaisia laitteita, tehovaatimukset..."></textarea>
|
<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>
|
</div>
|
||||||
<!-- Honeypot -->
|
<!-- Honeypot -->
|
||||||
<div style="display:none" aria-hidden="true">
|
<div style="display:none" aria-hidden="true">
|
||||||
<input type="text" name="website" tabindex="-1" autocomplete="off">
|
<input type="text" name="website" tabindex="-1" autocomplete="off">
|
||||||
</div>
|
</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>
|
<div class="form-status" id="form-status"></div>
|
||||||
</form>
|
</form>
|
||||||
<div class="contact-info">
|
<div class="contact-info">
|
||||||
|
|||||||
96
style.css
96
style.css
@@ -747,6 +747,102 @@ a:hover {
|
|||||||
min-height: 120px;
|
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 {
|
.btn-submit {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|||||||
Reference in New Issue
Block a user