Code example: showing groups as checkboxes

Last update:

In this article:

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="https://app.cyberimpact.com/optin" method="post" accept-charset="utf-8">
  <fieldset>
    <legend></legend>
    <div>
      <label for="ci_firstname">First name:</label>
      <input type="text" id="ci_firstname" name="ci_firstname" maxlength="255"/>
    </div>
    <div>
      <label for="ci_lastname">Last name:</label>
      <input type="text" id="ci_lastname" name="ci_lastname" maxlength="255"/>
    </div>
    <div>
      <label for="ci_email">Email:</label>
      <input type="text" id="ci_email" name="ci_email" maxlength="255"/>
    </div>
    <!-- 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. -->
    <div>
      <input type="checkbox" id="check_1" class="group_checkbox" value="20" />
      <label for="check_1">First group</label>
    </div>
    <div>
      <input type="checkbox" id="check_2" class="group_checkbox" value="21" />
      <label for="check_2">Second group</label>
    </div>
    <!-- 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=""/>
    </div>
    <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:// 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) These two scripts must be added in order to make the subscription work using the checkboxes -->
<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('You must select at least one group');
    } else {
      $('#cyberimpact_subscribe_form').submit();
    }
  });
});
</script>

Top