Concevoir une section de formulaire de contact avec un élément de formulaire de contact

À propos de l'élément de formulaire de contact

L'élément Formulaire de contact est une fonctionnalité prédéfinie dans GemPages qui peut être facilement glissée et déposée depuis la barre latérale gauche dans votre zone de conception. 

Vous pouvez personnaliser davantage le formulaire en le faisant glisser et en le déposant éléments de champ de formulaire supplémentaires depuis la barre latérale pour inclure les champs d'informations spécifiques dont vous avez besoin. 

L'élément du formulaire de contact enverra des données à l'administrateur Shopify. Pour plus d'informations sur le Élément de formulaire de contactcliquez ici.

Concevoir une section de formulaire de contact avec un élément de formulaire de contact

Tout d’abord, vous devez accéder au Tableau de bord GemPages et cliquez sur la page cible pour l'ouvrir dans l'éditeur.

Une fois situé dans l'éditeur, suivez ces étapes pour concevoir une section de formulaire de contact avec l'élément de formulaire de contact de GemPages.

Étape 1 : Glissez-déposez l'élément du formulaire de contact

• Dans la barre latérale gauche, utilisez la barre de recherche pour trouver l'élément « Formulaire de contact ». Ajoutez-le ensuite à l'emplacement souhaité sur votre page.

Ce formulaire de contact par défaut comprend des composants de base, mais vous pouvez le personnaliser en ajoutant, en modifiant ou en supprimant des éléments.

• Pour supprimer un élément, cliquez dessus et sélectionnez le icône de la corbeilleet créez votre formulaire à partir de zéro.

• Supprimez tous les éléments prédéfinis pour créer un formulaire de contact vide:

Étape 2 : Créer la mise en page du formulaire de contact

• Faites glisser et déposez un Rangée élément dans le formulaire de contact.
• En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Mise En Page Dans la section Paramètres du panneau, vous pouvez configurer la ligne pour qu'elle soit une disposition à 1 ou 2 colonnes, selon vos préférences.

Étape 3 : Ajouter des éléments de saisie de formulaire

• Ensuite, glissez-déposez les éléments de saisie nécessaires. Pour une mise en page à deux colonnes, placez la première. Champ de texte élément dans la colonne de gauche.

• Double-cliquez sur cet élément de bloc de texte pour modifier le texte. Par exemple, nous le remplacerons par « Nom" .

• Faites glisser et déposez un Champ de texte Elément sous le bloc de texte un pour les mettre dans la même colonne.

• Dans la colonne de droite, continuez à ajouter un nouveau bloc de texte et à modifier le texte en «Email« Ensuite, placez un élément de champ de courrier électronique sous cet élément.

Étape 4 : Ajouter le bouton Soumettre

• Glissez et déposez le Bouton Soumettre le formulaire, ce qui est essentiel pour que les clients soumettent le formulaire et envoient leurs informations à votre administrateur Shopify.

• Ajustez l'alignement de ce bouton au centre pour une meilleure visibilité.

• Rendez-vous dans la section  Onglet Avancé et ajustez l'espacement sous le espacement .

Étape 5 : Configurer les paramètres du formulaire de contact

Configurez les paramètres pour personnaliser chaque condition :

• Après la soumission: Choisissez de permettre aux clients de rester sur la page actuelle ou de les rediriger vers une URL ou une page spécifique après avoir soumis le formulaire.
• Message de réussite:Afficher un message pour confirmer la soumission réussie.
• Message d'erreur:Afficher une alerte en cas d'erreur empêchant l'envoi du formulaire, comme des problèmes avec le système Shopify.

Créer un formulaire de contact à partir d'un modèle de la bibliothèque

Vous pouvez également créer un formulaire de contact en utilisant des modèles prédéfinis de la bibliothèque.

Étape 1: Clique sur le Onglet Section dans la barre latérale gauche et faites défiler jusqu'à Contact option.

Étape 2: Survolez Contact pour voir toutes les sections de contact prédéfinies de la bibliothèque GemPages, puis faites glisser et déposez celle que vous préférez dans la zone de conception.

Étape 3 : Vous pouvez le personnaliser à votre façon, ou simplement enregistrer et publier la page avec cette section de contact prédéfinie.