Solution to add reason buttons to an unsubscribe page. The usual options that you see on unsubscribe pages. A script puts the selected reasons and the comment into the "Reason" field in an unsubscribe page.

unsub_reason_checkbox_config.html

<!-- This is where you configure the text that goes before the checkbox reasons.
     Replace the content of the <div> tag that follows.  HTML is allowed. -->
<div style="display:none": id="reason-preable">
     You have been unsubscribed from the our organization's email list. 
     Please take a moment to tell us why you no longer wish to hear from us:
</div>
<!-- This is where you configure the reasons that go inthe checkboxes.
     These contents go into the Footer in your unsubscribe page.  Edit
     the reasons and save the unsubscribe page.  Here are the rules.
     * Separate the reasons with commas.
     * Put the reasons on different lines if you'd like.
     * Text only. -->
<div style="display:none;" id="reason-list">
    I'd like to receive fewer emails,
    I don’t like the content,
    I’m not interested in your organization,
    I never signed up for this list
</div>

unsub_reason_checkbox_template.html

<!-- BEGIN Add reason checkboxes to unsubscribe pages. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script type="text/javascript">
    // Solution to add reason buttons to an unsubscribe page.  This is the part that goes
    // into your template.
    document.addEventListener('DOMContentLoaded', function () {
        if (!RegExp('/unsubscribe/public/index.sjs').test(window.location.href)) { return; }
        var reasonListContainer = document.querySelector('#reason-list');
        if (reasonListContainer == null) { return; }

        // Format the list o' reasons as HTML.
        var reasonList = reasonListContainer.innerHTML
            .split(',')
            .map(function(t) { return t.trim(); })
        if (reasonList.length == 0) { return; }
        var unsubDetails = document.querySelector('#unsub-details');
        var preamble = document.querySelector('#reason-preamble').innerHTML;
        var text = Mustache.render(unsubDetails.innerHTML, {preamble: preamble, reasonList: reasonList});
        unsubDetails.innerHTML = text;
        unsubDetails.style.display = "block";

        // Move the unsub's "reason" field into the new structure.
        var e = document.querySelector('#why-unsubscribe');
        if (e != null) {
            var parent = e.parentNode;
            var target = document.querySelector('#reason-wrapper');
            target.appendChild(e);
            parent.parentNode.removeChild(parent);
        }

        // Add a submit listener to put all of the checkboxes, and the comment,
        // into a single hidden text field.  It replaces unsubscribe.reason in
        // this form.
        var form = document.querySelector('form[name=unsubscribedata]');
        form.addEventListener('submit', function () {
            var textArea = document.querySelector('textarea[name="reason"]');
            var reasonText = textArea.value;
            var reason = document.createElement('textarea');
            reason.name = 'reason';
            reason.style.display="none";
            var checkboxTexts = Array.from(document.querySelectorAll('#unsub-details input[type=checkbox]:checked'))
                .map(function(e) { return e.value; })
                .join(', ');
            reason.value = checkboxTexts + ', Comment: "' + reasonText + '"';
            // Rename all of the 'reason' fields so that they won't confuse the unsub processor.
            Array.from(document.querySelectorAll('*[name=reason]')).forEach(function(e) { e.name = 'old-' + e.name; });
            form.appendChild(reason);
            return true;
        });

        // Salsa disables all of the checkboxes on the unsub page.  This will enable the reason checkboxes.
        Array.from(document.querySelectorAll('#unsub-details input[type=checkbox]')).forEach(e=>{e.removeAttribute('disabled')});
    })
</script>
<style type="text/css">
    .unsub-preamble {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 1.1em;
    }
</style>
<fieldset style="display: none;" id="unsub-details">
    <legend>Please let us know why you are leaving</legend>
    <div class="formRow unsub-preamble">
    {{preamble}}
    </div>
    {{#reasonList}}
    <div class="formRow">
        <input type="checkbox" name="reason" value="{{.}}" />
        <label>{{.}}</label>
    </div>
    {{/reasonList}}
    <div class="formRow" id="reason-wrapper">
    </div>
</fieldset>
<!-- END Add reason checkboxes to unsubscribe pages. -->

unsub_reason_script.js

    // Solution to add reason buttons to an unsubscribe page.  This is the part that goes
    // into your template.
    document.addEventListener('DOMContentLoaded', function () {
        if (!RegExp('/unsubscribe/public/index.sjs').test(window.location.href)) { return; }
        var reasonListContainer = document.querySelector('#reason-list');
        if (reasonListContainer == null) { return; }
        // Format the list o' reasons as HTML.
        var reasonList = reasonListContainer.innerHTML
            .split(',')
            .map(function(t) { return t.trim(); })
        if (reasonList.length == 0) { return; }
        var unsubDetails = document.querySelector('#unsub-details');
        var preamble = document.querySelector('#reason-preamble').innerHTML;
        var text = Mustache.render(unsubDetails.innerHTML, {preamble: preamble, reasonList: reasonList});
        unsubDetails.innerHTML = text;
        unsubDetails.style.display = "block";
        // Move the unsub's "reason" field into the new structure.
        var e = document.querySelector('#why-unsubscribe');
        if (e != null) {
            var parent = e.parentNode;
            var target = document.querySelector('#reason-wrapper');
            target.appendChild(e);
            parent.parentNode.removeChild(parent);
        }
        // Add a submit listener to put all of the checkboxes, and the comment,
        // into a single hidden text field.  It replaces unsubscribe.reason in
        // this form.
        var form = document.querySelector('form[name=unsubscribedata]');
        form.addEventListener('submit', function () {
            var textArea = document.querySelector('textarea[name="reason"]');
            var reasonText = textArea.value;
            var reason = document.createElement('textarea');
            reason.name = 'reason';
            reason.style.display="none";
            var checkboxTexts = Array.from(document.querySelectorAll('#unsub-details input[type=checkbox]:checked'))
                .map(function(e) { return e.value; })
                .join(', ');
            reason.value = checkboxTexts + ', Comment: "' + reasonText + '"';
            // Rename all of the 'reason' fields so that they won't confuse the unsub processor.
            Array.from(document.querySelectorAll('*[name=reason]')).forEach(function(e) { e.name = 'old-' + e.name; });
            form.appendChild(reason);
            return true;
        });
        // Salsa disables all of the checkboxes on the unsub page.  This will enable the reason checkboxes.
        Array.from(document.querySelectorAll('#unsub-details input[type=checkbox]')).forEach(e=>{e.removeAttribute('disabled')});
    })