Pokročilé přizpůsobení formuláře pro vložení (s HTML a CSS)

Nástroj Embeddable Audit Tool byl navržen tak, aby byl jednoduchý a snadno upravitelný. Záměrně nekomprimujeme ani nezakrýváme kód pro vložení, jako to dělají jiné nástroje třetích stran, které vám výslovně brání v přizpůsobení kódu. Místo toho vystavujeme všechny CSS v jednoduchém bloku kódu nad kódem pro vložení HTML, takže můžete stylovat objekty formuláře, pokud máte nějaké základní znalosti CSS.

Vše, co potřebujete, je přidat několik řádků CSS do příslušných sekcí, abyste zcela přizpůsobili vzhled a dojem. Pokud máte středně pokročilé znalosti HTML, můžete upravit samotnou strukturu formuláře. Můžete také přidat své vlastní JavaScriptové funkce (např.: extra validaci formuláře) nebo můžete ve formuláři volat další funkce / systémy onSubmit nebo onClick.

Jediné doporučení pro přizpůsobení, které máme, je neprovádět žádné změny v bloku kódu JavaScript, protože to může způsobit chyby. V souvislosti s tím doporučujeme, abyste prvky formuláře příliš nepřesouvali z jejich původního pořadí, protože některé odkazy JavaScriptu spoléhají na relativní umístění objektů ve formuláři. Kromě toho důrazně doporučujeme a doporučujeme přizpůsobit formulář tak, aby odpovídal vzhledu a dojmu vašeho webu. Mělo by vám to připadat jako přirozená součást vašeho webu a ne jako připíchnutý widget. Doporučujeme to, protože vidíme, že agentury dosahují vyšší úrovně generování potenciálních zákazníků, když vhodně přizpůsobí formulář tak, aby odpovídal stylu jejich webu.

V této příručce se podíváme na 3 nejběžnější pokročilá přizpůsobení formuláře pro vložení:

1. 1. Pokročilé ověřování formulářů
   2. Spuštění události Google Analytics nebo Facebook během odesílání formuláře
   3. Přizpůsobení pole formuláře nebo stylů tlačítka pro odeslání

Nejprve se však podívejme, jak je strukturován kód pro vložení:

Prozkoumání základního kódu HTML pro vložení

Chcete-li vygenerovat kód pro vložení, přejděte na kartu Nastavení vkládání a stiskněte tlačítko „Uložit nastavení a vygenerovat kód pro vložení“. Níže je uveden příklad základního kódu. Všimnete si, že první částí je CSS, následuje HTML a nakonec JavaScript. Měli byste upravit první dvě sekce a nechat JavaScript tak, jak je. Jak je navrženo v komentáři na druhém řádku, můžete přesunout sekci CSS do svého souboru CSS, takže je vše spravováno centrálně na jednom místě.

1. Pokročilé ověření formuláře

Formulář pro vložení SEOptimeru má ve výchozím nastavení integrované jednoduché ověření formuláře. Při odeslání zkontroluje JavaScript ve všech polích formuláře platný vstup a v případě neplatného vstupu spustí v prohlížeči výstražnou zprávu JavaScriptu, jako je následující:

Dvě nejoblíbenější alternativy pro přidání robustního ověření do formuláře pro vložení jsou ověření omezení a ověření v reálném čase:

Ověření omezení

Podívejte se na průvodce CSS triky ověření omezení který používá kontextové zasílání zpráv na nebo kolem pole formuláře, když se dostane do záběru. Tato metoda předjímá uživatele a vede ho k dodržení očekávaného vstupního formátu nebo v níže uvedeném příkladu alespoň zadáním něčeho do pole:

Ověření v reálném čase

CSS-Tricks má také skvělého průvodce ověřování v reálném čase který uživateli poskytuje ověření v terénu při psaní. To může být tak jednoduché jako ikonografie, která označí správné zadání ve formuláři:

2. Spuštění události Google Analytics nebo Facebook během odesílání formuláře

Spouštění sledovacích událostí, jako je GA nebo Facebook, pro měření cílů nebo retargeting je skvělý způsob, jak využít návštěvnost pomocí formuláře pro vložení. Nejlepší způsob, jak toho dosáhnout, je pomocí nástroje Správce značek, jako je vlastní Google Správce značek (GTM). Tímto způsobem můžete nainstalovat GTM jako prázdný kontejner na svůj web a poté spravovat všechny značky a pixely ze samotného GTM, aniž byste museli pokaždé kopat do kódu.

Existují dva způsoby, jak může GTM spouštět události při odeslání formuláře na vašem webu:

• Použití vestavěného spouštěče formuláře, když je formulář Předložit dojde k události
• Spoléhat se na a Zvyk Událost (řádek JavaScriptu), kterou je třeba přidat do datové vrstvy Správce značek Google

Pro většinu uživatelů je první možnost nejlepší, protože je nejjednodušší implementovat a funguje dobře. Formulář pro vložení SEOptimeru používá standardní HTML Předložit Pokud nezměníte způsob, jakým formulář odesílá data, pak vestavěný spouštěč GTM je správnou volbou.

Budete muset vytvořit nový spouštěč v GTM na základě „Odeslání formuláře“:

Ujistěte se také, že jste povolili vestavěnou proměnnou „ID formuláře“ Správce značek Google. Tato proměnná identifikuje ID formuláře pro vložení ze značky formuláře v HTML.

Pokud odeberete akci odeslání formuláře pro vložení a nahradíte ji vlastním JavaScriptem, způsobí to, že vestavěný spouštěč GTM nebude s formulářem fungovat. Zde budete muset přidat volání JavaScriptu, aby bylo datové vrstvě GTM oznámeno, že došlo k události. Tento přístup je každopádně přímočarý, protože jej stačí provést pouze jednou, takže jakékoli budoucí události, které chcete přidat, lze snadno provést v samotném GTM. JavaScript bude vypadat nějak takto:

dataLayer.push({‘event’ : ‘formSubmitted’, ‘formName’ : ‘WebsiteAudit’});

Pokyny krok za krokem k implementaci obou metod v GTM naleznete na Klikněte na Průvodce statistikami.

3. Přizpůsobení stylů pole formuláře nebo tlačítka odeslání

Zaoblené tvarové prvky

Tento příklad od kanadské digitální agentury, Reach First je skvělým příkladem toho, jak lze pomocí několika řádků CSS upravit nástroj pro audit tak, aby odpovídal vzhledu a chování webu. V tomto případě používají zaokrouhlování na všech ostatních vstupních a tlačítkových polích na celém webu:

Zde můžeme vidět “poloměr okraje: 50px;” Atribut se používá k dosažení efektu zaokrouhlení na textovém vstupním poli nástroje auditu. Všimněte si, že atribut odsazení na pravé straně je nastaven na 160 pixelů, aby bylo zajištěno dostatečné odsazení mezi vstupní oblastí a tlačítkem „Zkontrolovat“. Tím se zabrání tomu, aby se zadaný text překrýval přes tlačítko.

U samotného tlačítka byly nastaveny pouze atributy „border-top-right-radius“ a „border-bottom-right-radius“ na 50 pixelů, aby se dosáhlo soudržného efektu mezi vstupním polem a tlačítkem:

Velikost a umístění prvků formuláře

australské poradenství v oblasti digitálního marketingu, Stepps velmi pěkně integroval Auditní nástroj do samostatné vstupní stránky „Website Analyser“ pomocí proměnných šířek na 3 polích formuláře a přesunutí tlačítka dolů na jeho vlastní řádek s plnou šířkou:

Šířky prvků formuláře jsou relativní na základě kontejneru div, ve kterém jsou obsaženy. Aby toho bylo dosaženo, je šířka v CSS nastavena na procenta. U pole „Zadejte svůj web“ vidíme, že toto pole má šířku 25 %:

Zatímco pole Jméno a E-mail jsou menší, každé o šířce 15 %:

Konečně má tlačítko „Vygenerovat můj přehled“ šířku o 1 pixel širší než součet vstupních polí: 25 + 15 + 15 = 56 %

Tyto příklady ukazují, jak flexibilní a snadné je aktualizovat CSS nástroje pro audit tak, aby odpovídal vzhledu a chování webu vaší agentury. Pokud při instalaci nástroje Audit Tool narazíte na nějaké problémy, podívejte se také do našeho úplného průvodce!