Das "Embeddable Audit Tool" wurde entwickelt, um einfach und leicht editierbar zu sein. Wir verzichten bewusst darauf, den Einbettungscode wie andere [3rd] Party Tools zu komprimieren oder zu verschleiern, die es ausdrücklich verhindern, dass Sie den Code anpassen.
Stattdessen zeigen wir den gesamten CSS-Code in einem einfachen Codeblock über dem HTML-Einbettungscode an, damit Sie Formularelemente stylen können, solange Sie über grundlegende CSS-Kenntnisse verfügen.
Alles, was "nötig ist", sind ein paar Zeilen CSS in die relevanten Abschnitte hinzuzufügen, um das Aussehen und Gefühl vollständig [anzupassen]. Wenn Sie über [fortgeschrittene] HTML-Kenntnisse verfügen, können Sie die Formularstruktur selbst ändern.
Sie können auch Ihre eigenen JavaScript-Funktionen hinzufügen (z.B.: zusätzliche [Formular]validierung) oder Sie können andere Funktionen / Systeme bei onSubmit oder onClick innerhalb des [Formulars] aufrufen.
Die einzige Anpassungsempfehlung, die wir haben, ist, keine Änderungen am JavaScript-Codeblock vorzunehmen, da dies Fehler verursachen kann. In diesem Zusammenhang empfehlen wir, die Formularelemente nicht zu sehr von ihrer ursprünglichen Anordnung zu verschieben, da einige JavaScript-Referenzen auf der relativen Positionierung von Objekten im Formular beruhen.
Abgesehen davon raten wir Ihnen dringend und ermutigen Sie, das Formular anzupassen, damit es zum Aussehen und Gefühl Ihrer Website passt. Es sollte sich wie ein natürlicher Teil der Benutzererfahrung auf Ihrer Seite anfühlen und nicht wie ein angehängtes Widget.
Wie dieses Einbettungsformular von Digital Butter:
Wir schlagen dies vor, weil wir sehen, dass Agenturen höhere "Lead-Generierung"-Niveaus erreichen, wenn sie das Formular angemessen anpassen, um den Stil ihrer [Website] zu entsprechen.
In diesem Leitfaden werden wir uns die 3 häufigsten fortgeschrittenen Anpassungen für das "Embed Form" ansehen:
-
- "Erweiterte" [Formular]validierung
- Auslösen eines Google Analytics- oder Facebook-Ereignisses während der Formularübermittlung
- Anpassen der [Formular]feld- oder [Senden]-Buttonstile
Aber zuerst, lassen Sie uns einen Blick darauf werfen, wie der Einbettungscode [strukturiert] ist:
Erforschung des grundlegenden HTML-Einbettungscodes
Um den Einbettungscode zu generieren, gehen Sie zum Einbettungseinstellungen-Tab und klicken Sie auf die Schaltfläche "Einstellungen speichern & Einbettungscode generieren". Unten ist ein Beispiel des Basiscodes.
Sie werden feststellen, dass der erste Abschnitt CSS ist, gefolgt von HTML und schließlich JavaScript. Sie sollten die ersten beiden Abschnitte anpassen und das JavaScript so belassen, wie es ist. Wie im Kommentar in der zweiten Zeile vorgeschlagen, können Sie den CSS-Abschnitt in Ihre CSS-Datei verschieben, damit alles zentral an einem Ort verwaltet wird.
1. Erweiterte Formularvalidierung
Das SEOptimer-Einbettungsformular hat standardmäßig eine einfache Formularvalidierung eingebaut. Bei [OnSubmit] überprüft das JavaScript alle Formularfelder auf gültige Eingaben und im Falle ungültiger Eingaben löst es eine JavaScript-Alarmmeldung im Browser aus, wie die folgende:
Die zwei beliebtesten Alternativen zur Hinzufügung einer robusten Validierung zum Embed-Formular sind "Einschränkungsvalidierung" und "Echtzeitvalidierung":
Einschränkungsvalidierung
Überprüfen Sie den CSS-Tricks-Leitfaden zu Einschränkungsvalidierung, der kontextbezogene Nachrichten auf oder um das Formularfeld verwendet, wenn es in den Fokus kommt. Diese Methode nimmt den Benutzer vorweg und leitet ihn dazu an, sich an das erwartete Eingabeformat zu halten oder im untenstehenden Beispiel zumindest etwas in das Feld einzugeben:
.png)
Echtzeit-Validierung
CSS-Tricks hat auch einen großartigen Leitfaden zur Echtzeitvalidierung, der dem Benutzer während der Eingabe eine Feldvalidierung bietet. Dies kann so einfach sein wie Ikonographie, um eine korrekte Eingabe im Formular anzuzeigen:
2. Auslösen eines Google Analytics- oder Facebook-Ereignisses während der Formularübermittlung
Das Auslösen von Tracking-Ereignissen wie GA oder Facebook für die [Messung] von "Zielen" oder "Retargeting" ist eine großartige Möglichkeit, den Traffic mit Ihrem Embed Form zu nutzen. Der beste Weg, dies zu tun, ist mit einem Tag-Manager-Tool wie Googles eigenem Tag Manager (GTM).
Auf diese Weise können Sie GTM als leeren Container auf Ihrer Website installieren und dann alle "Tags" und "Pixel" direkt von GTM aus verwalten, ohne jedes Mal in den Code eintauchen zu müssen.
Es gibt zwei Möglichkeiten, wie GTM Ereignisse beim Absenden eines Formulars auf Ihrer Website "auslösen" kann:
- Verwendung des eingebauten Formular-Triggers, wenn das submit-Ereignis des Formulars auftritt
- Verlass auf ein benutzerdefiniertes Ereignis (JavaScript-Zeile), das zur Datenebene von GTM hinzugefügt werden muss
Für die meisten Benutzer ist die erste Option die beste, da sie am einfachsten zu implementieren ist und gut funktioniert. Das SEOptimer Embed Form verwendet eine standardmäßige HTML-submit-Aktion, wenn der Benutzer es ausfüllt, sodass solange Sie nicht ändern, wie das Formular Daten übermittelt, dann ist der eingebaute Trigger von GTM der richtige Weg.
Sie müssen einen neuen Trigger in GTM basierend auf "Formularübermittlung" erstellen:
.png)
Stellen Sie außerdem sicher, dass Sie die integrierte Variable "Formular-ID" von GTM aktivieren. Diese Variable identifiziert die ID des eingebetteten Formulars aus dem Form-Tag im HTML.
Wenn Sie die Sendeaktion des Einbettungsformulars entfernen und durch benutzerdefiniertes JavaScript ersetzen, wird der eingebaute Auslöser von GTM nicht mit dem Formular [arbeiten].
Da müssen Sie einen JavaScript-Aufruf hinzufügen, um die Datenebene von GTM darüber zu informieren, dass ein "Ereignis" stattgefunden hat. Dieser Ansatz ist ohnehin einfach, da er nur einmal durchgeführt werden muss, sodass zukünftige "Ereignisse", die Sie hinzufügen möchten, leicht in GTM selbst durchgeführt werden können. Das JavaScript wird ungefähr so aussehen:
dataLayer.push({'event' : '[Formular] übermittelt', 'formName' : 'WebsiteAudit'});
Für "Schritt für Schritt Anleitungen" zur Implementierung beider Methoden in GTM beziehen Sie sich auf Click Insight's Leitfaden.
3. Anpassen der [Form]feld- oder Absende[button]stile
Abgerundete Formularelemente
Dieses Beispiel von der kanadischen digitalen Agentur Reach First ist ein großartiges Beispiel dafür, wie ein paar Zeilen CSS verwendet werden können, um das Audit-Tool an das Aussehen und Gefühl der Website anzupassen. In diesem Fall verwenden sie Abrundungen auf allen anderen Eingabe- und Schaltflächenfeldern auf der gesamten Website:
Hier sehen wir, dass das Attribut "border-radius: 50px;" verwendet wird, um den Abrundungseffekt auf dem Texteingabefeld des Audit-Tools zu erzielen. Beachten Sie, dass das Attribut für den rechten Abstand auf 160px gesetzt ist, um ausreichend Abstand zwischen dem Eingabebereich und der "Prüfen"-Schaltfläche zu gewährleisten. Dies verhindert, dass eingegebener Text über die Schaltfläche gelegt wird.
Für den Button selbst wurden nur die Attribute "border-top-right-radius" und "border-bottom-right-radius" auf 50px gesetzt, um den kohärenten Effekt zwischen dem Eingabefeld und dem Button zu erzielen:
Größen- und Positionierung von "Formularelementen"
Australische digitale Marketingberatung, Stepps hat das "Audit Tool" sehr schön in eine separate "Website Analyser"-Landingpage integriert, indem sie variable Breiten bei den 3 Formularfeldern verwendet und den Button in eine eigene vollbreite Zeile verschoben hat:
Die Breiten der Formularelemente sind relativ und basieren auf dem div-Container, in dem sie enthalten sind. Um dies zu erreichen, wird die Breite in der CSS auf einen Prozentsatz gesetzt. Für das Feld "Geben Sie Ihre Website ein" sehen wir, dass dieses Feld eine Breite von 25% hat:
Während die Felder "Vorname" und "E-Mail" kleiner sind mit einer Breite von jeweils 15%:
Schließlich ist der Button "Bericht generieren" 1px breiter als die Summe der Eingabefelder: 25 + 15 + 15 = 56%
Diese Beispiele zeigen, wie flexibel und einfach es ist, das CSS des Audit-Tools zu aktualisieren, um das Erscheinungsbild der Website Ihrer Agentur [anzupassen]. Wenn Sie auf [Probleme] stoßen, während Sie das Audit-Tool installieren, schauen Sie sich auch unseren vollständigen Leitfaden an!
