Exemple de code : modifier la sélection des groupes

Dernière mise à jour:

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

  1. Dans l'application, cliquez sur le menu Groupes
  2. Cliquez sur un groupe dans la liste
  3. 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>

Haut