Personnalisation Avancée de Formulaire Intégré (avec HTML et CSS)

Le Embeddable Audit Tool a été conçu pour être simple et facilement modifiable. Nous ne compressons ni n'obfusquons délibérément le code d'intégration comme le font d'autres outils tiers qui vous empêchent explicitement de personnaliser le code.

Au lieu de cela, nous exposons tout le CSS dans un simple bloc de code au-dessus du code d'intégration HTML afin que vous puissiez styliser les objets du formulaire tant que vous avez quelques connaissances de base en CSS.

Tout ce qu'il faut, c'est ajouter quelques lignes de CSS dans les sections pertinentes pour personnaliser entièrement l'apparence et la convivialité. Si vous avez des connaissances intermédiaires en HTML, vous pouvez modifier la structure du formulaire elle-même.

Vous pouvez également ajouter vos propres fonctions JavaScript (par exemple : validation supplémentaire du formulaire) ou vous pouvez appeler d'autres fonctions / systèmes surSubmit ou surClick dans le formulaire.

La seule recommandation de personnalisation que nous avons est de ne pas apporter de modifications au bloc de code JavaScript, car cela peut entraîner des erreurs. À ce sujet, nous vous suggérons de ne pas déplacer les éléments du formulaire trop loin de leur ordre d'origine, car certaines références JavaScript dépendent du positionnement relatif des objets dans le formulaire.

Autre que cela, nous vous conseillons vivement et vous encourageons à personnaliser le formulaire afin qu'il corresponde à l'apparence de votre site web. Il devrait sembler être une partie naturelle de l'expérience de votre site et ne pas ressembler à un gadget ajouté.

Comme ce formulaire intégré de Digital Butter :

Nous suggérons cela parce que nous voyons les agences atteindre des niveaux plus élevés de "génération de prospects" lorsqu'elles personnalisent le formulaire de manière appropriée pour correspondre au style de leur site web.

Dans ce guide, nous examinerons les 3 personnalisations avancées les plus courantes pour le "Formulaire d'intégration" :

1. 1. "Validation" avancée des "formulaires"
   2. Lancement d'un événement Google Analytics ou Facebook lors de la soumission du "formulaire"
   3. Personnalisation des styles de champ de "formulaire" ou de bouton d'envoi

Mais d'abord, examinons comment le code d'intégration est structuré :

Exploration du code d'intégration HTML de base

Pour générer le code d'intégration, allez à l'onglet Embedding Settings et appuyez sur le bouton "Save Settings & Generate Embed Code". Ci-dessous un exemple du code de base.

Vous remarquerez que la première section est CSS, suivie par HTML et enfin JavaScript. Vous devriez personnaliser les deux premières sections et laisser le JavaScript tel quel. Comme il est suggéré dans le commentaire de la 2ème ligne, vous pouvez déplacer la section CSS dans votre fichier CSS afin qu'elle soit gérée en un seul endroit de manière centrale.

1. Validation de formulaire avancée

Le formulaire d'intégration SEOptimer dispose d'une validation de formulaire simple intégrée par défaut. Lors de la soumission, le JavaScript vérifie tous les champs du formulaire pour [valid input] et en cas de [invalid input], il déclenche un message d'alerte JavaScript dans le navigateur comme suit :

Les deux alternatives les plus populaires pour ajouter une validation robuste au Formulaire Intégré sont la "validation de contrainte" et la "validation en temps réel" :

Validation des "contraintes"

Consultez le guide de CSS-Tricks sur la validation des contraintes qui utilise des messages contextuels sur ou autour du champ de formulaire lorsqu'il est mis au point. Cette méthode anticipe l'utilisateur et le guide vers le respect du format d'entrée attendu ou, dans l'exemple ci-dessous, au moins entrer quelque chose dans le champ :

Validation en "temps réel"

CSS-Tricks a également un excellent guide sur la validation en temps réel qui fournit une validation dans le champ à l'utilisateur au fur et à mesure qu'il tape. Cela peut être aussi simple que de l'iconographie pour indiquer une [entrée] correcte dans le formulaire :

2. Déclencher un événement Google Analytics ou Facebook lors de la soumission du formulaire

Déclencher des événements de suivi comme GA ou Facebook pour la "mesure des objectifs" ou le "retargeting" est un excellent moyen de tirer parti du trafic en utilisant votre Formulaire Intégré. La meilleure façon de le faire est d'utiliser un outil de gestion des balises comme Tag Manager (GTM) de Google.

De cette façon, vous pouvez installer GTM comme un conteneur vide sur votre site web et ensuite gérer toutes les "balises" et "pixels" depuis GTM lui-même sans avoir besoin de plonger dans le code à chaque fois.

Il existe deux façons dont GTM peut déclencher des événements lors de la soumission d'un formulaire sur votre site web :

• Utiliser le déclencheur de formulaire intégré lorsque l'événement submit du formulaire se produit
• S'appuyer sur un événement custom (ligne de JavaScript) qui doit être ajouté à la couche de données de GTM

Pour la plupart des utilisateurs, la première option est la meilleure car c'est la plus facile à mettre en œuvre et fonctionne bien. Le formulaire d'intégration SEOptimer utilise une action HTML standard submit lorsque l'utilisateur le complète, donc tant que vous ne changez pas la façon dont le formulaire soumet les données, alors le déclencheur intégré de GTM est la voie à suivre.

Vous devrez créer un nouveau Déclencheur dans GTM basé sur "Envoi de formulaire" :

Assurez-vous également d'activer la variable intégrée "Form ID" de GTM. Cette variable identifiera l'ID du formulaire intégré à partir de la balise de formulaire dans le HTML.

Si vous finissez par supprimer l'action de soumission du formulaire d'intégration et la remplacer par du JavaScript personnalisé, cela entraînera le dysfonctionnement du déclencheur intégré de GTM avec le formulaire.

C'est là que vous devrez ajouter un appel JavaScript pour notifier la couche de données de GTM qu'un événement a eu lieu. Cette approche est de toute façon simple car elle ne doit être effectuée qu'une seule fois, donc tout événement futur que vous souhaitez ajouter peut être facilement fait dans GTM lui-même. Le JavaScript ressemblera à ceci :

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

Pour des instructions "étape par étape" sur la mise en œuvre des deux méthodes dans GTM, consultez le guide de Click Insight.

3. Personnalisation des styles du champ de formulaire ou du bouton [Submit]

Éléments de formulaire arrondis

Cet exemple de l'agence numérique canadienne Reach First est un excellent exemple de la façon dont quelques lignes de CSS peuvent être utilisées pour modifier l'Outil d'Audit afin de correspondre à l'apparence du site web. Dans ce cas, ils utilisent l'arrondissement sur tous les autres champs de saisie et boutons à travers le site :

Nous pouvons voir ici que l'attribut "border-radius: 50px;" est utilisé pour obtenir l'effet d'arrondi sur le champ de saisie de texte de l'Audit Tool. Remarquez que l'attribut de remplissage du côté droit est réglé à 160px pour fournir un remplissage suffisant entre la zone de saisie et le bouton "Vérifier". Cela empêche le texte saisi de se superposer au-dessus du bouton.

Pour le bouton lui-même, seuls les attributs "border-top-right-radius" et "border-bottom-right-radius" ont été définis à 50px pour obtenir l'effet cohésif entre le champ de saisie et le bouton :

Dimensionnement et positionnement des éléments de "formulaire"

Le cabinet de conseil australien en marketing numérique, Stepps a intégré très habilement l'Outil d'Audit dans une page de destination distincte "Website Analyser" en utilisant des largeurs variables sur les 3 champs du formulaire et en déplaçant le bouton vers sa propre ligne pleine largeur :

Les largeurs des éléments de formulaire sont relatives en fonction du conteneur div dans lequel ils se trouvent. Pour réaliser cela, la largeur est définie en pourcentage dans le CSS. Pour le champ "Entrez votre site web", nous pouvons voir que ce champ a une largeur de 25% :

Alors que les champs "First Name" et "Email" sont plus petits avec une largeur de 15% chacun :

Enfin, le bouton "Générer Mon Rapport" a une largeur de 1px plus large que la somme des champs de saisie : 25 + 15 + 15 = 56%

Ces exemples montrent à quel point il est flexible et facile de mettre à jour le CSS de l'outil d'audit pour correspondre à l'apparence et à la convivialité du site Web de votre agence. Si vous rencontrez des problèmes lors de l'installation de l'outil d'audit, consultez également notre guide complet !