diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/email-request.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/email-request.js
index 73e1b5c94249..8df8ddae4afa 100644
--- a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/email-request.js
+++ b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/email-request.js
@@ -81,7 +81,7 @@ hqDefine('hqwebapp/js/bootstrap3/email-request', [
             self.$formElement.resetForm();
             self.cancelBtnEnabled(true);
             self.$submitBtn.button('reset');
-            self.hasEmailInputError(false);
+            resetErrors();
         };
 
         function isValidEmail(email) {
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/email-request.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/email-request.js
index d7963f70ab30..a185ef0104ba 100644
--- a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/email-request.js
+++ b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/email-request.js
@@ -84,7 +84,7 @@ hqDefine('hqwebapp/js/bootstrap5/email-request', [
             self.$formElement.resetForm();
             self.cancelBtnEnabled(true);
             self.$submitBtn.changeButtonState('reset');
-            self.hasEmailInputError(false);
+            resetErrors();
         };
 
         function isValidEmail(email) {
diff --git a/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap3/modal_solutions_feature_request.html b/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap3/modal_solutions_feature_request.html
index db96dd1e86cd..57ba17974726 100644
--- a/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap3/modal_solutions_feature_request.html
+++ b/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap3/modal_solutions_feature_request.html
@@ -19,7 +19,12 @@
                     <h4 class="modal-title">{% trans "Make a Feature Request to Solutions" %}</h4>
                     <br/>
                     <p>
-                        <b>{% trans "Please submit this report from the page where you would like to see the change" %}</b>
+                        <b>
+                            {% blocktrans %}
+                                If this request is related to a specific feature, then please submit this report
+                                from the location where you would like to see the change.
+                            {% endblocktrans %}
+                        </b>
                     </p>
 
                 </div>
diff --git a/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_report_issue.html b/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_report_issue.html
index da05b7a61835..daf95f00afb5 100644
--- a/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_report_issue.html
+++ b/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_report_issue.html
@@ -5,7 +5,8 @@
        tabindex="-1"
        aria-labelledby="reportAnIssueModalLabel"
        aria-hidden="true"
-       id="modalReportIssue">
+       id="modalReportIssue"
+       data-bind="event: { 'shown.bs.modal': openModal, 'hidden.bs.modal': resetForm }">
     <div class="modal-dialog modal-lg">
       <form id="hqwebapp-bugReportForm"
             action="{% url "bug_report" %}"
@@ -30,13 +31,14 @@ <h1 class="modal-title fs-5" id="reportAnIssueModalLabel">{% trans "Report an Is
               <div class="row mb-3">
                 <label for="bug-report-subject"
                        class="col-sm-2 col-form-label">{% trans "Short Description" %} *</label>
-                <div class="col-sm-10">
+                <div class="col-sm-10 has-validation">
                   <input type="text"
                          class="form-control"
                          name="subject"
                          id="bug-report-subject"
-                         placeholder="{% trans 'One Sentence Description of Issue' %}">
-                  <span class="badge badge-danger d-none">
+                         placeholder="{% trans 'One Sentence Description of Issue' %}"
+                         data-bind="value: subjectText, hasfocus: subjectHasFocus, css: { 'is-invalid': hasSubjectError }">
+                  <span class="invalid-feedback">
                     <i class="fa fa-warning"></i> {% trans 'Please give us some information about the issue' %}
                   </span>
                 </div>
@@ -51,30 +53,32 @@ <h1 class="modal-title fs-5" id="reportAnIssueModalLabel">{% trans "Report an Is
                             class="form-control vertical-resize"
                             id="bug-report-message"
                             rows="3"
-                            placeholder="{% trans "Please describe the issue and list any steps you took to see this issue." %}"></textarea>
+                            placeholder="{% trans "Please describe the issue and list any steps you took to see this issue." %}"
+                            data-bind="value: descriptionText"></textarea>
                 </div>
               </div>
               {% if request.couch_user.is_commcare_user %}
                 <div class="row mb-3"
-                     id="bug-report-email-form-group">
-                    <label for="bug-report-email"
-                           class="col-sm-2 col-form-label" >
-                      {% trans "Email" %}
-                    </label>
-                    <div class="col-sm-10">
-                        <input type="text"
-                               name="email"
-                               class="form-control"
-                               id="bug-report-email">
-                        <p class="help-block">
-                            {% blocktrans %}
-                                Please enter your email here so that we can follow up with you regarding this issue
-                            {% endblocktrans %}
-                            <span class="badge badge-danger hide">
-                                <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
-                            </span>
-                        </p>
-                    </div>
+                      id="bug-report-email-form-group">
+                  <label for="bug-report-email"
+                          class="col-sm-2 col-form-label" >
+                    {% trans "Email" %}
+                  </label>
+                  <div class="col-sm-10 has-validation">
+                    <input type="text"
+                            name="email"
+                            class="form-control"
+                            id="bug-report-email"
+                            data-bind="value: emailInput, css: { 'is-invalid': hasEmailInputError }">
+                    <span class="invalid-feedback">
+                      <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
+                    </span>
+                    <p class="help-block">
+                      {% blocktrans %}
+                        Please enter your email here so that we can follow up with you regarding this issue
+                      {% endblocktrans %}
+                    </p>
+                  </div>
                 </div>
               {% endif %}
               {% if request.couch_user.is_domain_admin %}
@@ -102,19 +106,20 @@ <h1 class="modal-title fs-5" id="reportAnIssueModalLabel">{% trans "Report an Is
                        class="col-sm-2 col-form-label">
                   {% trans "Other recipients" %}
                 </label>
-                <div class="col-sm-10">
+                <div class="col-sm-10 has-validation">
                   <input type="text"
                          name="cc"
                          class="form-control"
                          id="bug-report-cc"
-                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org" />
+                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org"
+                         data-bind="value: recipientEmailsText, css: { 'is-invalid': hasRecipientsInputError }" />
+                  <span class="invalid-feedback">
+                    <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
+                  </span>
                   <p class="help-block">
-                      {% blocktrans %}
-                          Comma-separated email addresses of others you want to notify about this issue.
-                      {% endblocktrans %}
-                      <span class="badge bade-danger hide">
-                          <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
-                      </span>
+                    {% blocktrans %}
+                      Comma-separated email addresses of others you want to notify about this issue.
+                    {% endblocktrans %}
                   </p>
                 </div>
               </div>
@@ -144,13 +149,15 @@ <h1 class="modal-title fs-5" id="reportAnIssueModalLabel">{% trans "Report an Is
               <button type="button"
                       id="bug-report-cancel"
                       class="btn btn-default"
-                      data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+                      data-bs-dismiss="modal"
+                      data-bind="enable: cancelBtnEnabled">{% trans 'Cancel' %}</button>
               <button type="submit"
                       class="btn btn-primary"
                       id="bug-report-submit"
                       data-loading-text="{% trans "Submitting Report..." %}"
                       data-error-text="{% trans "Failed. Retry Issue Submission" %}"
-                      data-success-text="{% trans "Success! Back to CommCare HQ" %}">
+                      data-success-text="{% trans "Success! Back to CommCare HQ" %}"
+                      data-bind="css: { 'btn-danger': hasSubmitError, 'btn-primary': !hasSubmitError() }">
                   {% trans "Submit Report" %}
               </button>
           </div>
diff --git a/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_solutions_feature_request.html b/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_solutions_feature_request.html
index b9a834095f98..af41bd2d21fa 100644
--- a/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_solutions_feature_request.html
+++ b/corehq/apps/hqwebapp/templates/hqwebapp/includes/bootstrap5/modal_solutions_feature_request.html
@@ -5,7 +5,8 @@
        tabindex="-1"
        aria-labelledby="requestAFeatureModalLabel"
        aria-hidden="true"
-       id="modalSolutionsFeatureRequest">
+       id="modalSolutionsFeatureRequest"
+       data-bind="event: { 'shown.bs.modal': openModal, 'hidden.bs.modal': resetForm }">
     <div class="modal-dialog modal-lg">
       <form id="hqwebapp-requestReportForm"
             action="{% url "solutions_feature_request" %}"
@@ -13,7 +14,7 @@
             enctype="multipart/form-data"
             role="form">
         {% csrf_token %}
-        <input type="hidden" id="request-report-url" name="url"/>
+        <input type="hidden" id="request-report-url" data-bind="value: reportUrl" name="url"/>
         <input type="hidden" id="request-report-username" name="username" value="{{ user.username }}"/>
         <input type="hidden" id="request-report-domain" name="domain" value="{{ domain }}"/>
         <input type="hidden" id="request-report-app_id" name="app_id" value="{{ app.id }}"/>
@@ -24,19 +25,25 @@ <h1 class="modal-title fs-5" id="requestAFeatureModalLabel">{% trans "Make a Fea
           </div>
           <div class="modal-body">
             <p>
-              <strong>{% trans "Please submit this report from the page where you would like to see the change" %}</strong>
+              <strong>
+                {% blocktrans %}
+                  If this request is related to a specific feature, then please submit this report
+                  from the location where you would like to see the change.
+                {% endblocktrans %}
+              </strong>
             </p>
             <div class="form-horizontal">
               <div class="row mb-3">
                 <label for="request-report-subject"
                        class="col-sm-2 col-form-label">{% trans "Short Description" %} *</label>
-                <div class="col-sm-10">
+                <div class="col-sm-10 has-validation">
                   <input type="text"
                          class="form-control"
                          name="subject"
                          id="request-report-subject"
-                         placeholder="{% trans 'One sentence description of feature/change request.' %}">
-                  <span class="badge badge-danger d-none">
+                         placeholder="{% trans 'One sentence description of feature/change request.' %}"
+                         data-bind="value: subjectText, hasfocus: subjectHasFocus, css: { 'is-invalid': hasSubjectError }">
+                  <span class="invalid-feedback">
                     <i class="fa fa-warning"></i> {% trans 'Please give us some information about the feature/change request' %}
                   </span>
                 </div>
@@ -51,7 +58,8 @@ <h1 class="modal-title fs-5" id="requestAFeatureModalLabel">{% trans "Make a Fea
                             class="form-control vertical-resize"
                             id="request-report-message"
                             rows="3"
-                            placeholder="{% trans "Please describe the product changes you would like to see in CommCare." %}"></textarea>
+                            placeholder="{% trans "Please describe the product changes you would like to see in CommCare." %}"
+                            data-bind="value: descriptionText"></textarea>
                 </div>
               </div>
               <div class="row mb-3"
@@ -65,14 +73,15 @@ <h1 class="modal-title fs-5" id="requestAFeatureModalLabel">{% trans "Make a Fea
                          name="cc"
                          class="form-control"
                          id="request-report-cc"
-                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org" />
+                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org"
+                         data-bind="value: recipientEmailsText, css: { 'is-invalid': hasRecipientsInputError }" />
+                  <span class="invalid-feedback">
+                    <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
+                  </span>
                   <p class="help-block">
-                      {% blocktrans %}
-                          Comma-separated email addresses of others you want to notify about this request.
-                      {% endblocktrans %}
-                      <span class="badge bade-danger hide">
-                          <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
-                      </span>
+                    {% blocktrans %}
+                      Comma-separated email addresses of others you want to notify about this request.
+                    {% endblocktrans %}
                   </p>
                 </div>
               </div>
@@ -84,15 +93,15 @@ <h1 class="modal-title fs-5" id="requestAFeatureModalLabel">{% trans "Make a Fea
                   <div class="col-sm-10">
                       <input type="file" id="request-report-file" name="feature_request"/>
                       <p class="help-block">
-                          {% blocktrans %}
+                        {% blocktrans %}
                           Please upload any files relevant to your suggestion.
-                          {% endblocktrans %}
+                        {% endblocktrans %}
                       </p>
                       <p class="help-block">
-                          <i class="fa fa-warning"></i>
-                          {% blocktrans %}
-                              Do not upload a file containing sensitive data like passwords or project data.
-                          {% endblocktrans %}
+                        <i class="fa fa-warning"></i>
+                        {% blocktrans %}
+                          Do not upload a file containing sensitive data like passwords or project data.
+                        {% endblocktrans %}
                       </p>
                   </div>
               </div>
@@ -102,13 +111,15 @@ <h1 class="modal-title fs-5" id="requestAFeatureModalLabel">{% trans "Make a Fea
               <button type="button"
                       id="request-report-cancel"
                       class="btn btn-default"
-                      data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+                      data-bs-dismiss="modal"
+                      data-bind="enable: cancelBtnEnabled">{% trans 'Cancel' %}</button>
               <button type="submit"
                       class="btn btn-primary"
                       id="request-report-submit"
                       data-loading-text="{% trans "Submitting Report..." %}"
                       data-error-text="{% trans "Failed. Retry Request Submission" %}"
-                      data-success-text="{% trans "Success! Back to CommCare HQ" %}">
+                      data-success-text="{% trans "Success! Back to CommCare HQ" %}"
+                      data-bind="css: { 'btn-danger': hasSubmitError, 'btn-primary': !hasSubmitError() }">
                   {% trans "Submit Report" %}
               </button>
           </div>
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_report_issue.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_report_issue.html.diff.txt
index 716416e7bff1..90150644ffa4 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_report_issue.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_report_issue.html.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,156 +1,161 @@
+@@ -1,156 +1,168 @@
  {% load i18n %}
  {% load hq_shared_tags %}
  {% if request.user.is_authenticated %}
@@ -23,13 +23,12 @@
 -                    <br/>
 -                    <p>
 -                        <b>{% trans "Please submit this report from page where issue is occurring" %}</b>
--                    </p>
--
 +  <div class="modal fade"
 +       tabindex="-1"
 +       aria-labelledby="reportAnIssueModalLabel"
 +       aria-hidden="true"
-+       id="modalReportIssue">
++       id="modalReportIssue"
++       data-bind="event: { 'shown.bs.modal': openModal, 'hidden.bs.modal': resetForm }">
 +    <div class="modal-dialog modal-lg">
 +      <form id="hqwebapp-bugReportForm"
 +            action="{% url "bug_report" %}"
@@ -54,15 +53,55 @@
 +              <div class="row mb-3">
 +                <label for="bug-report-subject"
 +                       class="col-sm-2 col-form-label">{% trans "Short Description" %} *</label>
-+                <div class="col-sm-10">
++                <div class="col-sm-10 has-validation">
 +                  <input type="text"
 +                         class="form-control"
 +                         name="subject"
 +                         id="bug-report-subject"
-+                         placeholder="{% trans 'One Sentence Description of Issue' %}">
-+                  <span class="badge badge-danger d-none">
++                         placeholder="{% trans 'One Sentence Description of Issue' %}"
++                         data-bind="value: subjectText, hasfocus: subjectHasFocus, css: { 'is-invalid': hasSubjectError }">
++                  <span class="invalid-feedback">
 +                    <i class="fa fa-warning"></i> {% trans 'Please give us some information about the issue' %}
 +                  </span>
++                </div>
++              </div>
++              <div class="row mb-3">
++                <label for="bug-report-message"
++                       class="col-sm-2 col-form-label">
++                  {% trans "Full Description" %}
++                </label>
++                <div class="col-sm-10">
++                  <textarea name="message"
++                            class="form-control vertical-resize"
++                            id="bug-report-message"
++                            rows="3"
++                            placeholder="{% trans "Please describe the issue and list any steps you took to see this issue." %}"
++                            data-bind="value: descriptionText"></textarea>
++                </div>
++              </div>
++              {% if request.couch_user.is_commcare_user %}
++                <div class="row mb-3"
++                      id="bug-report-email-form-group">
++                  <label for="bug-report-email"
++                          class="col-sm-2 col-form-label" >
++                    {% trans "Email" %}
++                  </label>
++                  <div class="col-sm-10 has-validation">
++                    <input type="text"
++                            name="email"
++                            class="form-control"
++                            id="bug-report-email"
++                            data-bind="value: emailInput, css: { 'is-invalid': hasEmailInputError }">
++                    <span class="invalid-feedback">
++                      <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
++                    </span>
++                    <p class="help-block">
++                      {% blocktrans %}
++                        Please enter your email here so that we can follow up with you regarding this issue
++                      {% endblocktrans %}
+                     </p>
+-
++                  </div>
                  </div>
 -                <div class="modal-body">
 -                    <div class="form-horizontal">
@@ -172,40 +211,23 @@
 -                                </p>
 -                            </div>
 -                        </div>
-+              </div>
-+              <div class="row mb-3">
-+                <label for="bug-report-message"
-+                       class="col-sm-2 col-form-label">
-+                  {% trans "Full Description" %}
-+                </label>
-+                <div class="col-sm-10">
-+                  <textarea name="message"
-+                            class="form-control vertical-resize"
-+                            id="bug-report-message"
-+                            rows="3"
-+                            placeholder="{% trans "Please describe the issue and list any steps you took to see this issue." %}"></textarea>
-+                </div>
-+              </div>
-+              {% if request.couch_user.is_commcare_user %}
-+                <div class="row mb-3"
-+                     id="bug-report-email-form-group">
-+                    <label for="bug-report-email"
-+                           class="col-sm-2 col-form-label" >
-+                      {% trans "Email" %}
++              {% endif %}
++              {% if request.couch_user.is_domain_admin %}
++                <div class="row mb-3">
++                    <label for="bug-report-project-description"
++                           class="col-sm-2 col-form-label">
++                      {% trans "Project Description" %}
 +                    </label>
 +                    <div class="col-sm-10">
-+                        <input type="text"
-+                               name="email"
-+                               class="form-control"
-+                               id="bug-report-email">
-+                        <p class="help-block">
-+                            {% blocktrans %}
-+                                Please enter your email here so that we can follow up with you regarding this issue
-+                            {% endblocktrans %}
-+                            <span class="badge badge-danger hide">
-+                                <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
-+                            </span>
-+                        </p>
++                        <textarea name="project_description"
++                                  class="form-control vertical-resize"
++                                  id="bug-report-project-description"
++                                  rows="3"
++                                  placeholder="{% trans 'Please provide a short description of your organization and the work it is doing.' %}">{% spaceless %}
++                                  {% if request.project.project_description %}
++                                  {{ request.project.project_description }}
++                                  {% endif %}
++                        {% endspaceless %}</textarea>
                      </div>
                  </div>
 -                <div class="modal-footer">
@@ -224,46 +246,28 @@
 -                        {% trans "Submit Report" %}
 -                    </button>
 +              {% endif %}
-+              {% if request.couch_user.is_domain_admin %}
-+                <div class="row mb-3">
-+                    <label for="bug-report-project-description"
-+                           class="col-sm-2 col-form-label">
-+                      {% trans "Project Description" %}
-+                    </label>
-+                    <div class="col-sm-10">
-+                        <textarea name="project_description"
-+                                  class="form-control vertical-resize"
-+                                  id="bug-report-project-description"
-+                                  rows="3"
-+                                  placeholder="{% trans 'Please provide a short description of your organization and the work it is doing.' %}">{% spaceless %}
-+                                  {% if request.project.project_description %}
-+                                  {{ request.project.project_description }}
-+                                  {% endif %}
-+                        {% endspaceless %}</textarea>
-+                    </div>
-                 </div>
-+              {% endif %}
 +              <div class="row mb-3"
 +                   id="bug-report-cc-form-group">
 +                <label for="bug-report-cc"
 +                       class="col-sm-2 col-form-label">
 +                  {% trans "Other recipients" %}
 +                </label>
-+                <div class="col-sm-10">
++                <div class="col-sm-10 has-validation">
 +                  <input type="text"
 +                         name="cc"
 +                         class="form-control"
 +                         id="bug-report-cc"
-+                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org" />
++                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org"
++                         data-bind="value: recipientEmailsText, css: { 'is-invalid': hasRecipientsInputError }" />
++                  <span class="invalid-feedback">
++                    <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
++                  </span>
 +                  <p class="help-block">
-+                      {% blocktrans %}
-+                          Comma-separated email addresses of others you want to notify about this issue.
-+                      {% endblocktrans %}
-+                      <span class="badge bade-danger hide">
-+                          <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
-+                      </span>
++                    {% blocktrans %}
++                      Comma-separated email addresses of others you want to notify about this issue.
++                    {% endblocktrans %}
 +                  </p>
-+                </div>
+                 </div>
 +              </div>
 +              <div class="row mb-3">
 +                  <label for="bug-report-file"
@@ -292,13 +296,15 @@
 +              <button type="button"
 +                      id="bug-report-cancel"
 +                      class="btn btn-default"
-+                      data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
++                      data-bs-dismiss="modal"
++                      data-bind="enable: cancelBtnEnabled">{% trans 'Cancel' %}</button>
 +              <button type="submit"
 +                      class="btn btn-primary"
 +                      id="bug-report-submit"
 +                      data-loading-text="{% trans "Submitting Report..." %}"
 +                      data-error-text="{% trans "Failed. Retry Issue Submission" %}"
-+                      data-success-text="{% trans "Success! Back to CommCare HQ" %}">
++                      data-success-text="{% trans "Success! Back to CommCare HQ" %}"
++                      data-bind="css: { 'btn-danger': hasSubmitError, 'btn-primary': !hasSubmitError() }">
 +                  {% trans "Submit Report" %}
 +              </button>
 +          </div>
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_solutions_feature_request.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_solutions_feature_request.html.diff.txt
index ba4e190edb29..f7f8659e7cff 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_solutions_feature_request.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/hqwebapp/includes/modal_solutions_feature_request.html.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,115 +1,119 @@
+@@ -1,120 +1,130 @@
  {% load i18n %}
  {% load hq_shared_tags %}
  {% if request.user.is_authenticated %}
@@ -22,14 +22,20 @@
 -                    <h4 class="modal-title">{% trans "Make a Feature Request to Solutions" %}</h4>
 -                    <br/>
 -                    <p>
--                        <b>{% trans "Please submit this report from the page where you would like to see the change" %}</b>
+-                        <b>
+-                            {% blocktrans %}
+-                                If this request is related to a specific feature, then please submit this report
+-                                from the location where you would like to see the change.
+-                            {% endblocktrans %}
+-                        </b>
 -                    </p>
 -
 +  <div class="modal fade"
 +       tabindex="-1"
 +       aria-labelledby="requestAFeatureModalLabel"
 +       aria-hidden="true"
-+       id="modalSolutionsFeatureRequest">
++       id="modalSolutionsFeatureRequest"
++       data-bind="event: { 'shown.bs.modal': openModal, 'hidden.bs.modal': resetForm }">
 +    <div class="modal-dialog modal-lg">
 +      <form id="hqwebapp-requestReportForm"
 +            action="{% url "solutions_feature_request" %}"
@@ -37,7 +43,7 @@
 +            enctype="multipart/form-data"
 +            role="form">
 +        {% csrf_token %}
-+        <input type="hidden" id="request-report-url" name="url"/>
++        <input type="hidden" id="request-report-url" data-bind="value: reportUrl" name="url"/>
 +        <input type="hidden" id="request-report-username" name="username" value="{{ user.username }}"/>
 +        <input type="hidden" id="request-report-domain" name="domain" value="{{ domain }}"/>
 +        <input type="hidden" id="request-report-app_id" name="app_id" value="{{ app.id }}"/>
@@ -48,19 +54,25 @@
 +          </div>
 +          <div class="modal-body">
 +            <p>
-+              <strong>{% trans "Please submit this report from the page where you would like to see the change" %}</strong>
++              <strong>
++                {% blocktrans %}
++                  If this request is related to a specific feature, then please submit this report
++                  from the location where you would like to see the change.
++                {% endblocktrans %}
++              </strong>
 +            </p>
 +            <div class="form-horizontal">
 +              <div class="row mb-3">
 +                <label for="request-report-subject"
 +                       class="col-sm-2 col-form-label">{% trans "Short Description" %} *</label>
-+                <div class="col-sm-10">
++                <div class="col-sm-10 has-validation">
 +                  <input type="text"
 +                         class="form-control"
 +                         name="subject"
 +                         id="request-report-subject"
-+                         placeholder="{% trans 'One sentence description of feature/change request.' %}">
-+                  <span class="badge badge-danger d-none">
++                         placeholder="{% trans 'One sentence description of feature/change request.' %}"
++                         data-bind="value: subjectText, hasfocus: subjectHasFocus, css: { 'is-invalid': hasSubjectError }">
++                  <span class="invalid-feedback">
 +                    <i class="fa fa-warning"></i> {% trans 'Please give us some information about the feature/change request' %}
 +                  </span>
                  </div>
@@ -143,7 +155,8 @@
 +                            class="form-control vertical-resize"
 +                            id="request-report-message"
 +                            rows="3"
-+                            placeholder="{% trans "Please describe the product changes you would like to see in CommCare." %}"></textarea>
++                            placeholder="{% trans "Please describe the product changes you would like to see in CommCare." %}"
++                            data-bind="value: descriptionText"></textarea>
                  </div>
 -                <div class="modal-footer">
 -                    <button type="button"
@@ -172,14 +185,15 @@
 +                         name="cc"
 +                         class="form-control"
 +                         id="request-report-cc"
-+                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org" />
++                         placeholder="ex: admin@commcarehq.org, test@commcarehq.org"
++                         data-bind="value: recipientEmailsText, css: { 'is-invalid': hasRecipientsInputError }" />
++                  <span class="invalid-feedback">
++                    <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
++                  </span>
 +                  <p class="help-block">
-+                      {% blocktrans %}
-+                          Comma-separated email addresses of others you want to notify about this request.
-+                      {% endblocktrans %}
-+                      <span class="badge bade-danger hide">
-+                          <i class="fa fa-warning"></i> {% trans 'Incorrect Format' %}
-+                      </span>
++                    {% blocktrans %}
++                      Comma-separated email addresses of others you want to notify about this request.
++                    {% endblocktrans %}
 +                  </p>
                  </div>
 +              </div>
@@ -191,15 +205,15 @@
 +                  <div class="col-sm-10">
 +                      <input type="file" id="request-report-file" name="feature_request"/>
 +                      <p class="help-block">
-+                          {% blocktrans %}
++                        {% blocktrans %}
 +                          Please upload any files relevant to your suggestion.
-+                          {% endblocktrans %}
++                        {% endblocktrans %}
 +                      </p>
 +                      <p class="help-block">
-+                          <i class="fa fa-warning"></i>
-+                          {% blocktrans %}
-+                              Do not upload a file containing sensitive data like passwords or project data.
-+                          {% endblocktrans %}
++                        <i class="fa fa-warning"></i>
++                        {% blocktrans %}
++                          Do not upload a file containing sensitive data like passwords or project data.
++                        {% endblocktrans %}
 +                      </p>
 +                  </div>
 +              </div>
@@ -210,13 +224,15 @@
 +              <button type="button"
 +                      id="request-report-cancel"
 +                      class="btn btn-default"
-+                      data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
++                      data-bs-dismiss="modal"
++                      data-bind="enable: cancelBtnEnabled">{% trans 'Cancel' %}</button>
 +              <button type="submit"
 +                      class="btn btn-primary"
 +                      id="request-report-submit"
 +                      data-loading-text="{% trans "Submitting Report..." %}"
 +                      data-error-text="{% trans "Failed. Retry Request Submission" %}"
-+                      data-success-text="{% trans "Success! Back to CommCare HQ" %}">
++                      data-success-text="{% trans "Success! Back to CommCare HQ" %}"
++                      data-bind="css: { 'btn-danger': hasSubmitError, 'btn-primary': !hasSubmitError() }">
 +                  {% trans "Submit Report" %}
 +              </button>
 +          </div>
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/email-request.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/email-request.js.diff.txt
index 4dd478e4bd9d..7a43c2a6859f 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/email-request.js.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/email-request.js.diff.txt
@@ -43,7 +43,7 @@
              self.cancelBtnEnabled(true);
 -            self.$submitBtn.button('reset');
 +            self.$submitBtn.changeButtonState('reset');
-             self.hasEmailInputError(false);
+             resetErrors();
          };
  
 @@ -107,12 +110,12 @@