Créez un formulaire client pour votre agence WordPress – En utilisant Elementor et un plugin de formulaire de contact

Publié: 2020-11-09

Si vous possédez une entreprise de développement WordPress et que vous recevez actuellement des demandes de renseignements sur Internet, vous pouvez rationaliser votre processus de vente et améliorer vos services en utilisant un formulaire client efficace. Alors, pourquoi est-il nécessaire d'avoir une bonne forme client d'un point de vue psychologique ? Et comment mettre en œuvre cela dans votre entreprise pour 3x le montant des revenus ? Je vais partager avec vous les connaissances techniques sur la façon de créer un formulaire client pour votre agence WordPress à l'aide d'Elementor et d'un plugin de formulaire de contact .

Table des matières masquer
  1. 1. Votre formulaire de contact général vs votre formulaire de contact spécialisé
  2. 2. Étape 1 : installer les plugins
  3. 3. Étape 2 : Créez une page pour votre formulaire client dans Elementor
    1. 3.1. Créer une page de canevas
    2. 3.2. Créer un en-tête pour la page
    3. 3.3. Créer un en-tête pour le formulaire de contact client
    4. 3.4. Créer un pied de page pour la page
  4. 4. Étape 3 : Créez le formulaire de contact à l'aide du plugin WPForms
  5. 5. Étape 4: Créez la citation de la colonne de droite et placez votre image dessus
    1. 5.1. Créer le Blockquote
    2. 5.2. Créer la photo et la signature
  6. 6. Conclusion

Il y a un certain nombre d'éléments que je vais souligner. Mais d'abord, je voulais expliquer pourquoi créer un formulaire client spécialisé, et pourquoi vous avez également besoin de ce type de formulaire de contact.

Votre formulaire de contact général vs votre formulaire de contact spécialisé

Lorsque les gens accèdent à un site Web et font défiler vers le bas, ils verront un formulaire de contact assez standard qui a probablement déjà été vu un million de fois auparavant sur de nombreux sites Web (pas seulement les sites WordPress).

Le formulaire de contact client sur un site WordPress.

Lorsque quelqu'un fait une demande sur votre site Web, vous devez réfléchir très attentivement à la prochaine étape. Selon la façon dont vous répondez, vous serez soit perçu comme « juste le gars du Web », soit comme quelqu'un qui peut faire aboutir les objectifs du client en utilisant la puissance d'Internet. Comme vous pouvez l'imaginer, le formulaire client spécialisé va vous aider à gagner beaucoup plus.

Et voici le formulaire client spécialisé que nous allons créer dans cet article :

Le formulaire client spécialisé pour une agence WordPress

Pour l'image complète du formulaire client, veuillez visiter ici.

Lorsqu'un client vous enverrait un e-mail en utilisant ce formulaire client, vous répondriez en indiquant ce qui suit

  • Le client avait besoin de prendre rendez-vous avec vous à l'aide de votre application Calendly
  • Le client devait remplir le formulaire client ci-dessus

Voyons comment créer ce formulaire tout en discutant des éléments qui contribuent à rendre ce formulaire si efficace.

Étape 1 : installer les plugins

Un excellent plugin de formulaire de contact (et gratuit) que je recommanderais est WPForms. Vous pouvez installer et activer le plugin en allant dans votre Tableau de bord > Plugin > Ajouter un nouveau .

Installer le plugin WPForms sur le site WordPress

Ensuite, installez et activez le générateur de page gratuit Elementor avec la même méthode.

Installez le plugin de création de page ELementor sur le site WordPress

Après avoir tous les outils nécessaires, nous allons commencer tout de suite!

Étape 2 : Créez une page pour votre formulaire client dans Elementor

Nous devons créer un modèle de page qui inclut votre formulaire de contact client. Cette page a cette structure de haut en bas : en-tête de page – en-tête du formulaire de contact – formulaire de contact – pied de page.

Remarque : Le formulaire de contact sera fait plus tard à l'étape 3.

Créer une page de canevas

La première chose que vous remarquerez à propos du formulaire client de collecte de données est qu'il n'y a pas d'en-tête ni même de pied de page . Le but de la page, lorsque j'envoie le lien au client, est d'obtenir les informations du client que j'utiliserais ensuite pour ma première consultation.

Par conséquent, la première chose que nous devons faire est de créer la page dans Elementor et de nous assurer que le type de page est Canvas .

Créer une page Elementor avec le type Canvas

Créer un en-tête pour la page

Bien qu'il n'y ait pas d'en-tête et de pied de page traditionnels, je voulais inclure un petit en-tête qui leur indiquerait le site Web sur lequel ils se trouvaient. Vous noterez également que le lien dans l'en-tête supérieur mène en fait à ma section Avis clients .

Inclure un petit en-tête sur le formulaire client de l'agence WordPress

De cette façon, le client sait où il se trouve. Si le client hésite, cliquer sur le lien lui donnera la confiance nécessaire pour continuer ?

Cela se fait via une section simple avec un arrière-plan pour la couleur de votre marque suivi d'un champ de texte. Des trucs assez simples !

Créer un en-tête pour le formulaire de contact client

L'étape suivante est l'en-tête du formulaire client. Ici, j'ai utilisé la police Lato à 60px lors de l'édition.

Créer l'en-tête du formulaire client de l'agence WordPress

Le sous-titre était la même police seulement à 24px. De plus, le poids du sous-en-tête est de 300. Vous pouvez manuellement faire en sorte que les sous-en-têtes aient un poids inférieur à la moyenne afin que l'en-tête supérieur se démarque davantage.

Faire en sorte que les sous-titres du formulaire client de l'agence WordPress aient un poids inférieur à la moyenne

Créer un pied de page pour la page

Ensuite, ajoutez un pied de page, qui n'est qu'une section avec le même arrière-plan que l'en-tête. Dans ce cas, j'ai 2 colonnes. Non seulement je renvoie une nouvelle fois aux critiques pour gagner en confiance, mais je renvoie également à la page À propos où je parle davantage de moi-même.

Lien vers l'avis et la page À propos dans le pied de page du formulaire client

Étape 3 : Créez le formulaire de contact à l'aide du plugin WPForms

L'étape suivante consiste à créer le formulaire de contact. Je n'entrerai pas trop dans les détails car un générateur de formulaire de contact est assez simple. Pour plus de détails sur l'utilisation de ce plugin de formulaire de contact, nous avons déjà un tutoriel ici.

Là, il suffit de glisser-déposer les champs du formulaire de contact.

Ajouter un nouveau formulaire de contact dans WPForms

Heureusement, vous n'avez pas besoin de créer le formulaire de contact vous-même - vous pouvez importer le fichier JSON que j'ai téléchargé dans le lien ci-dessous, et l'importer en allant dans WPForms > Tools > Importer et remplir vos formulaires.

Voici le lien vers le fichier JSON .

Pour l'importer, il suffit de le télécharger ici :

Téléchargez le fichier json pour ajouter le formulaire de contact

Une chose à noter : une fois que vous avez importé le formulaire de contact, vous devrez obtenir le shortcode. Une fois que vous avez terminé de modifier le formulaire de contact, cliquez simplement sur Intégrer , puis sur l'option Utiliser un shortcode .

Obtenez le shortcode du formulaire client dans WPForms

Ensuite, copiez/collez simplement ce shortcode dans votre page.

Étape 4: Créez la citation de la colonne de droite et placez votre image dessus

Une chose que vous voulez faire avec le formulaire client est également de maintenir votre positionnement, d'ajouter du caractère et de la vie à votre formulaire client.

Créez le devis de la colonne de droite pour votre formulaire client à l'aide d'Elementor

Créer le Blockquote

La première partie est le blockquote. Il s'agit d'un élément Elementor standard. Cependant, il y a quelques points à ce sujet.

Vous remarquerez que j'ai fait la citation elle-même en rouge et en gros. Vous pouvez définir la section Edit Blockquote to Quote , et définir la couleur sur rouge et la taille sur 1.

En ce qui concerne la zone de texte elle-même, vous voulez rappeler au client pourquoi il remplit le formulaire client et comment cela l'aidera. Vous remarquerez également que je remercie l'utilisateur d'avoir cliqué sur la page à partir du lien dans l'e-mail.

Créer la photo et la signature

L'élément suivant est simplement une photo de vous et une signature dans le formulaire client. Une signature ajoute une touche de classe et rend la section plus officielle. Cela peut sembler idiot, mais cela a l'air mieux que d'écrire simplement le nom de votre marque, et encore une fois, vous voulez rendre votre marque aussi forte que possible à ce stade.

J'ai utilisé le générateur de signature en ligne DocSketch pour créer cette signature.

Et c'est la dernière étape de la création d'un formulaire client. N'oubliez pas d'enregistrer et de publier votre formulaire client.

Conclusion

Une fois ce formulaire client rempli, vous êtes prêt à le mettre en œuvre. Il ne vous reste plus qu'à attendre votre prochaine demande en ligne. Lorsque cela se produit, vous devez envoyer un e-mail au client lui demandant de remplir le formulaire client.

J'espère que ce formulaire client fonctionne pour vous et vous aide à vous positionner comme l'expert incontesté avant votre rendez-vous ! Bonne chance!

Biographie de l'auteur

Kosta est un spécialiste du développement WordPress de Sydney et est un expert dans la fourniture de sites Web personnalisés WordPress qui sont rapides, stables, fiables mais surtout qui incitent les clients à faire ce que vous voulez qu'ils fassent - et c'est agir.