Dieser Blog besteht aus drei Teilen – Galerie, Formular und Footer – und schließt das Layout der Webseite somit ab. Einstellungen für das Menü, Geschwindigkeitsoptimierungen und der SEO Part stehen dann noch an.

Ergebnis nach diesem Blog #1

Ergebnis nach diesem Blog #2

Ergebnis nach diesem Blog #3

Für unser Menü werden wir noch einen weiteren Anker erstellen und die inneren Abschnitte bestehen aus einem Text-Editor und Basisgalerie Widget. Ich bin der Meinung, dass die Basisgalerie völlig ausreichend ist und man dafür nicht extra noch ein Plugin installieren muss wo die „coolen“ Features wieder nur in einer kostenpflichtigen Variante zur Verfügung stehen.

Das Widget Layout für den ersten Teil dieses Blogs sieht komplizierter aus als es in Wirklichkeit ist.

Einstellungen für Basisgalerie

• 4 Bilder auswählen
• Bildgröße Medium Large
• Spalten 2
• Link Median-Datei
• Lightbox Ja
• Stil – Abstände auf 15
• Eckenradius auf 6

Für den letzten Teil dieses Abschnittes erstellen wir einen weiteren Inneren Abschnitt in der Spalte des äußeren Abschnittes. Die Einstellungen sind die selben, wie im inneren Abschnitt vorher.
Bei der Bildergalerie stellen wir die Größe auf Medium und nutzen nur zwei Bilder.

Zweiter Abschnitt # Formular

Natürlich könnte man auch einfach einen mailto Button erstellen welches den Standard E-Mail Client vom Nutzer öffnet, aber ich denke es wirkt professioneller, wenn man eine Kontakt Möglichkeit anbietet, die dem Nutzer nichts abverlangt.
Als Plugin für das Formular nutze ich Contact Form 7

Nach der Installation finden wir in der WordPress Navigation einen neuen Eintrag Formulare.
Es ist bereits ein Formular angelegt welches wir anpassen können. Wir öffnen das Kontaktformular und Erstellen uns ein Layout.

Dein Name * [text* your-name]
Deine E-Mail-Adresse * [email* your-email]
Betreff [text your-subject]
Deine Nachricht [textarea your-message]

[recaptcha]
[submit "Senden"]

Die E-Mail Einstellungen nehmen wir im Reiter E-Mail vor. Hier muss die E-Mail Adresse angegeben werden, an die die Anfrage geschickt werden soll.

Damit auch der Nutzer eine Bestätigung seiner Anfrage erhält, kann man noch eine zweite E-Mail als Autoresponder konfigurieren.

Am Ende der Einstellungen nicht vergessen auf Speichern zu klicken.

Formular Spam Schutz # CAPTCHA

Damit wir nicht durch unser Formular von Bots zugespamt werden, fügen wir noch ein reCAPTCHA von Google ein. In dem Formular Reiter unter Integration können wir ein reCaptcha konfigurieren und benötigen dafür einen API Schlüssel von Google.
Den API Schlüssel könnt ihr HIER erstellen. Wir nutzen die reCAPTCHA Version 3, tragen unsere Domain und den Inhaber ein und kopieren den generierten Schlüssel in die reCAPTCHA konfiguration.

Formular Einfügen

Bei der Erstellung eines Formulares wird eine ID erzeugt. Die ID benötigen wir zur Identifizierung des Formulares.

Kommen wir zu den Einstellungen der Widgets in Elementor. Wir können die Einstellungen vom vorherigen Abschnitt übernehmen. Die ID vom Anker setzen wir auf kontakt und am Ende fügen wir noch den Shortcode für das Formular ein.

In den Shortcode wird der komplette Code mit den Klammern eingefügt und abgespeichert. Danach sollte dann das Formular zu sehen sein.

CAPTCHA Informationen stylen

Google möchte natürlich unsere Aufmerksamkeit und durch die Integrierung vom Captcha in unser Formular haben wir nun an der rechten Seite ein kleines Informationsfenster hängen.

Damit wir die Größe und Position von dem Fenster für die Policies ändern können, müssen wir die Klasse grecaptcha-badge im CSS anpassen.

.grecaptcha-badge {
position: absolute !important;
left: 0 !important;
opacity: 0.8!important;
transform: scale(0.8);
}

Mit diesen Änderungen befindet sich das Fenster unten links in unserem ersten Abschnitt und mit scale wird das Fenster verkleinert. Damit es nicht ganz so auffällig ist setze ich noch die Durchsichtigkeit auf 0.8.

Alternativer Spamschutz

So ganz optimal ist der Spamschutz in Zeiten der DSGVO nicht. Für die Nutzung werden wieder weitere Daten des Besuchers an Google geschickt und diesem muss auch zugestimmt werden. Dass das Captcha Symbol für die Policies sichtbar sein muss ist noch ein weiterer, unschöner Punkt.
Als Alternative nutze ich das Plugin Honeypot. Hier muss der Benutzer keinen Button drücken um ein Formular abzuschicken. Die Funktionsweise ist relativ simpel gehalten und das Formular wird um weitere Input Felder ergänzt. Diese sind allerdings nicht sichtbar im Formular vorhanden. Sollte nun ein Bot das Formular ausfüllen, dann werden auch die Input Felder von Honeypot ausgefüllt und das Formular kann nicht gesendet werden.
Nach der Installation haben wir im Contact Form 7 einen neuen Reiter.

Klicken wir auf den Reiter Honeypot öffnen sich die Einstellungen. In den Einstellungen sollten wir einen anderen Tag eintragen als den Standard Tag. Einfach nur um den Bots das Leben ein wenig schwerer zu machen.

Den hier generierten Tag fügen wir in unser Formular ein. Auf unserer Webseite können wir mit F12 das Entwicklertool starten. Wenn ihr unter Elements ( so heißt es im Chrome) euer Formular raussucht, sollte hier nun ein Bereich sein der mit display:none nicht angezeigt wird und die unsichtbaren input Felder enthält.

Weitere DSGVO Einstellung

Mit dem Formular Sendet der Besucher auch private Informationen zu uns und natürlich muss der Verarbeitung dieser Informationen vor dem senden noch zugestimmt werden. Dazu müssen wir in unser Formular in den Zusätzlichen Einstellungen den Tag noch aktivieren: acceptance_as_validation: on

Im Formular selber setzen wir den Tag, schreiben einen kurzen Text und verlinken auf unseren Datenschutz.

[acceptance zustimmung]
Ich habe die <a href="/datenschutz"> Datenschutzerklärung </a> zur Kenntnis genommen und akzeptiert.
Ich stimme zu, dass meine Formularangaben zur Kontaktaufnahme bzw. zur Bearbeitung meines Anliegens gespeichert werden.
[/acceptance]

Der Besucher muss der Datenschutzerklärung zustimmen ansonsten kann er die Anfrage nicht senden.

Custom Footer erstellen

Im letzten Abschnitt widmen wir uns dem Footer. Man kann den Footer auch über die Theme Optionen anlegen und dann die Widgets konfigurieren aber ich nutze hier drei Spalten mit jeweils einem HTML Widget und style mir diese dann nach belieben.
Unser letzter Abschnitt hat wieder die Inhaltsbreite Boxed und die Struktur 33, 33, 33.
In der ersten Spalte wiederhole ich noch mal den Namen der Seite und den Slogan. Dazu kommen noch die üblichen Kontaktdaten.

Der HTML Code dazu sieht so aus:

<div class="custom-footer">
<h2>Over-Limits</h2>
<h3>Webseiten, Software und Design</h3>
<span>Rosenweg 3</span>
<span>Mellrichstadt</span>
<span>Telefon: 0176 5555555</span>
<span><a href="mailto:contact@over-limits.de">contact@over-limits.de</a></span>
</div>

Custom Footer #WhatsApp Button

Neben den Links zu unserem Impressum und Datenschutz, erstellen wir noch einen Button, der uns direkt zur Web WhatsApp Seite führt und unsere Kontaktnummer schon vorausgewählt wurde.

Auch hier erstellen wir in unseren Inhalt in der Spalte über das HTML Widget selber.

<div class="custom-footer">
<span><a href="/datenschutz">Datenschutz</a>
</span>
<span><a href="/impressum">Impressum</a>
</span>
<span class="btn-whats">
<a href="https://api.whatsapp.com/send?phone=49DeineNummer">
WhatsApp</a>
</span>
</div>

Mit einem Klick auf den Button öffnet sich die WhatsApp Seite in einem neuen Tab.