Contrôle de la conception

Portail des profils

Available in:v1.0v2.0

Key Benefits

Laisser les membres s'autogérer

Offrir aux membres une expérience transparente et conviviale. Les membres peuvent facilement mettre à jour les informations de leur profil, telles que leurs coordonnées, leurs préférences ou leurs informations personnelles, sans avoir à intervenir manuellement ou à contacter le service clientèle.

Des données précises sur les membres

Veillez à ce que les données des membres restent exactes et à jour en leur permettant de saisir ou de modifier directement leurs informations en cas de changement.

Comment intégrer un formulaire de profil avec Memberstack et Webflow

Voici trois façons différentes d'intégrer un formulaire de profil avec Memberstack et Webflow.

A. Copier un composant Webflow (2 min)

Cette méthode est la plus rapide et la plus recommandée. Nous avons des centaines de composants personnalisables que vous pouvez utiliser pour commencer.

1. Pick from over 100+ free components or start with an unstyled Profile form.

2. Copiez l'élément de formulaire et collez-le dans votre projet.

Tous les attributs et le code personnalisé dont vous avez besoin ont déjà été configurés pour vous.

B. Construire une page de profil à partir de zéro (6min)

Form One → Mise à jour des champs personnalisés

profil1.gif
  1. Ajoutez l'attribut data-ms-form="profile" à l'élément de formulaire.
  2. Ensuite, vous devrez concevoir les différents champs d'entrée de votre site web. Champs de nom, numéro de téléphone, bio, liens, etc.
  3. Vous devrez alors créer les champs personnalisés équivalents dans Memberstack. Voici un article pour vous aider à démarrer... Créer des champs personnalisés.
  4. Ajoutez les attributs data-ms-member="fieldID" appropriés à vos éléments de saisie.

Formulaire 2 → Mise à jour de l'adresse électronique

profil-email.gif
  1. Ajoutez l'attribut data-ms-form="email" à l'élément de formulaire.
  2. Ajoutez l'attribut data-ms-member="email" à un élément de saisie. Définissez le type sur "email".

💡 Chaque type de formulaire de profil peut se trouver sur sa propre page ou partager une page avec les autres. La mise en page est laissée à votre discrétion. Cependant, chaque formulaire doit avoir les bons attributs de données.

Formulaire trois → Mise à jour du mot de passe

mot_de_passe_de_profil.gif

Vous avez besoin des trois attributs de données suivants.

  • A l'attribut data-ms-form="password" de l'élément de formulaire.
  • A l'attribut data-ms-member="current-password" pour la saisie du mot de passe actuel des membres.
  • A l'attribut data-ms-member="new-password" pour le nouveau mot de passe du membre.

Formulaire quatre → Portail clients Stripe

profil_client_portail.gif

Nous avons un article qui explique le portail client Stripe et comment l'utiliser ici.

C. Utiliser le modèle de profil préconstruit (1min)

Étape 1 → Créez un lien ou un bouton de connexion sur votre site.

Étape 2 → Ajoutez l'attribut data-ms-modal="profile" à votre lien.