Vous devez comprendre que vous devrez payer pour un tel travail de bijoux, mais les frais en valent la peine. Il est nécessaire de discuter de toutes les questions de création, cela affectera le coût du travail et la page de destination dans son ensemble. Lors de la création, vous devez prendre en compte toutes les petites choses possibles qui peuvent attirer l'attention des gens : de la beauté à la facilité d'utilisation. De plus, il ne faut pas oublier la psychologie et le subconscient. De nombreuses décisions sont prises inconsciemment. Et l'achat d'un produit ne fait pas exception. Si vous construisez la bonne chaîne logique qui contiendra une solution au problème d'une personne, une description de cette solution, la conviction que cette solution est juste et l'aidera, la concentration sur cet objectif, la poussée pour l'action et l'action elle-même, alors vous peut transformer la plupart des visiteurs en clients. De plus, peu importe quelle sera l'action cible de la page - vente, abonnement à la newsletter, acquisition des coordonnées du visiteur, etc.

Une attention particulière doit être portée au formulaire retour d'information avec un client. Puisqu'il s'agit d'une communication avec le client, bien que non directe. La communication avec le client est extrêmement importante, car un site Web seul ne pourra pas satisfaire pleinement les besoins du client. Il ne peut gérer que les requêtes standard, qui sont rares car les gens adoptent rarement une approche standard pour résoudre un problème. En contactant le client par le biais de commentaires, vous pouvez augmenter non seulement le chiffre d'affaires des ventes/transactions/abonnements, mais également la réputation de l'entreprise.

Parce que la communication personnelle et la satisfaction du client sont très importantes pour développer une bonne réputation. Une attention particulière a toujours été portée à la création d'un tel formulaire. L'utilisation d'un modèle sur lequel les commentaires sont définis limite considérablement la fonctionnalité de la page, car forme donnée toujours s'intégrer manuellement dans le code principal conformément à toutes les exigences SEO. Il y a aussi une approche particulière à ce formulaire : il doit être placé dans un endroit bien en vue, il doit être intuitif et facile à utiliser, il ne doit pas demander au client beaucoup d'informations inutiles, l'email et le nom suffisent. L'emplacement affecte la catégorie de personnes habituées à rechercher rapidement les informations nécessaires et à les utiliser. Pour certains, quelques secondes sur la page suffisent pour évaluer s'ils utiliseront ou non ses services. Par conséquent, l'emplacement doit être tel que même ces utilisateurs aient le temps de s'intéresser à l'offre et de laisser des contacts.

Il est très important que la page soit facile à comprendre, car tous les internautes ne sont pas expérimentés en la matière. Afin de toucher un public expérimenté et peu expérimenté, il est nécessaire d'avoir une compréhension intuitive de l'enchaînement des actions pour réaliser une opération. Et la quantité d'informations n'est pas moins importante. Cela affecte le niveau subconscient de confiance. Si la page demande beaucoup de contacts : à la fois un numéro de téléphone et e-mail, numéro de carte, adresse, etc. Vous pouvez avoir l'impression que cette page est faite par des escrocs. Et c'est un coup dur dans les tripes pour la réputation du site dans son ensemble. Par conséquent, vous devez demander exactement autant d'informations qu'il suffira pour contacter le client et clarifier ses souhaits et respecter les termes de la transaction. Une page de destination dans son ensemble est un site simple construit de manière complexe. Il est simple pour les utilisateurs, mais difficile à créer pour les développeurs. Cependant, ce travail en vaut la chandelle !

Changer l'image sur le premier écran ou "personnaliser" les prestations pour le client, mais à quoi ça sert s'il n'y a pas d'interaction avec le formulaire ?
Les statistiques montrent qu'en 20% des cas la raison de la conversion insuffisante de la page de destination ne réside pas tant dans une mauvaise USP ou un manque de trafic ciblé, mais dans une approche négligente et mal conçue remplir le formulaire de demande.
Le visiteur ne souhaite pas laisser ses coordonnées, "lâche" le formulaire et s'en va. Vous perdez des clients potentiels, et donc des revenus.
Pourquoi cela se produit-il et comment augmenter la conversion du formulaire de demande?

2 raisons d'un mauvais "remplissage" du formulaire :

• formulaire de demande incorrect
• sa fonctionnalité mal conçue

L'article prévoit liste de contrôle simple avec lequel vous pouvez facilement analyser les formulaires sur la page de destination. Pour le travail, je recommande d'utiliser 4 outils : click map, scroll map, form analytics et .

Le formulaire de candidature doit être visible sur le premier écran sans "scrolling"

Explorer faire défiler la carte. Voir s'ils frappent éléments de conversion de base dans les parties visualisées de la page. Vérifiez votre page sur des appareils avec différentes tailles d'écran. Portez une attention particulière à la version mobile !

Vérifier tous les navigateurs

Besoin de vérifier le fonctionnement du formulaire de demande dans tous les navigateurs, et ça vaut le coup de tester séparément ! Si la fonctionnalité est défectueuse, il n'y aura pas de résultat, de données pour l'analyse et de recommandations.

Le nombre de champs doit correspondre à la tâche

Fig. 2 Un exemple de champ supplémentaire qui résout le problème du client

La règle est simple - faites attention facilité de remplissage ces formulaires :

• utiliser des indices (par exemple, un "masque" pour les numéros de téléphone) ;
• permettent de soumettre le formulaire sans remplir tous les champs disponibles ;
• fixer des objectifs adéquats - par exemple, ne demandez pas un numéro de téléphone de contact sur la page d'abonnement si . Les visiteurs ne rempliront pas 5 champs juste pour obtenir une démo ou un catalogue.

Utiliser différentes manières d'obtenir des informations de contact

Commencez par les caractéristiques du produit ou de la niche. Donnez la possibilité de vous contacter par téléphone, e-mail ou chat pour une consultation. Envisager comportement de la clientèle– il est plus facile pour quelqu'un d'appeler tout de suite et de discuter des conditions, dans certains cas (obtenir un devis) vous ne pouvez pas vous passer d'interagir avec le formulaire.

Forme fermée ou ouverte ?

Lorsque nous travaillons avec des sites étrangers, nous sommes de plus en plus confrontés à un formulaire de candidature fermé - un bouton simple et compréhensible dans le style "Commencer maintenant". Mais il n'y a pas de réponse claire quant à la forme qui fonctionne le mieux. En fin de compte, tout dépend de la compétence avec laquelle vous avez construit "leader" logique au bouton chéri.

Règles de conception des champs dans une fenêtre contextuelle serons les mêmes:

• Être cohérent. Le formulaire doit être aussi simple que possible à remplir.
• Tenez-vous en à la commande. Placez les champs les plus faciles à remplir en premier (par exemple, "nom").
• Formuler un avantage clair. Expliquer pourquoi le visiteur doit-il remplir le formulaire et qu'obtiendra-t-il.

Fig. 3 Exemple d'une bonne « piste » vers un formulaire de candidature fermé

N'utilisez pas de phrases modèles !

Comme obtenir une consultation gratuite. Pensez à plusieurs options "étape facile", capable d'intéresser l'utilisateur et de le faire interagir avec le formulaire.

Un bon exemple est dans le créneau de la vente d'automobiles. Au lieu du standard "Demandez conseil pour vendre une voiture", une astuce sympa a été utilisée : le visiteur est invité à estimer immédiatement le montant qu'il peut recevoir.

Appel à une action spécifique

Éloignez-vous de l'expression « soumettre une demande ». Mieux vaut faire un bouton avec une description d'un résultat spécifique(par exemple, "obtenir un devis" ou "calculer le coût"). Idéalement, le texte du bouton devrait dupliquer partiellement "l'eye-liner".

Attirer une attention supplémentaire

Utilisation guides graphiques. L'option la plus simple consiste à "libérer" l'espace autour du formulaire et à diriger l'œil du visiteur avec un pointeur ou une flèche. Ainsi, la forme deviendra plus visible et attirera plus fortement l'attention.

Faites en sorte que l'image (bannière photo du premier écran) fonctionne pour le CTA

Dans le cas où il est impossible de souligner la forme avec des éléments graphiques ou de rendre le bouton plus grand et plus contrasté, "attirez" l'attention de l'utilisateur sur celui-ci à travers une image. Choisissez bien votre photo et diriger le regard du visiteur dans le sens que vous souhaitez.

Fig. 7 Le regard de la fille attire votre attention sur la forme

Découvrez comment les utilisateurs interagissent avec les formulaires

Analyse des formulaires de candidature montre quels champs sont remplis / non remplis par les utilisateurs. Et Webvisor, en raison de sa fonctionnalité, agit comme un "grand frère" qui surveille le comportement du visiteur. S'il y a eu une interaction avec le formulaire, mais que les données n'ont pas été envoyées pour une raison quelconque, cela vous montrera quel était le problème. En d'autres termes, cela aidera à comprendre à quelles étapes du remplissage les utilisateurs ont des difficultés, quels champs peuvent être supprimés et lesquels doivent être complétés par un indice pour un remplissage correct.

Remerciez le client c'est important

Pensez aux détails ! Page de remerciement bien conçue n'est pas seulement un signe de respect pour le client, mais aussi outil de conversion. Encore une fois, éloignez-vous des modèles ! Soyez créatif - au lieu de la phrase standard "Votre candidature a été acceptée", écrivez quelque chose de plus personnel, concernant vous et votre entreprise. Une page de remerciement, lorsqu'elle est bien faite, peut être un bon endroit pour expérimenter.

conclusion

1. L'interaction avec le formulaire est le point culminant de la communication entre la page de destination et le client. Avant de tester les éléments de conversion de votre landing page, analysez vos formulaires CTA en vous référant à notre liste de contrôle.
2. Vérifiez l'envoi de données à partir de différents appareils et différents navigateurs. Les bogues locaux des versions individuelles se produisent beaucoup plus souvent que vous ne le pensez.
3. Obligatoire faire des analyses de formulaire afin d'identifier les champs d'où partent les clients, afin de comprendre pourquoi ils partent et comment y remédier.
4. Avant d'apporter des modifications et de tester les formulaires compter le nombre de candidatures déjà reçues pour avoir une image réelle des résultats obtenus après avoir apporté des améliorations.

Soyez entièrement équipé et gardez une longueur d'avance sur vos concurrents. Pages de destination de conversion pour vous !

Bonjour les amis! Je veux attirer votre attention sur l'universel script pour envoyer des données de formulaires à un e-mail. Le script est idéal pour des sites comme Page de destination, sites de cartes de visite, etc. Notre script du formulaire de commentaires se distingue parmi la masse d'autres scripts sur Internet en ce qu'il a la capacité de connexion d'un nombre illimité de formulaires avec différents champs sur la même page et est capable de envoyer des e-mails à plusieurs destinataires.

Alors. Commençons. Commençons par les capacités du script.

1. Connexion d'un nombre illimité de formulaires sur une seule page.
2. Vérification de l'exactitude du remplissage des champs.
3. Paramètres de notification.
4. Possibilité d'utiliser des lettres pour chaque formulaire.
5. Type de lettre - (si des balises html sont utilisées)
6. Envoi à un nombre illimité d'adresses.
7. Personnalisation individuelle de chaque formulaire.
8. Le script s'exécute sur , sans recharger la page.
9. Protection anti-spam.

La configuration initiale.

Scénario fonctionne sur la base de la bibliothèque, donc la première chose que nous devons faire est de la connecter. Pour ce faire, je recommande d'utiliser les bibliothèques hébergées par Google.

Parlons d'autres fichiers plus en détail :

feedback.js- fichier de script principal, responsable de Soumission de formulaire AJAX.
jquery.arcticmodal.js,
jquery arcticmodal.- offre la possibilité d'afficher des formulaires dans une fenêtre modale.
jquery.jgrowl.js
jquery.jgrowl.css- permettent d'afficher des notifications sur la page (blocs dans le coin supérieur de la page).

HTML et attributs requis.

Un attribut obligatoire pour tous les éléments de formulaire est l'attribut nom=""- est nécessaire pour la configuration ultérieure du formulaire.
Pour un bouton (type="bouton"), vous devez spécifier classe="commentaires". Je souhaite également attirer votre attention sur le fait que toute balise html avec la classe « feedback » peut faire office de bouton.

Appel d'un formulaire dans une fenêtre modale

Pour appeler un formulaire dans une fenêtre modale, il faut d'abord définir une action au clic sur une balise, par exemple un div avec la classe modal_btn

Étant donné que le formulaire ne doit être visible que dans la fenêtre modale, il doit être masqué en le plaçant dans un div avec l'attribut style="display: none;", et enveloppé dans quelques divs standard pour styliser la fenêtre modale.

Nous avons donc compris les paramètres de base pour connecter notre script d'envoi de formulaires à E-mail. Regardons maintenant à l'intérieur et traitons de la configuration des champs, des notifications et de tout ce qui s'y trouve.

Exemple de paramètres pour un formulaire

Les paramètres de tous les formulaires sont stockés dans un fichier feedback\index.php
$form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Le champ [ %1$s ] peut contenir une erreur", "minlength " => "La longueur minimale du champ [ %1$s ] est inférieure à la longueur autorisée - %2$s", "maxlength" => "La longueur maximale du champ [ %1$s ] est supérieure à la longueur autorisée - %2$s",)), "tell" => array("title" => "Phone", "validate" => array("preg" => "/^((8|\+ )[\- ]?)?(\(?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5" ,), "messages" => array("preg" => "Le champ [ %1$s ] peut contenir une erreur", "minlength" => "La longueur minimale du champ [ %1$s ] est inférieure que permis - %2$s",)))), "cfg" => array(" charset" => "utf-8", "subject" => "Subject", "title" => "Titre dans le corps de l'email", "ajax" => true, "validate" => true, "from_email" =>" [courriel protégé]", "from_name" => "sans réponse", "to_email" => " [courriel protégé], [courriel protégé]", "to_name" => "noreply1, noreply2", "geoip" => vrai, "referer" => vrai, "type" => "html", "tpl" => vrai, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Message envoyé - OK", "fuck" => "Message envoyé - ERREUR", "spam" => "Spambot", "notify" => " color-modal-textbox", "usepresuf" => false)); // Formulaire suivant $form["form-2"] = array("fields" => array(.....
Pour ajouter des paramètres pour un nouveau formulaire, vous devez créer un nouveau tableau $form[""] en suivant l'exemple du tableau $form["form-1"]

Rappelez-vous que j'ai parlé de l'attribut requis nom=""?

Un attribut obligatoire pour tous les éléments du formulaire est l'attribut name="" - il est nécessaire pour la configuration ultérieure du formulaire.

Il est donc temps de dire pourquoi il en avait encore besoin.
nom="" est une clé alphanumérique pour le tableau, doit être unique pour le tableau $form[""]

Un exemple de code html pour plus de clarté

Comprenons maintenant les tableaux et à quoi ils servent.

$form["form-1"] = array();
$form["form-2"] = array(); etc.
Ce sont les tableaux principaux pour chaque nouveau formulaire, contiennent :

1. "champs" => tableau();- Un tableau de paramètres d'éléments de formulaire.
   • "nom" => tableau();- Un tableau de paramètres d'éléments de formulaire (par exemple entrée nom="nom" type="texte") qui a un certain nombre de paramètres.
     • "title" => "Votre nom"- le nom de l'élément du formulaire, sera affiché en cas d'erreur ou dans le modèle
     • "valider" => tableau();- un tableau contenant les règles de validation de l'élément de formulaire
       • "preg" => "%%"- expression régulière
       • "longueurmin" => "3"- taille minimale du champ
       • "maxlength" => "35"- taille maximale du champ
       • "substr" => "35"- toujours couper à N caractères
     • "messages" => tableau();- un tableau contenant des messages de validation, à savoir :
       • "preg" => "L'élément du formulaire ne correspond pas à l'expression régulière"
       • "minlength" => "La longueur minimale du champ [ %1$s ] est inférieure à la longueur autorisée - %2$s"- erreur de validation, la clé(preg) ne correspond pas à la clé de validation
       • "maxlength" => "La longueur maximale du champ [ %1$s ] dépasse la longueur autorisée - %2$s"- erreur de validation, la clé(preg) ne correspond pas à la clé de validation
2. "cfg" => tableau();- Un tableau de paramètres de formulaire.
   • "charset" => "utf-8"- encodage
   • "sujet" => "Sujet",- Objet de la lettre
   • "title" => "Titre dans le corps de l'email",- En-tête dans le corps de l'e-mail
   • "ajax" => vrai,- ceci est un formulaire ajax TODO (si pas nécessaire, mettez - faux)
   • "valider" => vrai,- (true) si nous voulons la validation du formulaire sur le serveur, remplacez js validation par "ajax" => true. Lorsqu'il est désactivé (faux), vous ne pouvez pas définir les paramètres de champ de validation. FAIRE
   • "from_email" => "monemail",- expéditeur, indiquez le nom du champ (name="myemail"), et si vous n'avez pas besoin d'email de l'utilisateur, alors un stub [courriel protégé]
   • "from_name" => "monnom",- expéditeur, spécifiez le nom du champ (name="myname"), et si vous n'avez pas besoin d'un nom d'utilisateur, alors le stub No-reply
   • "to_email" => " [courriel protégé]", - e-mail du destinataire. Pour envoyer à plusieurs adresses, séparez-les par des virgules. Exemple ("to_email" => " [courriel protégé], [courriel protégé], [courriel protégé]",)
   • "to_name" => "noreply1",- Nom du destinataire. Lors d'un envoi à plusieurs adresses, indiquez les noms des destinataires séparés par des virgules. Exemple ("to_name" => "noreply1, noreply2, noreply3",)
   • "geop" => vrai,- connaître l'emplacement par type TODO
   • "référent" => faux,- ajouter l'URL de la page à partir de laquelle le formulaire a été soumis
   • "type" => "simple",- type de lettre - simple, html (si des balises html sont utilisées)
   • "tpl" => faux,- utiliser un modèle de lettre. Si vrai, alors le fichier de modèle sera connecté, selon le nom du formulaire (name="form-1"), à partir du dossier et le fichier (feedback/tpl/form-1.tpl) sera traité, sinon tout sera être envoyé tel quel, chaque champ sur une nouvelle ligne
   • "antispam" => "email77",- Anti-spam, la méthode est basée sur un champ caché (display:none), qui est rempli automatiquement uniquement par le robot, se faisant ainsi passer pour lui-même.
   • "antispamjs" => "adresse77",- Anti-spam, la méthode est basée sur un champ caché (display:none), initialement renseigné, qui efface automatiquement le javascript au chargement de la page, même un robot intelligent ne peut pas le prévoir, puis il est bloqué.
   • "ok" => "Message à l'utilisateur",- Un message à l'utilisateur s'affiche si le formulaire est soumis avec succès, vous pouvez utiliser des balises html.
   • "fuck" => "Message à l'utilisateur",- Message à l'utilisateur, affiché lorsqu'une erreur survient lors de la soumission du formulaire, vous pouvez utiliser des balises html.
   • "spam" => "Message à l'utilisateur",- Message à l'utilisateur, affiché si un robot spam est suspecté, vous pouvez utiliser des balises html.
   • "notifier" => "couleur-modal",- quel type de notifications afficher, zone de texte - blocs dans le coin supérieur de la page, couleur - mise en surbrillance des couleurs dans le formulaire, modal - fenêtre modale au centre de la page, aucune - désactiver. Vous pouvez combiner, par exemple : color-modal - erreurs dans le remplissage des champs avec surbrillance, et l'état du texte d'envoi dans la fenêtre modale TODO
   • "usepresuf" => faux- Qu'un ajout personnalisé soit utilisé au sujet ou au titre de la lettre, en cas de petit changement, vous pouvez spécifier, par exemple, %%cfg.title.suffix%%, pour cela il doit y avoir un champ caché dans le formulaire, pour plus de détails, voir la fonction presuf()

Configuration des modèles d'e-mails

Alors. Passons maintenant à la thématisation de nos messages.
Tout d'abord, pour que le formulaire soit envoyé dans un modèle, vous devez activer l'utilisation d'un fichier modèle dans les paramètres du formulaire - "tpl" => vrai,
Deuxièmement, vous devez créer un fichier modèle avec l'extension *.tpl dans le dossier ( commentaires/tpl/), selon le nom du formulaire ( nom="formulaire-1").

Exemple: ( feedback/tpl/form-1.tpl)

En-tête dans le corps de l'e-mail
%%nom.titre%%	%%nom.valeur%%
%%dire.titre%%	%%tell.value%%

Nom, raconter etc. - Ce sont les attributs (name="") des champs que l'utilisateur remplit.
Titre- Le nom de l'élément de formulaire, défini dans le tableau des paramètres de l'élément de formulaire.
évaluer- La valeur de l'élément de formulaire.

C'est tout pour le moment, mais le script n'est certainement pas parfait, donc les commentaires et les descriptions de bogues sont les bienvenus et seront corrigés dans les futures versions.

PS Le script a été développé par l'équipe