Sélectionner une page


Photo de profil de Silvestar Bistrović Hacker Noon

@ku @ 5j7 et c9jNY et Y4y78vGSilvestar Bistrović

Ingénieur Web intrépide, développeur CSS, passionné de JAMstack et WordPress

Récemment, j’ai voulu ajouter un formulaire à plusieurs niveaux à mon site. Étant donné que mon site fonctionne sur Hexo, qui est un générateur de page statique, j’avais des doutes sur la façon d’accomplir cette tâche. J’avais déjà un formulaire statique sur mon site Web et je ne voulais pas passer trop de temps à développer des fonctionnalités telles que les étapes, la logique masquer / afficher ou la validation.

J’ai vraiment apprécié ça Kwes propose désormais une fonction de formulaire à plusieurs niveaux. Avant de vous dire comment je l’ai fait, jetons un coup d’œil à ce qu’est un formulaire à plusieurs étapes, parfois appelé formulaire à plusieurs pages.

Un formulaire multi-niveaux

Une forme à plusieurs niveaux est une forme longue qui est brisée en morceaux. La raison en est de faciliter le remplissage du formulaire. Chaque étape présente des entrées groupées qui sont liées les unes aux autres, de sorte que les utilisateurs n’ont pas peur de la longueur du formulaire. Il peut être plus pratique pour les utilisateurs de remplir les informations étape par étape, car leurs pensées devraient traiter moins de champs à ce stade.

Vous avez peut-être vu des formulaires à plusieurs niveaux à la caisse ou sur les formulaires d’expédition. Les formulaires en plusieurs étapes sont également utilisés pour les assistants, par ex. B. pour les formulaires d’enregistrement et, plus récemment, des formulaires d’enregistrement à plusieurs niveaux sont apparus. Ce ne sont que des scénarios courants lorsqu’il est destiné à être utilisé, mais toute forme plus longue peut être divisée en plusieurs parties.

Avant de passer à un formulaire à plusieurs niveaux, vous souhaiterez peut-être exécuter des tests A / B pour vous assurer que votre taux de conversion ne diminue pas.

Le taux de conversion est l’un des principaux avantages d’un formulaire à plusieurs niveaux. On pense que les formulaires à plusieurs niveaux ont un meilleur taux de conversion. Les autres avantages comprennent les premières impressions, qui sont moins accablantes pour les utilisateurs, et les barres de progression qui encouragent les utilisateurs à continuer avec le formulaire.

Tous ces services doivent être utilisés sous réserve. Sans chiffres réels, vous ne pouvez pas le savoir avec certitude. Un formulaire en une seule étape avec de nombreux champs de saisie est souvent considéré comme un obstacle important pour la plupart des utilisateurs. En guise de compromis, réduisez le nombre d’entrées, ce qui peut ne pas être idéal.

Ajout d’un formulaire à plusieurs niveaux avec Kwes

Avec la documentation Kwes, il est assez facile de suivre et de créer un formulaire à plusieurs niveaux.

Avant cela, rafraîchissons nos souvenirs comment ajouter la forme statique avec kwes::

Voici à quoi ressemble le code maintenant:

<html>
  <body>
    <div class="kwes-form">
      <form method="POST" action="path/to/kwes">
        // form code
      </form>
    </div>
    <script src="https://kwes.io/js/kwes.js"></script>
  </body>
</html>

Pour activer un formulaire à plusieurs niveaux, j’ai ajouté que

multi-step

Attribut à l’élément de formulaire.

Je devais ajouter

true

Valeur pour le

multi-step

Attribut pour rendre mon linter html heureux.

Ensuite, j’ai divisé le formulaire en étapes en enveloppant les entrées associées avec

form-step

Éléments. C’est ça! Pour créer un formulaire à plusieurs niveaux à l’aide de Kwes, tout ce que vous avez à faire est d’ajouter un div wrapper unique à chaque étape. Je n’ai jamais pensé que ce serait aussi simple.

Mon formulaire ne comporte que deux étapes, donc je n’en ai que deux

form-step

Éléments. Dans la première étape, je pose une question sur le type de contact et dans l’étape suivante, je collecte les informations de contact.

<div class="kwes-form">
  <form method="POST" action="path/to/kwes" multistep="true">
    <form-step>
      // form code
    </form-step>
    <form-step>
      // form code
    </form-step>
  </form>
</div>

Bien sûr, ce n’est pas tout. Kwes regorge de fonctionnalités impressionnantes. Ce sont ceux que j’ai mis sur mon formulaire:

En-têtes personnalisés

Kwes propose d’ajouter des en-têtes personnalisés à chaque étape – un titre de l’étape en cours. Il existe deux types d’en-têtes: simples et complexes.

Des en-têtes simples sont utilisés pour les en-têtes de texte. J’ai ajouté des titres simples à mon formulaire.

<form-step heading="1. Contact type">
  // form code
</form-step>
<form-step heading="2. Contact information">
  // form code
</form-step>

Si vous souhaitez ajouter des symboles, des graphiques ou autre chose que du texte de titre, vous pouvez utiliser un en-tête complexe. Tout le contenu des en-têtes personnalisés doit être ajouté à l’intérieur

<div slot="heading"></div>

Élément. Il est conseillé de placer cet élément en tant que premier enfant du

form-step

Élément.

Style personnalisé

L’ajout d’un style personnalisé aux formulaires Kwes est assez simple. Vous pouvez utiliser des cours avec

kw-

Préfixe pour ajouter un style personnalisé.

Par exemple, vous pouvez utiliser

kw-multistep-footer

Idéal pour personnaliser le pied de page de la section étape comme je l’ai fait sur mon site.

camouflage

j’ai utilisé la technique du camouflage fourni par Kwes pour masquer le formulaire non compilé. Cela signifie que le formulaire ne sera visible qu’une fois compilé à partir du fichier JavaScript Kwes. Pour ce faire, ajoutez

v-cloak

Attribut au

kwes-form

Élément Wrapper, puis utilisez l’extrait de code CSS suivant pour masquer le formulaire:

[v-cloak] {
  display: none;
}

Basculement de la visibilité logique

Une autre fonctionnalité intéressante de Kwes Form Builder est la possibilité de basculer la visibilité d’un champ de saisie en fonction d’autres valeurs de champ. Ce comportement logique de fondu en entrée et en sortie était ce dont j’avais besoin pour créer dynamiquement la deuxième étape. La visibilité est obtenue en ajoutant

kw-show

Attribut à l’élément. Dans mon cas, je masque les champs liés au mentorat lorsque le type de contact est Général.

<div kw-show="fields.step == 'Mentoring'">...</div>

Barre de progression SVG animée

Les barres de progression aident souvent les utilisateurs à comprendre le nombre d’étapes restantes à soumettre. Puisque cet élément n’est utilisé que comme indicateur visuel, j’ai décidé de le faire un petit SVG animé sur clic. L’animation est une animation CSS du trait du chemin SVG.

Voici le formulaire complet, y compris le code SVG et JavaScript:

<div class="kwes-form form" v-cloak="true">
  <svg class="steps" viewBox="0 0 850 250" xmlns="http://www.w3.org/2000/svg">
    <path d="m225 125c0 50-50 100-100 100s-100-50-100-100 50-100 100-100 100 50 100 100h400c0-50 50-100 100-100s100 50 100 100-50 100-100 100-100-50-100-100" fill="none" stroke="#f5f5f5" stroke-linecap="round" stroke-linejoin="round" stroke-width="50"/>
    <path class="steps__path" d="m225 125c0 50-50 100-100 100s-100-50-100-100 50-100 100-100 100 50 100 100h400c0-50 50-100 100-100s100 50 100 100-50 100-100 100-100-50-100-100" fill="none" stroke="#12e09f" stroke-linecap="round" stroke-linejoin="round" stroke-width="50"/>
  </svg>
  <form method="POST" action="path/to/kwes" multistep="true">
    <form-step heading="1. Contact type">
      <label class="radio">What kind of inquiry are you interested in?</label>
      <div class="kw-radio-group">
        <input id="General" type="radio" name="step" value="General" label="General" checked="checked" />
        <input id="Mentoring" type="radio" name="step" value="Mentoring" label="Mentoring" />
    </div>
    </form-step>
    <form-step heading="2. Contact information">
      <div kw-show="fields.step == 'Mentoring'">
        <label class="radio">Are you interested in career mentoring or technical mentoring?</label>
        <div class="kw-radio-group">
          <input id="Career" type="radio" name="mentoring" value="Career" label="Career" checked="checked" />
          <input id="Technical" type="radio" name="mentoring" value="Technical" label="Technical" />
        </div>
        <div class="desc">
          <p><small>Career mentoring means I help you make decisions regarding your career.</small></p>
          <p><small>Technical mentoring means I help you gain new skills or improve the current skill level.</small></p>
        </div>
      </div>
      <label for="Name">What is your name?</label>
      <input id="Name" type="text" name="name" rules="required" />
      <label for="Email">Please tell me your email address<small>(I would use it only for direct communication)</small>.</label>
      <input id="Email" type="email" name="email" rules="required|email|max:255" />
      <div kw-show="fields.step == 'Mentoring'">
        <label for="Note">Tell me why I should mentor you?</label>
      </div>
      <div kw-show="fields.step != 'Mentoring'">
        <label for="Note">What is your message?</label>
      </div>
      <textarea id="Note" name="note" rules="required" rows="6"></textarea>
      <div kw-show="fields.mentoring == 'Technical'">
        <label for="Note2">Tell me which skills do you want to aquire or approve?</label>
        <textarea id="Note2" name="note2" rules="required_if:mentoring,Technical" rows="6"></textarea>
      </div>
    </form-step>
  </form>
  <script>
  document.addEventListener('click', function (e) {
    for (var target = e.target; target && target !== this; target = target.parentNode) {
      if (target.matches('.kw-multistep-button')) {
        var $form = document.querySelector('.form');

        if (target.classList.contains('kw-multistep-button-next')) {
          $form.classList.remove('step1');
          $form.classList.add('step2');
        }

        if (target.classList.contains('kw-multistep-button-previous')) {
          $form.classList.remove('step2');
          $form.classList.add('step1');
        }

        break;
      }
    }
  }, false);
  </script>
</div>

Conclusion

Vous pouvez trouver le formulaire de fonction complet sur le mien Page de contact.

J’ai remarqué un avantage supplémentaire – beaucoup moins de spam. Les autres avantages de l’ajout d’un formulaire en plusieurs étapes avec Kwes incluent:

  • Je n’ai pas eu à passer trop de temps à concevoir
  • Je n’ai pas eu à passer trop de temps sur la validation, et
  • Je n’ai pas eu à passer trop de temps à développer.

Avec Kwes, tout est si simple et fonctionne comme prévu. Tu devrais essayer.

Mots clés

Rejoignez Hacker Noon

Créez votre compte gratuit pour débloquer votre expérience de lecture personnalisée.



Source link

Recent Posts