Devis en ligne

Nous allons voir comment créer un formulaire de devis avec un tableur Excel afin de l’intégrer à un site internet. Nous utilisons Basin pour la collecte de données de formulaires.

Formulaire web interactif

Le formulaire est divisé en deux parties :

• Une première partie “classique”, contenant des données individuelles telles le nom et l’e-mail,
• Une deuxième partie “interactive” permettant de sélectionner des quantités et de faire apparaître des promotions selon la quantité renseignée. Ici le prix final dépend du prix unitaire et de la taille du T-shirt.

En cliquant sur le bouton « Envoyer / Send », le formulaire est directement transmis via le site internet ou l’application web à son propriétaire qui pourra alors démarrer la commande de T-shirts.

Ce type de formulaire interactif peut être utilisé dans de nombreux domaines et professions, à savoir :

• Estimer le prix d’une assurance habitation basée sur la surface et l’année de construction du bien,
• Calculer des prix de livraison variant selon les villes de destination et le temps de livraison.

L’usage de ces formulaires permet de mieux qualifier et caractériser les commandes de vos clients. Ainsi, en parallèle des données individuelles de vos clients, nécessaires pour les recontacter, vous disposerez d’éléments clairs et quantifiables quant aux demandes de vos utilisateurs.

Comment créer un formulaire web avec Excel ?

Le formulaire de devis qui vous est présenté a été entièrement créé à partir d’un tableur Excel, puis converti avec Appizy avant d’être intégré à un site web. Vous pouvez utiliser ce formulaire comme document de départ pour essayer la conversion ou créer votre propre tableur. Ce tableur est disponible dans la page d’exemples du convertisseur Appizy.

Créer le tableur sous Excel

Le tableur créé est divisé en deux onglets :

• Un premier onglet dédié à l’interface des utilisateurs,
• Un second onglet dédié aux calculs intermédiaires et aux données de listes déroulantes. Ce second onglet est par la suite masqué avant de procéder à la conversion.

Il est important de suivre les deux étapes suivantes :

Nommer les cellules : si vous souhaitez collecter des données via ce formulaire, il est important qu’Appizy puisse reconnaître quelles cellules sont considérées comme des champs de données à collecter. Pour ce faire, sélectionnez chaque cellule concernée et donnez-lui un nom de référence (pour exemple, dans notre formulaire de devis, la cellule B10 est nommée « total »).

Vous trouverez plus d’information sur les plages nommée dans la documentation officielle d’Excel.

Créer des champs de données vides : afin de créer les deux champs de données présents au début du formulaire (Nom et E-mail), il est nécessaire de référencer ces cellules dans le deuxième onglet. Pour Appizy, une cellule sera convertie en champ de donnée uniquement si elle est référencée dans une autre formule du document.

Par exemple sur la cellule relative au « Nom », on utilise la formule suivante : =Interface !B1. pour créer le champ vide. Il faut également nommez cette cellule pour recueillir ses données lors de l’envoi du formulaire.

Réglages de conversion

Dans Appizy, nous avons sélectionné les réglages de conversion suivants (en anglais dans l’interface):

Content & Layout > App layout: Fluid (suppose un abonnement PRO ou PLUS), pour que l’application s’adapte à la taille l’écran (bureau ou mobile).

Integration > Toolbar > Send data button (avec PRO ou PLUS), afin d’ajouter un bouton “Envoyer” en-dessous du formulaire. Ainsi lorsque l’utilisateur cliquera sur ce bouton, le formulaire sera transmis et les données collectées.

Integration > Toolbar > Form endpoint (avec PRO ou PLUS), afin d’insérer l’URL fourni par Basin après avoir créé un nouveau formulaire au sein de leur interface.

Package > Split files (optionnel, avec PLUS), afin de disposer de plusieurs fichiers contenant chacun une partie du code selon le langage utilisé (HTML, CSS et JavaScript) et ainsi faciliter l’intégration finale sur le site internet.

Intégration du formulaire

Une fois la conversion avec Appizy réalisée, 90% du travail est réalisé. Nous ajoutons un peu de code CSS afin d’ajuster notre formulaire au thème de notre site basé sur Bootstrap, et le tour est joué !

A noter que Basin peut faire beaucoup plus que collecter des données et les transmettre via e-mail. Vous pouvez ainsi connecter votre compte à Zapier et imaginer alors toute sorte de tâche ou procédure de travail, déclenchées à la réception d’un nouveau devis.

Protection des données et engagement contractuel

Si vous utilisez des formulaires de calcul de prix, nous vous conseillons de bien mentionner que le prix calculé est une estimation et peut faire l’objet de changement ou modifications une fois que la commande sera traitée par votre équipe commerciale.

Enfin, souvenez-vous également que les calculs sont réalisés dans le navigateur du client. Ils peuvent ainsi parfois être amenés à détourner les calculs à leurs avantages, en créant des promotions qui les arrangent et qui sortent de nulle part.