La fonctionnalité de demande de devis est utilisée pour créer des formulaires que vos clients potentiels peuvent utiliser pour demander un devis ou informations des services ou des produits que propose votre entreprise, la fonctionnalité de demande de devis vous donne la possibilité d’ajouter différents types de champs qui peuvent être adaptés aux besoins de votre entreprise.

Par exemple, si votre entreprise propose la conception de site internet, vos clients peuvent effectuer une demande de devis pour une conception de site internet via le formulaire que vous avez préalablement créé. Habituellement, les formulaires auront des questions plus générales comme “Quel est votre budget”, “Urgence”, “Type de site Web”, etc. et en fonction des informations que le client a saisies dans le formulaire, vous pouvez créer un devis et l’envoyer au client.

Les formulaires peuvent être envoyés directement au client sous forme de lien direct ou vous pouvez intégrer le formulaire via iframe directement dans les pages de votre site Web existant, par exemple, vous pouvez avoir un lien de menu sur le site Web de votre entreprise existant nommé “Demander un devis” et dans cette page, vous pouvez intégrer le formulaire iframe.

Créer des formulaires de demande de devis #

La première étape consiste à créer un formulaire de demande de devis. Vous pouvez créer un nombre illimité de formulaires de demande de devis. Pour ce faire, lorsque vous êtes connecté en tant qu’utilisateur administrateur, suivez les étapes ci-dessous.

• Cliquez sur Paramètres puis Demande de devis→Formulaires.
• Cliquez sur Nouveau formulaire .
• Ajouter le nom du formulaire, exemple : “Demande de devis de site Web“.
• Langue – La langue est actuellement utilisée uniquement pour les messages de validation.
• Le texte du bouton Envoyer- Il sera bas où l’utilisateur devra cliquer pour soumettre le formulaire Exemple Demander un devis ou Contactez-nous, n’hésitez pas à l’adapter à vos besoins.
• Message à afficher une fois le formulaire soumis avec succès – Ce message s’affichera après avoir soumis le formulaire avec succès.
  
• Statut – A quel statut sera la demande de devis après avoir été soumise avec succès dans votre espace Djaboo.
  
• Responsable – Attribuez automatiquement la demande de devis à un membre spécifique du personnel.
  
• Paramètres de notification – Tous les utilisateurs basés sur le type de notification seront avertis via une notification intégrée dansDjaboo et, en outre, le membre responsable de la demande de devis recevra une notification par e-mail si dans Paramètres-> Modèles d’e-mail -> Demande de devis attribuée (envoyée à Personnel) n’est pas cochée comme désactivée.
  
• Recaptcha – Vous pouvez utiliser Google Recaptcha pour empêcher le spam. Le champ pour Google Recaptcha ne s’affichera que si vous avez préalablement configuré les clés recaptcha .

Après avoir créé le formulaire, 2 nouveaux onglets seront affichés dans la zone de formulaire Form Builder et Integration Code.

• Form Builder – L’endroit où vous créez le formulaire et ajustez tous les champs dont vous avez besoin.
• Le code d’intégration est le code que vous devrez placer sur votre site Web pour que le formulaire s’affiche, notez qu’à partir du lien, vous pourrez voir que chacun a une clé unique.
  

Ajouter des champs au formulaire #

Pour ajouter un champ au formulaire, faites simplement glisser le champ vers la droite dans la zone de formulaire , notez que le champ E-mail doit apparaitre dans le formulaire et doit également être marqué comme un champ obligatoire.

Personnalisez les champs #

Vous pouvez personnaliser les étiquettes, ajouter du texte d’aide, des espaces réservés et les rendre obligatoires. Lorsque vous faites glisser le champ dans la zone de formulaire, survolez simplement le champ en haut à droite, vous pourrez voir 3 boutons (modifier, copier et supprimer)

Après avoir personnalisé le formulaire, cliquez sur le bouton en bas à gauche ENREGISTRER et cliquez sur l’onglet Code d’intégration pour obtenir le code que vous devez ajouter à votre site Web . Le code sera placé en tant qu’ iframe et vous pourrez ajuster la largeur et la hauteur directement à l’extrait de code fourni.

Style #

Si vous avez besoin de personnaliser la couleur des champs de saisie pour l’adapter à votre site Web, vous pouvez créer un fichier custom.css sur votre site et appliquer les styles nécessaires.

Exemple de modification de la couleur de la bordure des entrées :

body.estimate-request-form input {
   border-color:red;
}

Exemple de modification de la couleur d’arrière-plan du bouton d’envoi :

body.estimate-request-form #form_submit {
   background:red;
}

body.estimate-request-form #form_submit:hover,
body.estimate-request-form #form_submit:active {
   background:green;
}

Inclure le logo dans le formulaire #

Pour inclure le logo de votre entreprise dans le formulaire, vous pouvez partager ou intégrer l’URL avec le paramètre de chaîne de requête comme indiqué ci-dessous :

https://votre-entreprise.djaboo.appform-url?with_logo=1https://votre-entreprise.djaboo.app/form-url?with_logo=1

Partage de lien direct #

Les formulaires peuvent être partagés directement avec vos clients sans réellement intégrer le formulaire sur votre site Web, cette fonctionnalité est utile par exemple si vous souhaitez inclure un lien dans des e-mails, SMS, etc.

Pour que Djaboo puisse savoir que le lien du formulaire est partagé directement et non intégré dans un iframe, vous devez spécifier la chaîne de requête URL, dans ce cas, Djaboo fournira un meilleur style au formulaire.

https://votre-entreprise.djaboo.app/form-url?with_logo=1&styled=1

Créer des mises en page de formulaire à plusieurs colonnes #

Par défaut, les champs du formulaire seront ajoutés dans une seule colonne pleine largeur du document si vous souhaitez personnaliser le formulaire et afficher les champs dans plusieurs colonnes, nous avons ajouté la possibilité d’y parvenir avec des classes personnalisées appliquées au champ, vous peut ajouter jusqu’à 12 colonnes sur 1 ligne.

Dans l’exemple suivant, nous allons créer 2 champs dans 2 colonnes et 1 ligne.

Gardez à l’esprit que les colonnes ne seront pas appliquées dans le générateur de formulaire, uniquement lorsque le formulaire est affiché en accédant au lien d’intégration ou se trouve dans un iframe.

Enregistrez le formulaire en cliquant sur le bouton Enregistrer et prévisualisez le formulaire à partir du lien d’intégration pour voir le résultat final.

Comme mentionné précédemment, vous pouvez ajouter jusqu’à 12 colonnes, dans ce cas, form-col-6 + form-col-6 = 12, si vous souhaitez ajouter 3 colonnes, appliquez la classe form-col-4 sur 3 champs ( form -col-4*3 champs seront 12 et les champs s’adapteront au document) qui sont un par un dans l’ordre.

Parce que dans la plupart des cas, vous intégrerez le formulaire dans un petit conteneur/partie de votre site Web, la grille d’amorçage CSS affichera toujours les colonnes de nouvelles lignes (non divisées en 2 colonnes), dans ce cas, envisagez d’ajouter une autre classe supplémentaire pour les petits conteneurs , par exemple si vous avez ajouté la classe form-col-6 , ajoutez une classe supplémentaire pour la petite zone form-col-xs-6, cliquez ici pour vérifier à quoi cela devrait ressembler.