markus/AMPERION_Webpage
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SEO Optimierung + Leistungsscroll

Browse source
This commit is contained in:
astosic 2025-08-14 22:28:22 +02:00
parent 2ae734e906
commit e77017c70a
17 changed files with 259 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

37
layouts/_default/contact.html
View file

@ -12,16 +12,17 @@
(and $impressum $impressum.Params.email)
(or site.Params.contact.email site.Params.email) }}
{{/* phone1: deckt sowohl phone als auch phone1 ab (alt & neu) */}}
{{ $phone1 := or
(and $impressum $impressum.Params.telefon)
(or site.Params.contact.phone1 site.Params.phone1) }}
(or site.Params.contact.phone site.Params.contact.phone1 site.Params.phone site.Params.phone1) }}
{{ $phone2 := or
(and $impressum $impressum.Params.telefon2)
(or site.Params.contact.phone2 site.Params.phone2) }}
<style>
/* Nur Hilfsstyles – keine Typo-Overrides */
/* Nur Layout-/Hilfsstyles – keine Typo-Overrides */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contact-wrap{padding:56px 0}
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.06)}
@ -32,7 +33,7 @@
.info-item{display:flex;gap:.75rem;align-items:flex-start}
.info-item .ico{flex:0 0 auto;line-height:0;color:#F5A623}
/* CTA-Buttons & Socials: wir nutzen eure Klassen, nur Layout-Hooks */
/* CTA-Buttons & Socials: nutzt eure bestehenden Klassen – nur Layout-Hooks */
.cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
.cta__social{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta__social-link{width:56px;height:56px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(0,0,0,.06)}
@ -51,12 +52,12 @@
.form-control:focus{border-color:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.18)}
.form-legal{margin:0;opacity:.9} /* p-Standardgröße bleibt erhalten */
.card h3{margin:0 0 .5rem} /* nur Abstand, Typo kommt global von h3 */
</style>
<section class="contact-wrap">
<div class="container">
<div class="row g-4">
<!-- ===== Kontakt-Infos ===== -->
<div class="col-lg-5" data-reveal>
<div class="card card-pad stack-lg">
@ -111,9 +112,14 @@
method="POST"
class="card card-pad stack"
{{ if .use_netlify }}
name="{{ $formName }}" netlify netlify-honeypot="nhp" action="{{ "/message_sent" | relLangURL }}"
name="{{ $formName }}"
netlify
data-netlify="true"
netlify-honeypot="nhp"
action='{{ "/message_sent/" | relLangURL }}'
{{ else }}
name="contact" action="{{ .action | safeURL }}"
name="contact"
action="{{ .action | safeURL }}"
{{ end }}
>
{{ if .use_netlify }}<input type="hidden" name="form-name" value="{{ $formName }}">{{ end }}
@ -121,7 +127,7 @@
<div class="form-grid">
<div class="form-group">
<label for="name" class="visually-hidden">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Name" required>
<input id="name" name="name" type="text" autocomplete="name" class="form-control" placeholder="Name" required>
</div>
<div class="form-group">
<label for="email" class="visually-hidden">E-Mail</label>
@ -129,11 +135,11 @@
</div>
<div class="form-group">
<label for="company" class="visually-hidden">Unternehmen</label>
<input id="company" name="company" type="text" class="form-control" placeholder="Unternehmen (optional)">
<input id="company" name="company" type="text" autocomplete="organization" class="form-control" placeholder="Unternehmen (optional)">
</div>
<div class="form-group">
<label for="phone" class="visually-hidden">Telefon</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Telefon (optional)">
<input id="phone" name="phone" type="tel" autocomplete="tel" class="form-control" placeholder="Telefon (optional)">
</div>
<div class="form-group full">
<label for="subject" class="visually-hidden">Betreff</label>
@ -153,19 +159,21 @@
{{ if .use_recaptcha }}
<input type="hidden" id="captchaResponse" name="g-recaptcha-response">
<div data-netlify-recaptcha="true"></div>
{{ end }}
</div>
<p class="form-legal">
<input type="checkbox" required>
<label for="legal-consent">
<input id="legal-consent" name="legal_consented" type="checkbox" required>
Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
</label>
</p>
<div>
<button class="cta__btn" type="submit" style="--btn-fs:1.5rem; --btn-py:14px; --btn-px:26px;">
<span aria-hidden="true">➜</span><span>Nachricht senden</span>
</button>
</div>
</form>
{{ end }}{{ end }}
@ -181,7 +189,12 @@
var els = document.querySelectorAll("[data-reveal]");
if (!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; }
var io = new IntersectionObserver(function(entries){
entries.forEach(function(entry){ if(entry.isIntersecting){ entry.target.classList.add('is-visible'); io.unobserve(entry.target); }});
entries.forEach(function(entry){
if(entry.isIntersecting){
entry.target.classList.add('is-visible');
io.unobserve(entry.target);
}
});
}, {threshold:.12});
els.forEach(e=>io.observe(e));
})();