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
Si erreur de saisie, message d’alerte
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.

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.

    Répondre à ce 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

    Répondre à ce 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

    Répondre à ce 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

    Répondre à ce 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

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom