Geavanceerde aanpassing van ingesloten formulieren (met HTML en CSS)

De Embeddable Audit Tool is ontworpen om eenvoudig en gemakkelijk bewerkbaar te zijn. We "comprimeren" of "verduisteren" opzettelijk de inbedcode niet zoals andere tools van derden doen die expliciet voorkomen dat je de code aanpast.

In plaats daarvan tonen we alle CSS in een eenvoudig codeblok boven de HTML-inbedcode, zodat je formulierobjecten kunt stylen zolang je enige basiskennis van CSS hebt.

Alles wat nodig is, is een paar regels CSS toevoegen in de relevante secties om het uiterlijk en gevoel volledig aan te passen. Als je over gemiddelde HTML-kennis beschikt, kun je de structuur van het formulier zelf aanpassen.

Je kunt ook je eigen JavaScript-functies toevoegen (bijv.: extra [formulier]validatie) of je kunt andere functies / systemen aanroepen bij [onSubmit] of [onClick] binnen het formulier.

De enige aanpassing die we aanbevelen is om geen wijzigingen aan te brengen in het JavaScript-codeblok, aangezien dit fouten kan veroorzaken. In verband hiermee raden we aan om formulier elementen niet te veel van hun oorspronkelijke volgorde te verplaatsen, aangezien sommige JavaScript-verwijzingen afhankelijk zijn van de relatieve positionering van objecten in het formulier.

Afgezien hiervan raden we u sterk aan en moedigen we u aan om het formulier aan te passen zodat het overeenkomt met de uitstraling van uw website. Het moet aanvoelen als een natuurlijk onderdeel van de ervaring op uw site en niet als een aangeplakt [widget].

Zoals dit insluitformulier van Digital Butter:

We [stellen] dit voor omdat we [zien] dat bureaus hogere niveaus van leadgeneratie bereiken wanneer ze het formulier op de juiste manier aanpassen aan de stijl van hun website.

In deze gids bekijken we de 3 meest voorkomende geavanceerde aanpassingen voor het Embed Formulier:

1. 1. "Geavanceerde" formulier "validatie"
   2. Een Google Analytics of Facebook [gebeurtenis] activeren tijdens formulier [indiening]
   3. De formulier[veld]- of verzendknopstijlen [aanpassen]

Maar eerst, laten we eens kijken naar hoe de [insluitcode] is gestructureerd:

Het Verkennen van de Basis HTML Embed Code

Om de embedcode te genereren, ga naar het tabblad Embedding Settings en klik op de knop "Instellingen opslaan & Embedcode genereren". Hieronder staat een voorbeeld van de basiscodes.

Je zult merken dat het eerste gedeelte CSS is, gevolgd door HTML en tenslotte JavaScript. Je zou de eerste twee gedeelten moeten aanpassen en het JavaScript laten zoals het is. Zoals gesuggereerd in de opmerking op de tweede regel, kun je het CSS-gedeelte naar je CSS-bestand verplaatsen, zodat alles centraal op één plek wordt beheerd.

1. Geavanceerde Formulier Validatie

Het SEOptimer Embed Form heeft standaard eenvoudige formulier validatie ingebouwd. Bij OnSubmit controleert de JavaScript alle formuliervelden op geldige invoer en in het geval er ongeldige invoer is, activeert het een JavaScript waarschuwingsbericht in de browser zoals het volgende:

De twee meest populaire alternatieven voor het toevoegen van robuuste validatie aan het Embed Form zijn [beperkingsvalidatie] en [real-time validatie]:

Beperkingsvalidatie

Bekijk de CSS-Tricks gids over beperkingsvalidatie die gebruikmaakt van contextuele berichten op of rond het formulier veld wanneer het in focus komt. Deze methode voorkomt problemen door de gebruiker te begeleiden naar het naleven van het verwachte invoerformaat of, in het onderstaande voorbeeld, ten minste iets in te voeren in het veld:

Validatie in "real-time"

CSS-Tricks heeft ook een geweldige gids over [real-time validatie] die in-veld validatie aan de gebruiker biedt terwijl ze typen. Dit kan zo eenvoudig zijn als iconografie om correcte invoer op het formulier aan te geven:

2. Een Google Analytics- of Facebook-gebeurtenis activeren tijdens het indienen van een formulier

Het afvuren van tracking events zoals GA of Facebook voor doelmeting of retargeting is een geweldige manier om het verkeer te benutten met behulp van uw Embed Formulier. De beste manier om dit te doen is met een Tag Manager-tool zoals Google's eigen Tag Manager (GTM).

Op die manier kun je GTM als een lege container op je website installeren en vervolgens alle tags en pixels vanuit GTM zelf beheren zonder elke keer in de code te hoeven duiken.

Er zijn twee manieren waarop GTM gebeurtenissen kan activeren bij het indienen van een formulier op uw website:

• Gebruikmakend van de ingebouwde formuliertrigger wanneer het verzenden-evenement van het formulier plaatsvindt
• Vertrouwen op een aangepast Event (regel JavaScript) die aan de gegevenslaag van GTM moet worden toegevoegd

Voor de meeste gebruikers is de eerste optie de beste, omdat deze het gemakkelijkst te implementeren is en goed werkt. Het SEOptimer Embed Form gebruikt een standaard HTML-submit-actie wanneer de gebruiker het voltooit, dus zolang je de manier waarop het formulier gegevens indient niet verandert, is de ingebouwde trigger van GTM [de] manier om te gaan.

U moet een nieuwe Trigger in GTM maken op basis van "Formulierinzending":

Zorg er ook voor dat je de ingebouwde variabele "Formulier-ID" van GTM inschakelt. Deze variabele zal de ID van het Insluitformulier identificeren uit de formuliertag in de HTML.

Als je uiteindelijk de verzendactie van het Embed Formulier verwijdert en vervangt door aangepaste JavaScript, zal dit ervoor zorgen dat de ingebouwde trigger van GTM niet werkt met het formulier.

Daar moet je een JavaScript-aanroep toevoegen om de gegevenslaag van GTM op de hoogte te stellen dat er een evenement heeft plaatsgevonden. Deze aanpak is sowieso eenvoudig, omdat het maar één keer hoeft te worden gedaan, zodat eventuele toekomstige evenementen die je wilt toevoegen gemakkelijk in GTM zelf kunnen worden gedaan. De JavaScript zal er ongeveer zo uitzien:

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

Voor stapsgewijze instructies voor het implementeren van beide methoden in GTM, raadpleeg de gids van Click Insight.

3. Aanpassen van de stijlen van het formulier veld of verzendknop

Afgeronde "form" elementen

Dit voorbeeld van het Canadese digitale bureau Reach First is een goed voorbeeld van hoe een paar regels CSS kunnen worden gebruikt om de Audit Tool aan te passen aan de [uitstraling] van de website. In dit geval gebruiken ze afronding op alle andere invoer- en knopvelden op de site:

Hier zien we dat het attribuut "border-radius: 50px;" wordt gebruikt om het afrondingseffect op het tekstinvoerveld van de Audit Tool te bereiken. Let op dat de padding-attribuut aan de rechterkant is ingesteld op 160px om voldoende ruimte te bieden tussen het invoergebied en de "Check"-knop. Dit voorkomt dat ingevoerde tekst over de knop heen ligt.

Voor de knop zelf zijn alleen de attributen "border-top-right-radius" en "border-bottom-right-radius" ingesteld op 50px om het samenhangende effect tussen het invoerveld en de knop te bereiken:

[Formulier] [elementgrootte] en [positionering]

Het Australische digitale marketingadviesbureau, Stepps heeft de Audit Tool zeer goed geïntegreerd in een aparte "Website Analyser" bestemmingspagina door variabele breedtes te gebruiken op de 3 formulier velden en de knop naar beneden te verplaatsen naar zijn eigen volledige breedte rij:

De breedtes van de formulierelementen zijn relatief op basis van de div-container waarin ze zich bevinden. Om dit te bereiken, wordt de breedte in het CSS op een percentage ingesteld. Voor het veld "Voer uw website in", kunnen we zien dat dit veld een breedte van 25% heeft:

Terwijl de velden "Voornaam" en "E-mail" kleiner zijn met een breedte van elk 15%:

Eindelijk is de knop "Mijn rapport genereren" 1px breder dan de som van de invoervelden: 25 + 15 + 15 = 56%

Deze voorbeelden laten zien hoe flexibel en eenvoudig het is om de Audit Tool CSS bij te werken om aan te sluiten bij de "look and feel" van de website van je [agentschap]. Als je problemen ondervindt tijdens het installeren van de Audit Tool, bekijk dan ook onze volledige gids!