Solution to add the "missing" supporter_volunteeer fields to a signup page.

volunteer_supporter_info.html

 <!-- BEGIN add detailed volunteer info to signup page. -->
<fieldset id="volunteer-info">
    <legend>Volunteer information</legend>
    <div class="formRow">
        <label for="role">Role</label>
        <select id="role" name="Role">
            <option value="General Volunteer" checked>General Volunteer</option>
            <option value="Ground Pounder">Ground Pounder</option>
            <option value="Mentor">Mentor</option>
            <option value="Captain">Captain</option>
            <option value="Local Manager">Local Manager</option>
            <option value="Regional Manager">Regional Manager</option>
            <option value="State Manage">State Manage</option>
        </select>
    </div>

    <div class="formRow">
        <label for="status">Status</label>
        <select id="status" name="Status">
            <option value="Active" checked>Active</option>
            <option value="Inactive">Inactive</option>
        </select>
    </div>

    <div class="formRow">
        <label for="interests">Interests</iabel>
        <input type="text" id="interests" name="Interests"></input>
    </div>

    <div class="formRow">
        <label for="skills">Skills</iabel>
        <input type="text" id="skills" name="Skills"></input>
    </div>

    <div class="formRow">
        <label for="desired-work-level">Desired work level</label>
        <select id="desired-work-level" name="Desired_Work_Level">
            <option value="N/A">Please choose a desired work level</option>
            <option value="Help a lot">Help a lot</option>
            <option value="Help a little">Help a little</option>
            <option value="None">None</option>
        </select>
    </div>

</fieldset>
<script type="text/javascript">
    // Salsa signup forms know how to handle supporter_volunteeer fields.
    // This script moves Availability into the volunteer fieldset.
    // Placement for the fieldset must be inside the form somewhere.
    document.addEventListener("DOMContentLoaded", function () {
        var v = document.querySelector("#volunteer");
        var d = document.querySelector("#volunteer-info div");
        if (v != null && d != null) {
            d.parentNode.insertBefore(v, d);
            var submit = document.querySelector('#submitSignup').parentNode;
            submit.parentNode.insertBefore(d.parentNode, submit);
        }
    })
</script>
<!-- END add detailed volunteer info to signup page. -->