[javascript] Formulaire newsletter javascript

Fermé
Pomme87 - Modifié par Pomme87 le 23/06/2011 à 20:53
 Pomme87 - 24 juin 2011 à 12:47
Bonsoir,
En fait j'ai pas beaucoup de connaissances en javascript, mais il y a une chose que j'aimerais faire.


C'est un bloc, où se trouve le formulaire d'inscription à la newsletter, qui s'affiche en position fixe sur ma page d'accueil. Ce bloc devra s'afficher qu'une seule fois et disparaître quand l'internaute clique sur fermer.


D'après mes connaissances, il faudrait stocker l'information via un cookie sur le navigateur de l'internaute et utiliser les évènements CSS pour faire disparaître le bloc (position en dehors de la fenêtre ou display none, par exemple).


Cependant, je ne sais pas utiliser les évènements, ni la façon de gérer les cookie et encore moins la modification CSS via javascript.


Quelqu'un pourrait-il m'aider pour le code ou existe-t-il un script tout prêt sur le web (aweber en a mais c'est payant ...) ?


Un exemple de formulaire sur http://www.nationalgeographic.com/
Le site en question, qui accueillera le futur formulaire : http://www.snow-station.ch/


Cordialement

4 réponses

CrazyWorld Messages postés 326 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 16 février 2013 41
Modifié par CrazyWorld le 23/06/2011 à 21:38
Creation d' un cookie PHP
setcookie("NomDuCookie", $valeur, time()+3600);  /* expire dans 1 heure */ 


récupérer le contenu d' un cookie
echo $_COOKIE["NomDuCookie"];


Modifier le CSS avec du javascript
onclick="document.getElementById('NewLetter').style.display = 'none';"


Exemple de zone pour mettre le formulaire
<div id="NewLetter" style="width:300px; position:fixed; top: 209px; left:35%; background-color:#000000;vertical-align:top;float:right;padding-top:-15px"> 
<a href="javascript:void(0);" onclick="document.getElementById('NewLetter').style.display = 'none';" style="margin-top:-10px;font-size:12px;">Fermer [X]</a><br /> 
!!! Mettre le code du formulaire ici!!! 
</div> 


Je pense que tu as tous les ingredients pour faire ce que tu veux.
A toi de faire ta soupe avec :P
1
TipTop nikel !!!

donc, si je mélange ça fait :

<script type="text/javascript">
if ($valeur == "cacher")
{
document.getElementById('NewLetter').style.display = 'none';
}
</script>

<div id="NewLetter" style="width:300px; position:fixed; top: 209px; left:35%; background-color:#000000;vertical-align:top;float:right;padding-top:-15px">
<a href="javascript:void(0);" onclick="document.getElementById('NewLetter').style.display = 'none'; setcookie("cacher", $valeur, time()+31536000);" style="margin-top:-10px;font-size:12px;">Fermer [X]</a><br />
<!-- mon formulaire -->
</div>


Maintenant, si j'ai bien compris, avec ce script mon formulaire sera caché seulement si l'utilisateur clique sur fermer, pendant une année ?
0
CrazyWorld Messages postés 326 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 16 février 2013 41
24 juin 2011 à 12:14
setcookie("cacher", $valeur, time()+31536000);
c' est du php, tu ne peux pas le mettre dans du javascript comme ca
Mais je pense que tu ne deverais pas faire une vérification par cookie puisque si un utilisateur souhaite s' abonner ulterieurement il ne pourra en principe pas afficher le formulaire,
tu deverais mettre un lien permanent "s' abonner à la New Letter" du style
<a href="javascript:void(0);" onclick="document.getElementById('NewLetter').style.display = 'block';">s' abonner à la New Letter</a>

et plus loin mettre dans ton code mettre le formulaire en masqué au chargement de la page

<div id="NewLetter" style="width:300px; position:fixed; top: 209px; left:35%; background-color:#000000;vertical-align:top;float:right;padding-top:-15px"> 
<a href="javascript:void(0);" onclick="document.getElementById('NewLetter').style.display = 'none';" style="margin-top:-10px;font-size:12px;">Fermer [X]</a><br /> 
!!! Mettre le code du formulaire ici!!! 
</div> 
0
En fait l'idée c'est que le site en question va bientôt recevoir pleins de visiteurs (on sera présent dans une assez grande manifestation...).

Alors, le formulaire javascript (un des nombreux formulaire éparpillés sur le site) apparaîtra une seule fois, pour que les intéressés (par coup d'humeur) s'inscrivent à la newsletter.

Pour pas les déranger plus, le formulaire disparaîtra de l'avant plan. C'est pour ça que je veux utiliser le cookie.
0