Dans cet article :
Voici un exemple de formulaire HTML modifié pour que le visiteur puisse sélectionner lui-même son ou ses groupes dans une liste de cases à cocher. Les indications en jaune sont des commentaires HTML. Ils sont là uniquement pour vous aider.
Notes importantes
- Prenez soin d'utiliser le code généré par notre outil, ou si vous copiez-coller le code ci-dessous, changez l'attribue value du champ ci_account (en rouge ci-dessous) pour le votre !
- Noter les ID et les noms des groupes que vous voulez utiliser.
- Si votre site utilise déjà jQuery, vous n'aurez peut-être pas besoin d'inclure le 1er script à l'étape 3.
- N'oubliez pas de tester votre formulaire !
Obtenir le ID de chacun de vos groupes
- Dans l'application, cliquez sur le menu
- Cliquez sur un groupe dans la liste
- Dans la barre d'adresse, vous devriez voir un chiffre : il s'agit de son ID
Exemple de code
<!-- 1) Ajouter id="cyberimpact_subscribe_form" sur le tag form -->
<form id="cyberimpact_subscribe_form" action="https://app.cyberimpact.com/optin" method="post" accept-charset="utf-8">
<fieldset>
<legend></legend>
<div>
<label for="ci_firstname">Prénom :</label>
<input type="text" id="ci_firstname" name="ci_firstname" maxlength="255"/>
</div>
<div>
<label for="ci_lastname">Nom :</label>
<input type="text" id="ci_lastname" name="ci_lastname" maxlength="255"/>
</div>
<div>
<label for="ci_email">Courriel :</label>
<input type="text" id="ci_email" name="ci_email" maxlength="255"/>
</div>
<!-- 2) Cette partie est à modifier : ajouter chacun des groupes cibles de cette manière (checkbox avec l'attribut value qui égale à l'ID du groupe) La classe "group_checkbox" est obligatoire pour que ça fonctionne. -->
<div>
<input type="checkbox" id="check_1" class="group_checkbox" value="20" />
<label for="check_1">Premier groupe</label>
</div>
<div>
<input type="checkbox" id="check_2" class="group_checkbox" value="21" />
<label for="check_2">Deuxième groupe</label>
</div>
<!-- Fin de la partie à ajouter pour les groupes en cases à cocher -->
<div style="display:block; visibility:hidden; height:1px;">
<input style="display:none;" type="text" id="ci_verification" name="ci_verification"/>
<input type="hidden" id="ci_groups" name="ci_groups" value=""/>
<input type="hidden" id="ci_account" name="ci_account" value="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"/>
<input type="hidden" id="ci_language" name="ci_language" value="fr_ca"/>
<input type="hidden" id="ci_sent_url" name="ci_sent_url" value=""/>
<input type="hidden" id="ci_error_url" name="ci_error_url" value=""/>
<input type="hidden" id="ci_confirm_url" name="ci_confirm_url" value=""/>
</div>
<input id="submit_cyberimpact_subscribe" type="submit" value="Envoyez"/>
<div style="color:#aaa; font-size:10px;">
<a style="color:#aaa; font- size:10px;text-decoration:none;" href="http:// www.cyberimpact.com">Email marketing</a>
<a style="color:#aaa; font- size:10px;text-decoration:none;" href="http:// www.cyberimpact.com">Cyberimpact</a>
</div>
</fieldset>
</form>
<!-- 3) Ces deux scripts doivent être ajoutés afin de faire fonctionner l'abonnement à des groupes à l'aide des checkbox -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#submit_cyberimpact_subscribe').click(function(e){
e.preventDefault();
var groups = $('.group_checkbox:checked').map(function(){ return $(this).val(); }).get().join();
$('#ci_groups').val(groups);
if (groups == '') {
alert('Vous devez sélectionner au moins un groupe');
} else {
$('#cyberimpact_subscribe_form').submit();
}
});
});
</script>