Ce guide vous indiquera comment insérer un formulaire de contact dans votre site Website Builder.
- Étape 1 - Faites glisser le composant de formulaire Contact vers l’espace de travail
- Étape 2 - Définir l’adresse email du formulaire
- Étape 3 - Modifier le formulaire de contact
- Étape 4 - Cliquez sur Modifier les champs
- Étape 5 - Cliquez sur Ajouter
- Étape 6 - Sélectionnez un type de champ
- Étape 7 - Modifier les paramètres du champ
- Étape 8 - Paramètres de style du formulaire de contact
- Étape 9 - Modification du style du formulaire de contact
- Étape 10 - Message de confirmation des paramètres du formulaire de contact
- Étape 11 - Entrez un message de réussite
- Étape 12 - Activer le captcha
- Étape 13 - Ajustez la taille et l’emplacement du formulaire de contact
Vous n’avez pas accès au Website Builder ? Vous pouvez l’essayer gratuitement pendant 14 jours et créer un site Web en un rien de temps. Démarrez votre essai gratuit maintenant
Étape 1 - Faire glisser le composant Formulaire de contact sur l'espace de travail
- Dans l’éditeur du Website Builder, accédez à la section de votre site où vous souhaitez placer le formulaire de contact.
- Cliquez sur Contact dans le menu des composants sur le côté gauche de votre éditeur.
- Cliquez et faites glisser le composant de formulaire Contact sur votre espace de travail et placez-le à l’endroit où vous souhaitez que le formulaire soit.
Remarque: Vous ne pouvez intégrer qu'un seul formulaire de contact par page. Si le composant apparaît en grisé, cela signifie que vous avez déjà intégré un formulaire de contact sur la page sélectionnée.
Étape 2 - Définir une adresse mail pour la réception des formulaires
- Sélectionnez l’adresse email à laquelle le formulaire doit être envoyé. Vous pouvez choisir une adresse existante ou en créer une nouvelle. Notez qu’il doit être fait sur votre domaine. Si par exemple, vous avez le domaine one-example.com, il doit s’agir d’une adresse @one-example.com. Si vous utilisez un fournisseur de messagerie externe, vous devrez créer un compte email avec nous depuis le panneau de configuration.
- Saisissez l’objet des emails afin de pouvoir les reconnaître dans votre boîte de réception.
- Cliquez sur Enregistrer pour continuer.
Si vous souhaitez modifier l’adresse email ultérieurement, cliquez sur le formulaire de contact et sélectionnez Modifier le formulaire de contact --> Paramètres de l’email.
Conseil : Configurez un filtre d’emails pour déplacer tous les emails du formulaire de contact vers un dossier spécifique de votre compte de messagerie.
Étape 3 - Modifier le formulaire de contact
Le formulaire de contact par défaut possède un bouton Envoyer et trois champs : Nom, Adresse mail et Message.
Cliquez sur Modifier le formulaire de contact pour ajouter ou modifier des champs.
Étape 4 - Modification du champ Éditer
Cliquez sur Modifier les champs pour modifier les paramètres de champ par défaut.
Conseil : Vous pouvez modifier le texte du bouton par défaut pour quelque chose de votre choix. Cliquez simplement dans le champ de texte Bouton et commencez à taper.
Étape 5 - Cliquez sur Ajouter
Ici, vous pouvez modifier les paramètres des champs de formulaire existants et supprimer et ajouter de nouveaux champs avec différentes options. Vous pouvez ajouter autant de champs que vous le souhaitez en cliquant sur le bouton Ajouter dans le coin supérieur droit.
Dans ce guide, nous ajoutons une case à cocher pour que vos visiteurs s’inscrivent aux newsletters, mais vous pouvez ajouter ce que vous voulez.
Étape 6 - Sélectionnez un type de champ
Vous pouvez ajouter divers types de champs à votre formulaire de contact. Dans ce guide, nous allons ajouter une case à cocher.
Sélectionnez le champ que vous souhaitez ajouter et cliquez sur Terminé.
Étape 7 - Modifier les paramètres du champ
Chaque type de champ possède des paramètres spécifiques que vous pouvez modifier.
- Cliquez sur l’icône en forme de crayon à côté du champ.
- Entrez un titre pour le champ. Il sera visible par vos visiteurs.
- Selon le type de champ, vous pouvez avoir plusieurs options. Cliquez sur l’option pour modifier la description, cliquez sur l’icône de la corbeille à la fin pour la supprimer, ou cliquez sur Ajouter une option pour en ajouter une nouvelle.
- S’il est nécessaire que vos visiteurs sélectionnent au moins une option, gardez cette case cochée. Lorsqu’un champ est requis, un message d’erreur s’affiche lorsqu’ils essaient d’envoyer le formulaire avec un champ est manquant. Vous pouvez activer et écrire le message d’erreur dans le champ en bas de la fenêtre.
- Cliquez sur Enregistrer pour mettre à jour le formulaire avec vos nouveaux paramètres de champ.
Étape 8 - Paramètres de style du formulaire de contact
Le formulaire de contact correspond au modèle proposé par défaut mais vous pouvez le personnaliser selon vos besoins.
Cliquez sur Style dans le menu mobile.
Étape 9 - Modification du style du formulaire de contact
Vous pouvez modifier les paramètres de police ainsi que ceux du bouton envoyer.
- Police : type, taille et couleur.
- Bouton : style (couleur, forme et bordure) et taille de police du bouton.
Étape 10 - Message de confirmation des paramètres du formulaire de contact
Lorsqu'un formulaire de contact est envoyé avec succès, vos visiteurs recevront un message de confirmation.
Cliquez sur Message de réussite dans le menu mobile pour modifier le message par défaut. Le message sera enregistré automatiquement une fois que vous l’aurez entré dans le champ.
Étape 11 - Saisir un message de confirmation
Le formulaire de contact comporte par défaut le message suivant : "Nous vous remercions pour votre message". Vous pouvez personnaliser ce message en modifiant le texte.
Étape 12 - Activer le captcha
Captcha est un excellent outil qui vous aide à protéger votre formulaire contre les attaques de bots et les spams.
Il sera automatiquement activé si vous créez un nouveau formulaire de contact sur votre site. Cependant, vous pouvez également le contrôler manuellement dans les paramètres du formulaire.
- Sélectionnez le composant Formulaire de contact.
- Cliquez sur Modifier le formulairede contact.
- Dans le menu flottant qui s’affiche, cliquez sur Captcha.
- Faites glisser le bouton Afficher le captcha pour activer/désactiver le captcha et sélectionnez une langue dans le menu déroulant.
Étape 13 - Modifier les dimensions et le positionnement du formulaire de contact
Maintenant que le formulaire est rempli, il est temps d’ajuster son emplacement et sa taille. Cliquez sur Enregistrer et publier pour rendre le formulaire disponible en ligne.
Articles Liés: