Teknisk Marknadsföring, Tjäna pengar på dina Bloggar och Prylar

Avancerad anpassning av inbäddade formulär (med HTML och CSS)

Avancerad anpassning av inbäddade formulär (med HTML och CSS)

Det inbäddningsbara granskningsverktyget har utformats för att vara enkelt och lätt att redigera. Vi komprimerar eller fördunklar inte inbäddningskoden med avsikt som andra verktyg från tredje part gör, vilket uttryckligen hindrar dig från att anpassa koden. Istället exponerar vi all CSS i ett enkelt kodblock ovanför HTML-inbäddningskoden så att du kan formatera formobjekt så länge du har lite grundläggande CSS-kunskaper.

Allt som krävs är att lägga till några rader CSS i de relevanta avsnitten för att anpassa utseendet och känslan helt. Om du har mellanliggande HTML-kunskaper kan du ändra själva formulärstrukturen. Du kan också lägga till dina egna JavaScript-funktioner (t.ex. extra formulärvalidering) eller så kan du anropa andra funktioner/system påSubmit eller onClick i formuläret.

Den enda anpassningsrekommendationen vi har är att inte göra några ändringar i JavaScript-kodblocket eftersom det kan orsaka fel. Relaterat till detta föreslår vi att du inte flyttar runt formulärelement för mycket från deras ursprungliga ordning eftersom vissa JavaScript-referenser är beroende av den relativa placeringen av objekt i formuläret. Förutom detta rekommenderar vi starkt och uppmuntrar dig att anpassa formuläret så att det matchar din webbplats utseende och känsla. Det ska kännas som en naturlig del av din webbplatsupplevelse och inte kännas som en fast widget. Vi föreslår detta eftersom vi ser byråer uppnå högre nivåer av leadgenerering när de anpassar formuläret på lämpligt sätt för att matcha deras webbplatsstil.

Läsa:  SEO Outsourcing: Fördelar, risker & Hur man gör det

I den här guiden kommer vi att titta på de 3 vanligaste avancerade anpassningarna för inbäddningsformuläret:

    1. Avancerad formulärvalidering
    2. Utlösa ett Google Analytics- eller Facebook-evenemang under inlämning av formulär
    3. Anpassa formulärfältet eller skicka knappstilar

Men först, låt oss ta en titt på hur inbäddningskoden är uppbyggd:

Utforska den grundläggande HTML-inbäddningskoden

För att generera inbäddningskoden, gå till fliken Inbäddningsinställningar och tryck på knappen “Spara inställningar och generera inbäddningskod”. Nedan är ett exempel på baskoden. Du kommer att märka att det första avsnittet är CSS, följt av HTML och slutligen JavaScript. Du bör anpassa de två första avsnitten och lämna JavaScript som det är. Som föreslås i kommentaren på andra raden kan du flytta CSS-sektionen till din CSS-fil så att allt hanteras på ett ställe centralt.

1. Avancerad formulärvalidering

Ahrefs Embed Form har enkel formulärvalidering inbyggd som standard. Vid sändning kontrollerar JavaScript alla formulärfält för giltig inmatning och i händelse av ogiltig inmatning utlöser den ett JavaScript-varningsmeddelande i webbläsaren enligt följande:

De två mest populära alternativen för att lägga till robust validering till Embed Form är begränsningsvalidering och realtidsvalidering:

Begränsningsvalidering

Kolla CSS-Tricks guide på begränsningsvalidering som använder kontextuella meddelanden på eller runt formulärfältet när det hamnar i fokus. Denna metod föregriper användaren och vägleder dem mot att följa det förväntade inmatningsformatet eller i exemplet nedan, åtminstone att ange något i fältet:

Realtidsvalidering

CSS-Tricks har också en bra guide på realtidsvalidering som ger användaren validering i fält när de skriver. Detta kan vara så enkelt som ikonografi för att indikera korrekt inmatning på formuläret:

2. Aktivera ett Google Analytics- eller Facebook-evenemang under inlämning av formulär

Att aktivera spårningshändelser som GA eller Facebook för målmätning eller ominriktning är ett utmärkt sätt att utnyttja trafiken med hjälp av ditt inbäddningsformulär. Det bästa sättet att göra detta är med ett Tag Manager-verktyg som Googles eget Taggstyrning (GTM). På så sätt kan du installera GTM som en tom behållare på din webbplats och sedan hantera alla taggar och pixlar från själva GTM utan att behöva gräva i koden varje gång.

Läsa:  Hur franska dörrkylskåp förbättrar kökets effektivitet och estetik

Det finns två sätt som GTM kan aktivera händelser när ett formulär skickas på din webbplats:

  • Att använda den inbyggda formulärutlösaren när formuläret är Skicka in händelse inträffar
  • Förlitar sig på en beställnings- Händelse (rad av JavaScript) som måste läggas till GTM:s datalager

För de flesta användare är det första alternativet det bästa eftersom det är lättast att implementera och fungerar bra. Ahrefs Embed Form använder en standard HTML Skicka in åtgärd när användaren slutför det, så länge du inte ändrar hur formuläret skickar data, så är GTM:s inbyggda trigger rätt väg att gå.

Du måste skapa en ny utlösare i GTM baserat på “Formulärinlämning”:

Se också till att du aktiverar GTM:s inbyggda “Form ID”-variabel. Denna variabel kommer att identifiera inbäddningsformulärets ID från formulärtaggen i HTML.

Om du i slutändan tar bort inbäddningsformulärets inlämningsåtgärd och ersätter den med anpassad JavaScript kommer detta att göra att GTM:s inbyggda trigger inte fungerar med formuläret. Det är där du måste lägga till ett JavaScript-anrop för att meddela GTM:s datalager att en händelse har ägt rum. Det här tillvägagångssättet är hur enkelt som helst eftersom det bara behöver göras en gång så alla framtida händelser du vill lägga till kan enkelt göras i själva GTM. JavaScript kommer att se ut ungefär så här:

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

För steg för steg instruktioner om hur du implementerar båda metoderna i GTM, se Klicka på Insights guide.

3. Anpassa formulärfältet eller skicka knappstilar

Rundade formelement

Detta exempel från den kanadensiska digitala byrån, Nå först är ett bra exempel på hur några rader CSS kan användas för att modifiera revisionsverktyget så att det matchar utseendet och känslan på webbplatsen. I det här fallet använder de avrundning på alla andra inmatnings- och knappfält på hela webbplatsen:

Läsa:  Microsoft Office 2016 produktnyckel 2024 uppdaterad

Här kan vi se “border-radius: 50px;” attribut används för att uppnå avrundningseffekten på textinmatningsfältet i granskningsverktyget. Lägg märke till att utfyllnadsattributet för höger sida är inställt på 160px för att ge tillräcklig utfyllnad mellan inmatningsområdet och “Kontrollera”-knappen. Detta förhindrar inskriven text från att läggas ovanpå knappen.

För själva knappen har bara attributen “border-top-right-radius” och “border-bottom-right-radius” ställts in på 50px för att uppnå den sammanhängande effekten mellan inmatningsfältet och knappen:

Formelementets storlek och placering

Australiensisk digital marknadsföringskonsult, Stepps har integrerat revisionsverktyget mycket snyggt i en separat “Website Analyser”-målsida genom att använda variabla bredder på de 3 formulärfälten och flytta ner knappen till sin egen fullbreddsrad:

Formulärelementens bredd är relativa baserat på div-behållaren de finns i. För att uppnå detta sätts bredden till en procentsats i CSS. För fältet “Ange din webbplats” kan vi se att detta fält har en bredd på 25 %:

Medan fälten Förnamn och E-post är mindre med en bredd på 15 % vardera:

Slutligen har knappen “Generera min rapport” en bredd som är 1px bredare än summan av inmatningsfälten: 25 + 15 + 15 = 56%

Dessa exempel visar hur flexibelt och enkelt det är att uppdatera revisionsverktygets CSS för att matcha utseendet och känslan på din byrås webbplats. Om du stöter på några problem när du installerar revisionsverktyget, se vår fullständiga guide också!