Sendinblue et popup
Fermé
gipere33
-
12 nov. 2019 à 17:26
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 - 13 nov. 2019 à 15:56
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 - 13 nov. 2019 à 15:56
A voir également:
- Popup sendinblue
- Popup blocker - Télécharger - Outils pour navigateurs
- Firefox autoriser popup - Guide
- Real popup - Télécharger - Divers Réseau & Wi-Fi
- Popup cookies - Guide
- Php popup message ✓ - Forum PHP
1 réponse
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 451
Modifié le 12 nov. 2019 à 18:04
Modifié le 12 nov. 2019 à 18:04
Bonjour,
Je ne sais pas si c'est possible avec un formulaire Sendinblue, sur un de mes sites, j'ai intégré un formulaire Google-Forms avec un iframe à une fenêtre modale.
Il faut du CSS :
Puis du HTML :
J'ai oublié, il faut mettre un lien pour afficher la fenêtre :
Je ne sais pas si c'est possible avec un formulaire Sendinblue, sur un de mes sites, j'ai intégré un formulaire Google-Forms avec un iframe à une fenêtre modale.
Il faut du CSS :
/* MODAL */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.droite {
float:right;
}
.oModal {
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.oModal:target {
opacity:1;
pointer-events: auto;
}
.oModal:target > div {
margin: 10% auto;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.oModal > div {
max-width: 600px;
position: relative;
margin: 1% auto;
padding: 8px 8px 8px 8px;
border-radius: 5px;
background: #eee;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.oModal > div header,.oModal > div footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
.oModal .footer {
border:none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
.oModal > div h2 {
margin:0;
}
.oModal > div .btn {
float:right;
}
.oModal > div section,.oModal > div > header, .oModal > div > footer {
padding:15px;
}
a.bouton_submit {
color: #FFFFFF;
}
/* MODAL */
Puis du HTML :
<div id="formulaire" class="oModal">
<div>
<header>
<a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
<h3 style="text-align: center;">Formulaire</h3>
</header>
<section>
<iframe src="" > </iframe>
</section>
<footer class="cf">
<a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
</footer>
</div>
</div>
J'ai oublié, il faut mettre un lien pour afficher la fenêtre :
<a href="#formulaire">Formulaire</a>
12 nov. 2019 à 21:51
Merci pour votre réponse je test je poste une réponse demain. Très belle soirée a vous.
13 nov. 2019 à 07:00
je pense que ca marche mais le popup ne s'affiche pas. Ou faut il mettre le lien pour qu'il s'affiche automatiquement aprés 5 secondes?
Merci
13 nov. 2019 à 07:07
Modifié le 13 nov. 2019 à 07:26
Si tu veux que l'affichage de la fenêtre modale soit automatique, il faut, soit utiliser du JavaScript, soit utiliser la balise meta refresh de cette manière :
Balise à placer dans la partie <head> </head> de ta page.
Personnellement, je préfère le lien sur lequel il faut cliquer volontairement.
13 nov. 2019 à 07:37
Pour ce qui est du CSS, tu peux l'ajouter directement dans ta page entre les balises <style type= "text/css" > </style>