Zaawansowana personalizacja formularza osadzania (z HTML i CSS)

Narzędzie Embeddable Audit Tool zostało zaprojektowane tak, aby było proste i łatwe do edycji. Celowo nie kompresujemy ani nie zaciemniamy kodu osadzenia jak inne narzędzia stron trzecich, które [uniemożliwiają] dostosowanie kodu.

Zamiast tego, "eksponujemy" cały CSS w prostym bloku kodu powyżej kodu osadzania HTML, dzięki czemu możesz [stylować] obiekty formularza, o ile masz podstawową wiedzę na temat CSS.

Wystarczy dodać kilka linii CSS do odpowiednich sekcji, aby całkowicie dostosować wygląd i odczucia. Jeśli masz średnią wiedzę na temat HTML, możesz zmodyfikować samą strukturę formularza.

Możesz także dodać własne funkcje JavaScript (np.: [dodatkowa] "walidacja formularza") lub wywołać inne funkcje / systemy przy [zdarzeniu] onSubmit lub onClick w formularzu.

Jedyną rekomendacją dotyczącą dostosowywania jest "nie dokonywanie" żadnych zmian w bloku kodu JavaScript, ponieważ może to spowodować błędy. W związku z tym sugerujemy, abyś [nie] przesuwał elementów formularza zbyt daleko od ich oryginalnego porządku, ponieważ niektóre odniesienia JavaScript polegają na względnym położeniu obiektów w formularzu.

Poza tym zdecydowanie zalecamy i zachęcamy do dostosowania formularza, aby "pasował" do wyglądu i stylu Twojej strony internetowej. Powinien [sprawiać] wrażenie naturalnej części doświadczenia na Twojej stronie, a nie jakby był dodanym "widgetem".

Jak ten osadzony formularz z Digital Butter:

Proponujemy to, ponieważ widzimy, że agencje osiągają wyższe poziomy [generowania] leadów, gdy dostosowują formularz odpowiednio do stylu swojej strony internetowej.

W tym przewodniku przyjrzymy się 3 najczęstszym zaawansowanym "dostosowaniom" dla formularza osadzonego:

1. 1. "Zaawansowana walidacja formularza"
   2. "Wyzwalanie zdarzenia Google Analytics lub Facebook podczas przesyłania formularza"
   3. "Dostosowywanie stylów pola formularza lub przycisku wyślij"

Ale najpierw, spójrzmy na to, jak jest zbudowany kod osadzania:

[Odkrywanie] [podstawowego] kodu osadzania HTML

Aby wygenerować kod do osadzenia, przejdź do zakładki Embedding Settings i naciśnij przycisk "Zapisz ustawienia i wygeneruj kod do osadzenia". Poniżej znajduje się przykład podstawowego kodu.

Zauważysz, że pierwsza sekcja to CSS, następnie HTML i na końcu JavaScript. Powinieneś dostosować pierwsze dwie sekcje i pozostawić JavaScript bez zmian. Jak zasugerowano w komentarzu w [2] linii, możesz przenieść sekcję CSS do swojego pliku CSS, aby wszystko było zarządzane centralnie w jednym miejscu.

1. Zaawansowana "walidacja formularza"

"SEOptimer Embed Form" ma wbudowaną prostą walidację formularza domyślnie. Przy "OnSubmit", "JavaScript" sprawdza wszystkie pola formularza pod kątem prawidłowych danych, a w przypadku nieprawidłowych danych wyzwala komunikat alertu "JavaScript" w przeglądarce, taki jak poniżej:

Dwoma najpopularniejszymi alternatywami dla dodania solidnej walidacji do Formularza Osadzonego są "walidacja ograniczeń" i "walidacja w czasie rzeczywistym":

Walidacja "ograniczeń"

Sprawdź przewodnik CSS-Tricks dotyczący walidacji ograniczeń, który wykorzystuje kontekstowe komunikaty na lub wokół pola formularza, gdy jest ono w centrum uwagi. Ta metoda uprzedza użytkownika i prowadzi go do przestrzegania oczekiwanego formatu wejściowego lub w poniższym przykładzie, przynajmniej wpisania czegoś w pole:

Walidacja w czasie rzeczywistym

CSS-Tricks ma również świetny przewodnik dotyczący walidacji w czasie rzeczywistym, który zapewnia walidację [w polu] użytkownikowi podczas pisania. Może to być tak proste, jak ikonografia wskazująca poprawne dane wejściowe w formularzu:

2. "Uruchomienie" "Google Analytics" lub "Facebook Event" podczas [wysyłania] [formularza]

Uruchamianie zdarzeń śledzenia takich jak GA lub Facebook dla "pomiaru celów" lub "retargetingu" jest świetnym sposobem na [wykorzystanie] ruchu przy użyciu formularza osadzonego. Najlepszym sposobem, aby to zrobić, jest użycie narzędzia do zarządzania tagami, takiego jak własny Tag Manager (GTM) firmy Google.

W ten sposób możesz zainstalować GTM jako pusty kontener na swojej stronie internetowej, a następnie zarządzać wszystkimi "tagami" i "pikselami" bezpośrednio z GTM, bez konieczności zagłębiania się w kod za każdym razem.

Są dwa sposoby, w jakie GTM może [wywołać] "zdarzenia" przy [przesyłaniu] formularza na Twojej stronie internetowej:

• Użycie wbudowanego wyzwalacza formularza, gdy wystąpi zdarzenie "submit" formularza
• Poleganie na niestandardowym Zdarzeniu (linii JavaScript), która musi zostać dodana do warstwy danych GTM

Dla większości użytkowników pierwsza opcja jest najlepsza, ponieważ jest najłatwiejsza do wdrożenia i działa dobrze. Formularz osadzony SEOptimer używa standardowej akcji HTML submit, gdy użytkownik go wypełnia, więc dopóki nie zmienisz sposobu, w jaki formularz przesyła dane, to wbudowany wyzwalacz GTM jest właściwym rozwiązaniem.

Musisz utworzyć nowy Wyzwalacz w GTM na podstawie "Przesłanie formularza":

Również upewnij się, że włączysz wbudowaną zmienną GTM "Form ID". Ta zmienna zidentyfikuje ID "Embed Form" z tagu form w HTML.

Jeśli ostatecznie [usuniesz] akcję przesyłania formularza osadzonego i [zastąpisz] ją niestandardowym JavaScriptem, spowoduje to, że wbudowany wyzwalacz GTM nie będzie działać z formularzem.

To właśnie tam będziesz musiał dodać wywołanie JavaScript, aby powiadomić warstwę danych GTM, że [zdarzenie] miało miejsce. To podejście jest zresztą proste, ponieważ trzeba je wykonać tylko raz, więc wszelkie przyszłe [zdarzenia], które chcesz dodać, można łatwo zrobić w samym GTM. JavaScript będzie wyglądał mniej więcej tak:

dataLayer.push({'event' : '[formularzWyslany]', 'formName' : 'WebsiteAudit'});

Aby uzyskać instrukcje "krok po kroku" dotyczące wdrażania obu metod w GTM, zapoznaj się z przewodnikiem Click Insight.

3. Dostosowywanie [stylów] [pól] formularza lub [przycisków] [wyślij]

Zaokrąglone "elementy" formularza

Ten przykład z kanadyjskiej agencji cyfrowej Reach First jest doskonałym przykładem na to, jak kilka linii CSS może być użyte do [modyfikacji] Narzędzia Audytu, aby [dopasować] wygląd i styl strony internetowej. W tym przypadku stosują zaokrąglanie na wszystkich innych polach wejściowych i przyciskach na całej stronie:

Oto możemy zobaczyć, że atrybut "border-radius: 50px;" jest używany do uzyskania efektu zaokrąglenia na polu wprowadzania tekstu w Narzędziu Audytu. Zauważ, że atrybut [padding] po prawej stronie jest ustawiony na 160px, aby zapewnić wystarczający odstęp między obszarem wprowadzania a przyciskiem "Sprawdź". To zapobiega nakładaniu się wpisanego tekstu na przycisk.

Dla samego przycisku, tylko atrybuty "border-top-right-radius" i "border-bottom-right-radius" zostały ustawione na 50px, aby uzyskać spójny efekt między polem wejściowym a przyciskiem:

"Rozmiar i pozycjonowanie elementów formularza"

Australijska agencja doradztwa w zakresie marketingu cyfrowego, Stepps zintegrowała narzędzie audytu bardzo dobrze na osobnej stronie docelowej "Website Analyser" używając zmiennych szerokości dla 3 pól formularza i przenosząc przycisk do jego własnego wiersza o pełnej szerokości:

Szerokości elementów formularza są względne w oparciu o kontener div, w którym się znajdują. Aby to osiągnąć, szerokość jest ustawiona na procent w CSS. Dla pola "Wprowadź swoją stronę internetową", możemy zobaczyć, że to pole ma szerokość 25%:

Podczas gdy pola "Imię" i "Email" są mniejsze, każde o szerokości 15%:

Wreszcie przycisk "Generuj Mój Raport" ma szerokość o 1px większą niż suma pól wejściowych: 25 + 15 + 15 = 56%

Te przykłady pokazują, jak elastyczne i łatwe jest aktualizowanie CSS [Narzędzia Audytu], aby dopasować go do wyglądu i stylu strony internetowej Twojej agencji. Jeśli napotkasz jakiekolwiek problemy podczas instalacji [Narzędzia Audytu], sprawdź również nasz pełny przewodnik!