Formulaire d’inscription en un clic

La balise #FORMULAIRE_INSCRIVEZ_VOUS propose un formulaire d’inscription SPIP-Listes très léger : 1 champ pour l’adresse mail.

Ce formulaire proposé par SPIP-Listes 1.9.3 utilise le mode CVT et ne demande que peu de place sur l’écran (par défaut : 140 pixels de large). il a été conçu pour s’incrustrer sans trop de difficultés dans un menu de navigation (in-rubriques par exemple).

Quelques copies d’écran illustrant le scénario d’inscription :

Le formulaire d'inscription
Le formulaire d’inscription
Si erreur de saisie, message d'alerte
Si erreur de saisie, message d’alerte
Le message de confirmation
Le message de confirmation

Pour en savoir plus sur le mode CVT, vous pouvez consulter l’article Formulaires CVT par l’exemple sur spip.net.

A noter: si vous êtes identifié (session ouverte), le formulaire n’apparaît pas.

Installation des feuilles de styles

A minima, il faut ajouter l’appel à la feuille de styles dédiée à ce formulaire. A l’avenir, toutes les feuilles de styles seront probablement assemblées dans un seul fichier.

Personnaliser le formulaire

Vous pouvez personnaliser aussi bien le contenu que la présentation.

Pour personnaliser le contenu, recopiez le script formulaires/inscrivez_vous.html dans votre répertoire de squelettes et adaptez-le à vos besoins.

Pour personnaliser la présentation, recopiez le fichier inscrivez_vous.css dans votre répertoire de squelettes et adaptez-le à vos besoins.

N’oubliez-pas d’inclure à votre inc-head l’appel de la feuille de styles nécessaire, ou d’inclure le contenu de ce fichier directement dans votre feuille de styles préférée.

Exemple d’utilisation

Le squelette d’exemple inscrivez_vous.html situé dans le répertoire du plugin est à votre disposition. Pour appeler ce squelette, utilisez l’appel de page, un url du style http://<foo.bar>/?page=inscrivez_vous.

updated on 9 February 2019

Discussion

5 discussions

  • Bonjour,
    Pour afficher l’inscription à la newsletter (spip 3 , evaweb), j’ai créé une noisette : #FORMULAIRE_NEWSLETTER_SUBSCRIBE. #

    Cela ne semble fonctionner ?
    N’est-ce pas ainsi que l’on procède ?
    Merci,
    cordialement.
    Alain B.

    Reply to this message

  • Bonjour

    je n’arrive pas à mettre en place ce formulaire

    pouvez vous expliquer plus en détail la procédure à suivre, j’aimerai le mettre sous la liste des rubriques à gauches. Cela dans le but que les gens puissent laisser leur mail afin d’être inscrit à notre newsletter.

    Merci beaucoup

    Reply to this message

  • Bonjour tout le monde,
    J’ai une seule liste de diffusion et j’utilise #FORMULAIRE_INSCRIVEZ_VOUS l’affichage est correcte, mais l’inscription ne se fait pas....Je m’attendais a ce que l’adresse email inscrit va directement dans la liste de diffusion et c’est pas le cas....Est ce que quelqu’un peut m’aider a y voir clair?? Merci de votre aide

    Reply to this message

  • 9

    Hello Paladin

    lors de la mise en place du formulaire j’ai un petit souci

    Inscription Newsletter

    public|spip|ecrire:form_pet_votre_email

    et la repetition de adresse@foo.bar

    merci

    • Besoin de précision. Je ne comprends pas le message.
      Un ficher css adapté ?
      Ceci dit, il se fait tard ;-)

    • bon vu l’heure

      une URL pour faire simple avec #FORMULAIRE_INSCRIVEZ_VOUS dans la colonne extra

      voilà

    • Pour le bout de texte, c’est corrigé.
      Pour l’affichage, il manque la feuille de style.

    • DSL mais la plus d’affichage ,
      suite a mise a jour
      U /var/www/mutusarka/extensions/spip-listes_1_9_3/lang/spiplistes_fr.php
      U /var/www/mutusarka/extensions/spip-listes_1_9_3/formulaires/inscrivez_vous.html
      U /var/www/mutusarka/extensions/spip-listes_1_9_3/plugin.xml

    • A noter : si vous êtes identifié (session ouverte), le formulaire n’apparaît pas.

      Se déconnecter, ou utiliser un autre navigateur en //

      Bon courage.

    • Bon Bon j’avance doucement .......... ; le formulaire s’affiche

      • Par contre ou est le bouton “valider” pour l’inscription
      • Comment centrer “adresse@foo.bar” dans la css, je n’ai pas trouvé

      merci pour votre aide

    • Il faut jouer avec le css.
      Exemple:

      #spiplistes-inscrivez-vous p.invisible {
      position:relative;
      top:0;
      }

      ou supprimer la classe «invisible» dans une version perso du formulaire.

    • Bon et bien merci , je suis arrivé a quelque chose qui me convient, j’ai du mettre un

      • <center>#FORMULAIRE_INSCRIVEZ_VOUS

      @micalement

    Reply to this message

  • 2

    Il ne manque pas le bouton (pour valider le formulaire) ?

    • Le submit ?
      Il y est. Caché par un overflow.
      Une entrée validée par CR permet de la valider.
      De mémoire, c’est valide sur tous les navigateurs.

    • Dans le cas d’un INPUT text

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom