docs-seed/_includes/feedback.html

<div class="row feedback-row mb-60">
   <div class="col-sm-8 col-sm-offset-4 col-md-offset-3 col-lg-8 col-lg-offset-2">
       <div class="row">
           <div class="col-md-10 col-md-offset-1">
               <div class="row feedback">
                   <div class="col-xs-8">
                       <h4>Was this article helpful?</h4>
                   </div>
                   <div class="col-xs-4 text-right">
                       <button data-value="yes" id="yesButton">Yes</button>
                       &nbsp;/&nbsp;
                       <button data-value="no" id="noButton">No</button>
                   </div>
               </div>
           </div>
       </div>
   </div>
</div>

<div class="dialog-overlay">
    <div class="feedback-dialog dialog dialog-enter">
        <div id="feedback-container">
        <div id="feedback-window-container">
            <div id="feedback-form-window">
            <h3 class="mt-0 mb-5">Give article feedback</h3>
            <p>Tell us how we can improve this article</p>
            <span id="feedback-form-popup-container"></span>
            <form id="feedback-form">
                <div id="feedback-checkbox-area">
                <input id="hidden-sheet-id" type="hidden" value="{{site.ff-sheet-id}}">
                <label>
                    <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
                </label>
                <span class="required-field" data-bind="visible: outdatedSample"></span>
                <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
                    data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
                </textarea>
                <label>
                    <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
                </label>
                <span class="required-field" data-bind="visible: otherMoreInformation"></span>
                <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
                    data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
                </textarea>
                <label>
                    <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
                </label>
                <span class="required-field" data-bind="visible: textErrors"></span>
                <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
                    data-bind="visible: textErrors, value: typosLinksElementsText">
                </textarea>
                <label>
                    <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
                </label>
                <span class="required-field" data-bind="visible: inaccurateContent"></span>
                <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
                    data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText">
                </textarea>
                <label>
                    <input type="checkbox" data-bind="checked: otherFeedback" /> Other
                </label>
                <span class="required-field" data-bind="visible: otherFeedback"></span>
                <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
                    data-bind="visible: otherFeedback, value: textFeedback">
                </textarea>
                <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
                    class="feedback-extw__input input" data-bind="value: email" />
                  <label>
                    <input type="checkbox" data-bind="checked: acceptFeedbackContact" /> By checking this box you consent to Progress contacting you by email about your response on this page.
                  </label>
                </div>
            </form>
            <div class="feedback-extw__foot">
                <p class="mt-30 mb-0" style="text-align: right;">
                <button class="button ghost dialog-hide">Cancel</button>
                <button class="button dialog-hide" type="submit">Submit</button>
                </p>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        initFeedbackForm({
            dialog: ".dialog-overlay",
            closeButtons: ".dialog-hide",
            container: ".feedback"
        });
    });
</script>