Avanceret tilpasning af integrerede formularer (med HTML og CSS)

Det indlejrelige auditværktøj er designet til at være enkelt og let redigerbart. Vi komprimerer eller obfuskere bevidst ikke indlejringskoden som andre 3. parts værktøjer gør, hvilket eksplicit forhindrer dig i at tilpasse koden.

I stedet viser vi al CSS i en simpel kodeblok ovenfor HTML-embedkoden, så du kan style formobjekter, så længe du har noget grundlæggende CSS-kendskab.

Alt det kræver er at tilføje et par linjer CSS i de relevante sektioner for at tilpasse udseendet og følelsen fuldstændigt. Hvis du har mellemliggende HTML-kundskaber, kan du ændre formularstrukturen selv.

Du kan også tilføje dine egne JavaScript-funktioner (f.eks.: ekstra formularvalidering) eller du kan kalde andre funktioner / systemer onSubmit eller onClick inden for formularen.

Den eneste tilpasningsanbefaling, vi har, er ikke at foretage nogen ændringer i JavaScript-kodeblokken, da det kan forårsage fejl. I forbindelse med dette foreslår vi, at du ikke flytter formelementer for meget rundt fra deres oprindelige rækkefølge, da nogle JavaScript-referencer er afhængige af den relative placering af objekter i formen.

Udover dette anbefaler og opfordrer vi stærkt til, at du tilpasser formularen, så den matcher dit websites udseende og følelse. Det skal føles som en naturlig del af din site-oplevelse og ikke som en påsat widget.

Som denne indlejrede formular fra Digital Butter:

Vi foreslår dette, fordi vi ser bureauer opnå højere niveauer af "lead generation", når de tilpasser formularen passende til at matche deres hjemmeside stil.

I denne guide vil vi se på de 3 mest almindelige avancerede tilpasninger for Embed Form:

1. 1. "Avanceret" [form] "validering"
   2. "Udløsning" af en Google Analytics eller Facebook "hændelse" under [form] "indsendelse"
   3. "Tilpasning" af [form] "feltet" eller "indsende"-knap "stile"

Men først, lad os tage et kig på, hvordan [embed-koden] er struktureret:

Udforske [den] Basis HTML [indlejringskode]

For at generere indlejringskoden, gå til fanen Embedding Settings og tryk på knappen "Gem indstillinger & generer indlejringskode". Nedenfor er et eksempel på basis koden.

Du vil bemærke, at den første sektion er CSS, efterfulgt af HTML og til sidst JavaScript. Du bør tilpasse de første to sektioner og lade JavaScript være som det er. Som foreslået i kommentaren på 2. linje, kan du flytte CSS-sektionen ind i din CSS-fil, så det hele styres ét sted centralt.

1. Avanceret formularvalidering

"SEOptimer Embed Form" har en simpel formularvalidering indbygget som standard. Ved [afsendelse], kontrollerer JavaScript alle formularfelter for gyldigt input, og i tilfælde af ugyldigt input udløser det en JavaScript-advarselsmeddelelse i browseren som følgende:

De to mest populære alternativer til at tilføje robust validering til Embed Form er begrænsningsvalidering og realtidsvalidering:

Begrænsningsvalidering

Tjek CSS-Tricks guide om begrænsningsvalidering, som bruger kontekstuel beskedgivning på eller omkring formularfeltet, når det kommer i fokus. Denne metode foregriber brugeren og guider dem mod at overholde det forventede inputformat eller i eksemplet nedenfor, i det mindste indtaste noget i feltet:

Validering i "real-tid"

CSS-Tricks har også en fantastisk guide om real-time validering, som giver brugeren validering i feltet, mens de skriver. Dette kan være så simpelt som ikonografi til at indikere korrekt input på formularen:

2. Udløsning af en Google Analytics eller Facebook-begivenhed under formularindsendelse

At fyre tracking-hændelser som GA eller Facebook for "målmåling" eller "retargeting" er en fantastisk måde at udnytte trafikken ved hjælp af din Embed Form. Den bedste måde at gøre dette på er med et Tag Manager-værktøj som Googles egen Tag Manager (GTM).

På den måde kan du installere GTM som en tom container på din hjemmeside og derefter administrere alle "tags" og "pixels" fra GTM selv uden at skulle rode med koden hver gang.

Der er to måder, GTM kan udløse begivenheder ved indsendelse af en formular på din hjemmeside:

• Brug af den indbyggede formularudløser, når formularens [indsende] begivenhed opstår
• Afhængig af en [tilpasset] begivenhed (linje af JavaScript), som skal tilføjes til GTM's datalag

For de fleste brugere er den første mulighed den bedste, da "den" er nemmest at implementere og fungerer godt. SEOptimer Embed Form bruger en standard HTML submit-handling, når brugeren fuldfører "den", så længe du ikke ændrer den måde, formularen indsender data på, er GTM's indbyggede udløser vejen frem.

Du skal oprette en ny Trigger i GTM baseret på "Formularindsendelse":

Sørg også for at aktivere GTM's indbyggede "Formular ID"-variabel. Denne variabel vil identificere Embed-formularens ID fra formular-tagget i HTML-koden.

Hvis du ender med at fjerne Embed Form's [send] handling og erstatte den med [tilpasset] JavaScript, vil dette få GTM's indbyggede [udløser] til ikke at fungere med formularen.

Det er her, du skal tilføje et JavaScript-kald for at underrette GTM's datalag om, at en begivenhed har fundet sted. Denne tilgang er alligevel ligetil, da det kun skal gøres én gang, så eventuelle fremtidige begivenheder, du ønsker at tilføje, nemt kan gøres i GTM selv. JavaScripten vil se ud nogenlunde sådan her:

dataLayer.push({'event' : '"formularIndsendt"', 'formName' : '"WebsiteAudit"'});

For "trin for trin" [instructions] om [implementering] af begge [metoder] i GTM henvises til Click Insight's guide.

3. Tilpasning af [Form Field] eller [Submit Button Styles]

Afrundede form [elementer]

Dette eksempel fra det canadiske digitale bureau Reach First er et godt eksempel på, hvordan nogle få linjer CSS kan bruges til at ændre [Audit-værktøjet] så det matcher webstedets udseende og fornemmelse. I dette tilfælde bruger de afrunding på alle andre input- og knapfelter på hele siden:

Her kan vi se, at attributten "border-radius: 50px;" bruges til at opnå afrundingseffekten på tekstindgangsfeltet i Audit Tool. Bemærk, at højre-side polstringsattributten er sat til 160px for at give tilstrækkelig polstring mellem indtastningsområdet og "Tjek"-knappen. Dette forhindrer, at indtastet tekst overlapper knappen.

For selve knappen er kun attributterne "border-top-right-radius" og "border-bottom-right-radius" blevet sat til 50px for at opnå den sammenhængende effekt mellem inputfeltet og knappen:

Formularelements "størrelse" og "positionering"

Australsk digital marketingkonsulentvirksomhed, Stepps har integreret [Audit Tool] meget pænt i en separat "Website Analyser" destinationsside ved at bruge variable bredder på de 3 formularfelter og flytte knappen ned til sin egen fuldbredde række:

Formularelementernes bredder er relative baseret på den div-beholder, de er indeholdt i. For at opnå dette er bredden sat til en procentdel i CSS. For feltet "Indtast din hjemmeside" kan vi se, at dette felt har en bredde på 25%:

Mens felterne for "Fornavn" og "E-mail" er mindre med en bredde på 15% hver:

Endelig er knappen "Generer Min Rapport" 1px bredere end summen af inputfelterne: 25 + 15 + 15 = 56%

Disse eksempler viser, hvor fleksibelt og nemt det er at opdatere Audit Tool CSS for at matche udseendet og følelsen af din agencys hjemmeside. Hvis du støder på problemer under installationen af Audit Tool, så tjek også vores fulde guide!