Le formulaire de contact est un outil essentiel pour faciliter la communication entre particuliers ou entreprises. Il offre aux utilisateurs un moyen pratique et organisé de contacter et d'exprimer leurs requêtes. Vous pouvez également prendre des applications, des demandes de contact et des sondages d'opinion en l'utilisant.
Vous pouvez facilement créer une page de contact sur votre site Web en utilisant la section Contact.
Dans cet article :
-
- Ajouter une section de contact à une page
- Gérer le formulaire de contact
- Contenu du formulaire de contact
- Gestion des champs de formulaire
- Types de champs
- Formulaire en ligne et formulaire contextuel
- Gérer la mise en page
- Formulaire de contact
- Paramètres du formulaire de contact
- Rediriger le formulaire vers une autre page
- Exporter les données du formulaire
- Notifications par courriel
- Données de formulaire soumises
- Exemple en direct
Ajouter une section de contact à une page
- Sur ta page, Cliquez sur le bleu + icône pour ajouter une nouvelle section à votre page.
- Vous verrez maintenant le Catégories de sections sur le côté gauche.
- Choisissez le Formulaires (1) catégorie et cliquez sur le Contact onglet (2) où vous pouvez choisir différentes mises en page du système Contact (3) partie.
- Choisissez n'importe quelle disposition de section et cliquez dessus pour l'ajouter à votre page.
Gérer le formulaire de contact
- Cliquez sur Modifier le contenu (1) bouton.
- Vous aurez la possibilité de gérer Contenu (2), Mise En Page (3), Style (4), Paramètres (5), et Notifications par courriel (6).
- Frappé Enregistrer (7) pour appliquer les modifications au formulaire.
Contenu du formulaire de contact
Il s'agit d'une partie importante du formulaire puisque vous téléchargez ou modifiez l'image, donnez le titre et la description ici afin que les utilisateurs aient une idée de l'objectif du formulaire lui-même. En créant avec soin un titre concis et descriptif et une description informative et convaincante, vous pouvez améliorer la communication et établir des liens solides avec les visiteurs de votre site Web.
Gérer les champs de formulaire
Sous Gérer les champs du formulaire, vous pouvez spécifier les champs que vous souhaitez que les visiteurs remplissent dans ce formulaire.
- Cliquez sur Ajouter un nouveau champ (1) bouton pour ajouter plus de champs à votre formulaire.
- Modifier ou supprimer (2) un champ déjà ajouté.
- Glisser et déposer (3) les champs pour changer leur séquence dans le formulaire.
- Mettez le Étiquette du bouton d'appel à l'action (4) pour le formulaire.
Le champ E-mail est obligatoire sur le formulaire et ne peut pas être supprimé.
En cliquant sur le + Ajouter un champ une fenêtre contextuelle s'ouvrira à partir de laquelle vous pourrez choisir vos champs de formulaire.
- Capturez le Le nom de votre client.
- Capturez toutes les petites informations via le Texte court champ.
- Capturez toute information/message élaboré via le Texte long champ.
- Capturez le en nous envoyant un mail de votre client.
- Capturez n'importe quel informations numériques de votre client.
- Ajouter des services parmi lesquels choisir dans un déroulante façon.
- Sélection unique : Ajoutez une sélection radio pour vos services.
- Sélection multiple : Ajoutez un champ de case à cocher pour plusieurs sélections.
- Ajouter un sélecteur de date afin que vos clients puissent choisir une date pour n'importe quel événement.
- Ajouter un en ligne entre les champs du formulaire.
- Capturez le propos de votre client.
- Capturez le site de votre client.
- Capturez le Téléphone nombre de votre client.
- Ajouter un Paisible afin que vos clients puissent spécifier eux-mêmes l'heure de l'événement.
- Ajouter un séparateur entre les champs du formulaire.
- Le champ de consentement L'option peut être utilisée pour obtenir des autorisations pour les newsletters, en acceptant la confidentialité et les conditions d'utilisation.
- Prenez les avis des clients en utilisant le étoile en échelon, échelle de nombres et échelle de smiley.
- Lors de l'ajout de certains champs, vous avez la possibilité de choisir la largeur entre Full, Half et One Third
- Vous pouvez également choisir d'afficher les champs côte à côte en choisissant l'option Moitié ou Un tiers
Style de forme
- Afficher le formulaire sous forme de fenêtre contextuelle – Activez cette option pour ouvrir le formulaire dans une fenêtre contextuelle en cliquant sur le bouton d'appel à l'action.
- Étiquette du bouton d'appel à l'action – Réglez le Étiquette du bouton d'appel à l'action pour le formulaire.
- Pop-up d'en-tête – Précisez le formulaire Titre, si seulement.
- Télécharger ou supprimer (1) l'image du formulaire.
- Ajouter un Objet (2), et Description (3) pour le formulaire. Avant d'ajouter la description, vérifiez ceci. .
Headline
- Headline – Précisez le Titre de la section (1) pour la section Formulaire de paiement.
- Boutons et icônes – En savoir plus sur Boutons et icônes (2).
Gestion de la mise en page
- Cliquez sur Modifier le contenu (1) bouton.
- Choisissez le Mise En Page (2) onglet.
- Sélectionnez le disposition pour votre section (3) et Enregistrer (4) les changements.
La modification de la mise en page appliquera le style par défaut du formulaire.
Formulaire de contact
Le style d'un formulaire de contact est un aspect important de la création d'une expérience visuellement attrayante et conviviale.
Vous aurez plusieurs options de style pour la section :
- Champs de formulaire
- Alignement
- Texte
- espacement
- Headline
- Images
- Bordure d'image
- Bouton contextuel
- Bouton de formulaire
- Boutons de titre
- Icônes sociales en titre
Champs de formulaire
Pixpa permet Vous à solution personnaliser le apparence of votre Formulaire champs. Ces styliser Options vous inscrire à tous contribution des champs in votre Contact Forme et vous donner Vous plus grand des bactéries plus de how votre Formulaire regards et feels on votre en ligne.
- Forme: Choisissez la forme de vos champs de saisie (rectangle, arrondi, pilule ou texte) pour qu'elle corresponde à l'esthétique de votre site Web.
- Remplir: Activez cette bascule pour appliquer une couleur de remplissage d'arrière-plan à vos champs de formulaire.
- Couleur de base: Définissez la couleur d'arrière-plan des champs lorsque l'option de remplissage est activée.
- Aperçu: Activez ou désactivez la bordure (contour) pour chaque champ.
- Couleur du contour: Choisissez la couleur de la bordure du champ lorsque le contour est activé.
- Couleur du texte du champ : Définissez la couleur du texte saisi par les utilisateurs dans les champs du formulaire.
- La taille: Ajustez la hauteur de vos champs en choisissant parmi : Petit, Moyen, Grand ou Très Grand.
- Étiquettes: Choisissez si les étiquettes des champs de formulaire apparaissent à l'intérieur ou à l'extérieur du champ.
- Couleur de l'étiquette: Définissez la couleur des étiquettes lorsqu'elles sont placées en dehors du champ.
- Couleur intérieure de l'étiquette: Définissez la couleur des étiquettes placées à l'intérieur du champ (utile pour les étiquettes de style espace réservé).
- Espacement entre les champs : Utilisez le curseur pour définir l’espacement vertical (en pixels) entre chaque champ de formulaire.
Alignement
- Gérez l'alignement du contenu du formulaire horizontalement à partir de Alignement horizontal (1).
- Gérer verticalement l'alignement du contenu du formulaire à partir de Alignement vertical (2).
Texte
- Cliquez sur le Modifier le style de texte (1) bouton pour visiter le Design section et gérer vos tailles et styles de police.
- Spécifie le Objet (2) style de police du formulaire.
- Spécifie le Description (3) style de police du formulaire.
espacement
- Spécifie le Largeur de l'image (1) de l'image sous la forme en pourcentage.
- Spécifie le Espace entre l'image et le texte (3) en pourcentage.
- Spécifie le Espace sous le titre (4) en pourcentage.
Headline
- Aligner horizontalement le texte du titre de la section. Vous pouvez le définir à gauche, au centre et à droite.
- Activer/désactiver le Cloison entre le titre de la section et le contenu de la section.
- Mettez le épaisseur du diviseur (en px).
- Spécifie le Couleur du séparateur du sélecteur de couleurs.
- Choisissez un Style de séparation de la liste déroulante.
- Mettez le Largeur du titre pour définir la largeur du titre de la section, à partir d'un minimum de 50 %.
- Spécifie le Espace sous le titre dans la section (en px).
Images
- Recadrage de l'image: Choisissez le Image pour les éléments de la liste. Vous pouvez définir les images comme Carré, Cercle, Horizontal, Portrait et Original.
- Rayon d'angle: Choisissez d'avoir un rayon d'angle commun ou un rayon d'angle différent pour chaque côté des éléments de la liste et définissez un nombre (en px) pour le CRayon du coin des images des éléments de la liste. En savoir plus.
- Animation de survol : Choisissez d' Animer l'image de la section au survol en activant la bascule. Vérifiez cette fonctionnalité sur une page en direct.
- Style d'animation : Choisissez un Style d'animation pour l'image lorsque le curseur survole celle-ci.
- Masque de forme : Activez cette option pour appliquer un masque de forme aux images de la section Liste d'images. Une fois activée, la forme sélectionnée s'ajustera visuellement à l'image.
- Sélectionnez la forme : Choisissez parmi différentes formes prédéfinies pour vos images. Vous pouvez ainsi personnaliser votre contenu de manière créative en affichant des images sous des formes uniques, comme arrondies, en losange, en goutte, etc.
Le rayon de coin , vous pouvez créer différentes formes d'images d'éléments de liste. Si vous spécifiez 500 px ici, les images s'afficheront en forme de cercle.
- Si vous avez choisi des coins divisés, vous pouvez définir un rayon de coin différent pour chaque coin.
Bordure d'image
- Activer/Désactiver la bordure autour de l'image en commutant la bascule.
- Choisissez d'avoir un frontière commune sur tous les côtés de l'image ou vous pouvez spécifier le frontières séparément pour chaque côté.
- Spécifie le largeur de la frontière. S'il est défini sur 0, la bordure n'apparaîtra pas. Vous avez également la possibilité de définir la largeur de la bordure individuellement pour chaque côté de l'image.
- Sélectionnez le Couleur de la bordure du sélecteur de couleurs.
- Sélectionnez un préféré Style de bordure de la liste déroulante.
- Détermine le largeur de bordure pour mobile appareils, en l'alignant sur la largeur choisie pour le bureau.
Bouton contextuel
Ces options de style concernent le bouton contextuel, où le formulaire de contact s'ouvrira lorsque le bouton sera cliqué.
- Taille du bouton – Sélectionnez la taille du bouton parmi des options telles que petit, moyen ou grand.
- Espace au-dessus du bouton – Ajustez l'espacement vertical au-dessus du bouton (en pourcentage).
- Style de bouton – Choisissez le style du bouton, par exemple par défaut ou personnalisé.
- Couleur du bouton - Sélectionnez le style de couleur du bouton. Les options incluent « Par défaut », « Inverser » ou « Personnaliser ».
- Texte du bouton – Personnalisez la couleur du texte du bouton.
- Arrière-plan du bouton – Sélectionnez la couleur d'arrière-plan du bouton.
Bouton de formulaire
Ces paramètres permettent de personnaliser le bouton de soumission du formulaire pour qu'il corresponde à la conception et à la mise en page de la page.
- Taille du bouton – Sélectionnez la taille du bouton (petit, moyen ou grand).
- Espace au-dessus du bouton – Ajustez l'espacement vertical au-dessus du bouton (spécifié en pourcentage).
- Style de bouton – Choisissez le style général du bouton, par exemple Par défaut ou Personnalisé.
- Couleur du bouton - Définissez le style de couleur du bouton. Les options incluent « Par défaut », « Inverser » ou « Personnaliser ».
- Texte du bouton – Personnalisez la couleur du texte affiché sur le bouton.
- Arrière-plan du bouton – Sélectionnez une couleur d’arrière-plan pour le bouton.
- Alignement des boutons – Choisissez l'alignement du bouton (gauche, centre ou droite).
- Largeur du bouton – Ajustez la largeur du bouton. Les options incluent : Par défaut, Grand, Très grand ou Pleine largeur.
Boutons de titre
Ces paramètres contrôlent l'apparence et l'espacement des boutons placés avec le titre de la section.
- Taille du bouton – Sélectionnez la taille globale des boutons (petit, moyen ou grand).
- Espace entre les boutons – Ajustez l'espacement entre plusieurs boutons (mesuré en vw).
- Espace au-dessus des boutons – Définissez l'espacement vertical au-dessus des boutons (mesuré en pourcentage).
- Largeur du bouton – Choisissez la largeur des boutons. Les options incluent : Par défaut, Grand, Très grand et Pleine largeur.
- Taille du lien texte – Spécifiez la taille de police des liens texte associés aux boutons (mesurée en px).
- Taille du bouton d'image – Ajustez la taille des boutons basés sur l'image (mesurée en px).
Icônes sociales en titre
Affichez et personnalisez les icônes de partage social dans le formulaire.
- Taille de l'icône – Ajustez la taille des icônes sociales (mesurée en px).
- Type d'icône – Choisissez le style des icônes, comme les options Classique, Solide ou Contour.
- Couleur de l'icône – Sélectionnez la couleur des icônes. Les options incluent le texte du lien, la personnalisation ou la couleur de la marque (couleur d'origine du réseau social).
- Couleur d'arrière-plan de l'icône – Définissez une couleur d’arrière-plan personnalisée pour les icônes afin d’améliorer la visibilité et le style.
Paramètres du formulaire de contact
- Cliquez sur le Modifier le contenu (1) bouton.
- Personnalisez les paramètres du formulaire à partir de Paramètres (2) onglet et Enregistrer (3) vos modifications.
Nom de forme
- Entrez un nom pour identifier le formulaire de contact dans Pixpa Studio. Ce nom n'est pas visible pour les visiteurs du site web.
Action de post-soumission
En tant qu'action post-soumission, vous pouvez choisir de Afficher le message de succès (1) ou Rediriger vers l'URL (2).
En cas de Afficher le message de succès (1):
- Spécifie le Message de succès (2) qui s'affiche une fois que l'utilisateur a soumis le formulaire.
- Vous pouvez également ajouter n'importe quel script dans le succès après paiement HTML (3) boîte.
- En cas de Redirect vers l'URL, vous pouvez spécifier n'importe quelle page interne/externe en cliquant sur l'icône des paramètres (⚙️). En savoir plus.
Rediriger le formulaire vers une autre page
Rediriger les utilisateurs vers une page spécifique après avoir soumis un formulaire peut améliorer l'expérience globale de l'utilisateur et servir à diverses fins, comme éviter les soumissions en double, les analyses et le suivi, conserver les utilisateurs sur le site Web pendant une période plus longue, etc.
La redirection peut être facilement créée en utilisant le Action de post-soumission option sous l'onglet Paramètres.
- Vous pouvez créer une redirection au sein de votre site Web à partir de Contenu du site Web (1) choix. Il peut s'agir d'une page, d'une galerie, d'un blog, d'une galerie de commerce électronique, d'un dossier, etc. Vous devez entrer le nom de l'élément dans le champ comme indiqué dans la capture d'écran ci-dessous et vous obtiendrez des suggestions à ce sujet.
- Utilisez le Lien externe (2) possibilité de créer une redirection en dehors de votre site web. Vous devrez entrer l'URL dans le champ où vous souhaitez que les utilisateurs soient redirigés après la soumission du formulaire.
En savoir plus sur comment utiliser Linkbuilder.
Synchroniser et exporter les données du formulaire
- Transférer les données du formulaire vers Make.com. Apprendre encore plus.
- Envoyer les données du formulaire à Zapier.com. Apprendre encore plus.
- Exporter les données du formulaire au format CSV. Apprendre encore plus.
Notifications par courriel
À partir de là, vous pouvez personnaliser l'objet de l'e-mail pour les notifications que vous recevez en tant que propriétaire de site Web lors de la soumission réussie d'un formulaire. De plus, vous pouvez personnaliser l'e-mail de réussite envoyé aux utilisateurs ou aux clients après la soumission du formulaire. Cette fonctionnalité peut être exploitée pour la valorisation de la marque, le marketing et l'exécution efficace de campagnes.
- Courriel au propriétaire du site Web : Activez ou désactivez les notifications par e-mail pour les soumissions de formulaires. Lorsque cette option est activée, les notifications seront envoyées aux adresses e-mail spécifiées.
- Sujet: Personnalisez l'objet de l'e-mail. Utilisez le {SITE WEB} Variable permettant d'inclure dynamiquement le nom du site web dans l'objet. Ceci est utile si vous avez plusieurs sites web.
- Courriel : Spécifiez jusqu'à 3 adresses e-mail pour recevoir des notifications lorsque le formulaire est soumis.
- Spécifie le Sujet de l'e-mail de soumission du formulaire de contact. Vous pouvez également inclure {SITE WEB} variable pour inclure le nom du site Web.
Courriel au client
- Vous pouvez activer Courriel au client (1) pour envoyer un courrier concernant le succès de la soumission du formulaire.
- Spécifie le Sujet (2) du courrier.
- Spécifiez le contenu à l'intérieur du courrier de Message de réussite (3).
- L'e-mail au client est une fonctionnalité premium disponible uniquement sur Professionnel et Avancé plans. Apprendre encore plus.
- Personnalisez soigneusement le contenu des e-mails pour garantir une expérience de communication cohérente et professionnelle avec vos clients.
Données de formulaire soumises
Les données de formulaire soumises dans un formulaire de contact incluent les informations qu'un utilisateur saisit dans les champs du formulaire lorsqu'il le soumet.
- Toutes les données du formulaire sont stockées et accessibles depuis le Soumissions de formulaires page de l'atelier. Apprendre encore plus.
- Toutes les données soumises via le formulaire de contact seront également transmises à l'identifiant de messagerie spécifié dans les paramètres du formulaire de contact. Ton adresse e-mail du compte est pris par défaut.
Vérifiez également: Modifier l'adresse e-mail du compte.
Vous pouvez choisissez la fréquence à laquelle vous souhaitez recevoir des notifications par e-mail.
Exemple en direct
Voici un formulaire de contact pop-up en direct :
Voir un site de démonstration en direct.
Voici un formulaire de contact en ligne en direct :
Voir un site de démonstration en direct.
Pour réduire les spammeurs sur le formulaire, la sécurité Google captcha est activée automatiquement sur votre formulaire.