SalsaScript, Javascript and CSS to add optional fields to a donation page. As a default, optional fields are added as a fieldset below any other fields.

donation_optional_groups.html

<!-- BEGIN Add optional groups to a donation page. --> 
<?
// @see https://salsasupport.zendesk.com/entries/69725374 for details.

// Configure the groups for this solution.
var groupsKeys = "93070,93071,93072,93926";
// End of configurable parts.

var groups = DB.getObjects('groups', {
    conditions: [new Condition('groups_KEY', 'IN', groupsKeys)],
    includes: 'groups_KEY,Group_Name,Description'.split(',')
}).map(function(g) {
    delete g.key;
    delete g.object;
    return g;
});
?>

<style type="text/css">
    /* CSS rules to format the newly inserted optional groups. 
       Also may affect other parts of the donation page. */
    .salsa legend {
        font-size: 13pt !important;
    }
    #optional-groups {
        color: darkblue !important;
        font-family: Verdana,Tahoma,Helvetica,sans;
        font-size: 1.2em !important;
        font-weight: normal !important;
    }
    li.salsa-optional-group {
        list-style-type: none;
    }
    ul.salsa-optional-groups {
        padding-left: 0px !important;
    }
   .group-title { font-weight: bold; }
   .group-description { font-style: italic; }
</style>
<!-- This script uses the data from Salsascript and the template to create a
  fieldset of optional groups.  The fieldset is placed into the donation page
  after the personal  information. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js"></script>
<script type="text/javascript">
$(function() {
    if ($('#need-optional-groups').length != 0) {
        var groups = <?= (groups || []).toJSON() ?>;
        if (groups != null & groups.length > 0) {
            var optionalGroups = Hogan
                .compile($('#groups-template').html())
                .render({ groups: groups });
            $('#personal_information').after(optionalGroups);
        }
    }
})
function optionalClick(elem) {
    elem.value = (elem != null && elem.checked) ? elem.getAttribute('alt-value') : 0;
}
</script>
<div style="display: none;" id="groups-template">
   <fieldset id="optional-groups">
       <legend>I'm particularly interested in...</legend>
       <ul class="salsa-optional-groups">
           {{#groups}}
           <li class="salsa-optional-group">
               <input name="link" value="groups" type="hidden">
               <input id="add_to_groups_KEY{{groups_KEY}}_checkbox" value="0" alt-value="{{groups_KEY}}" name="linkKey" type="checkbox" onclick="optionalClick(this); ">
               <label for="add_to_groups_KEY{{groups_KEY}}_checkbox">
                   <span class="group-title">{{Group_Name}}</span>
                   {{#Description}}
                   <span class="group-separator">-</span>
                   <span class="group-description">{{Description}}</span>
                   {{/Description}}
               </label>
           </li>
           {{/groups}}
       </ul>
   </fieldset>
</div>
<!-- END Add optional groups to a donation page. -->