Code example: showing groups as checkboxes

Here is an example of an HTML form modified so that the visitor can select their own group(s) from a list of checkboxes. The indications in yellow are HTML comments. They are only there to help you.


Important notes

  • Use the code generated by our tool, or if you copy and paste the code below, change the value attribute of the ci_account field (in red below) to your own.
  • Write down the IDs and names of the groups you want to use.
  • If your site is already using jQuery, you may not need to include the 1st script in step 3.
  • Don't forget to test your form!


Finding the ID of your groups

  1. In the main application menu, click on Groups
  2. Click on a group in the list to open its details page
  3. In the browser's address bar, you should see a number: this is his ID


Code sample

<!-- 1) Add id="cyberimpact_subscribe_form" on the form tag -->
<form id="cyberimpact_subscribe_form" action="" method="post" accept-charset="utf-8">
      <label for="ci_firstname">First name:</label>
      <input type="text" id="ci_firstname" name="ci_firstname" maxlength="255"/>
      <label for="ci_lastname">Last name:</label>
      <input type="text" id="ci_lastname" name="ci_lastname" maxlength="255"/>
      <label for="ci_email">Email:</label>
      <input type="text" id="ci_email" name="ci_email" maxlength="255"/>
    <!-- 2) This part needs to be modified: add each group in the same way (as a checkbox with a value attribute that is the same as the group's ID) The "group_checkbox" class is also needed for the code to work. -->
      <input type="checkbox" id="check_1" class="group_checkbox" value="20" />
      <label for="check_1">First group</label>
      <input type="checkbox" id="check_2" class="group_checkbox" value="21" />
      <label for="check_2">Second group</label>
    <!-- End of the section to add to display checkbox groups -->
    <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="en_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=""/>
    <input id="submit_cyberimpact_subscribe" type="submit" value="Send"/>
    <div style="color:#aaa; font-size:10px;">
      <a style="color:#aaa; font-size:10px;text-decoration:none;" href="http://">Email marketing</a>
      <a style="color:#aaa; font-size:10px;text-decoration:none;" href="http://">Cyberimpact</a>
<!-- 3) These two scripts must be added in order to make the subscription work using the checkboxes -->
<script type="text/javascript" src="//"></script>
<script type="text/javascript">
    var groups = $('.group_checkbox:checked').map(function(){ return $(this).val(); }).get().join();
    if (groups == '') {
      alert('You must select at least one group');
    } else {