From 79fc902da9f711c70c2a4fd12b59f41ed8ec1c57 Mon Sep 17 00:00:00 2001
From: matthewswspence <Matthewswspence@gmail.com>
Date: Thu, 27 Mar 2025 16:20:47 -0500
Subject: [PATCH] add fieldsets and legends to feb questions

---
 .../domain_request_dotgov_domain.html         |  2 +-
 .../templates/domain_request_purpose.html     | 76 ++++++++++---------
 ...lio_domain_request_additional_details.html | 18 +++--
 3 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/registrar/templates/domain_request_dotgov_domain.html b/src/registrar/templates/domain_request_dotgov_domain.html
index ceb293e8e..964b7ca52 100644
--- a/src/registrar/templates/domain_request_dotgov_domain.html
+++ b/src/registrar/templates/domain_request_dotgov_domain.html
@@ -130,7 +130,7 @@
       {% endwith %}
 
       {# Conditional Details Field – only shown when the executive naming requirements radio is "False" #}
-      <div id="domain-naming-requirements-details-container margin-top-3" class="conditional-panel" style="display: none;">
+      <div id="domain-naming-requirements-details-container" class="conditional-panel" style="display: none;">
         <p><em>Provide details below. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em></p>
         {% with add_label_class="usa-sr-only" attr_required="required" maxlength="2000" %}
           {% input_with_errors forms.3.feb_naming_requirements_details %}
diff --git a/src/registrar/templates/domain_request_purpose.html b/src/registrar/templates/domain_request_purpose.html
index 3893e51ec..7b5f27ba0 100644
--- a/src/registrar/templates/domain_request_purpose.html
+++ b/src/registrar/templates/domain_request_purpose.html
@@ -12,14 +12,12 @@
 
 {% block form_fields %}
   {% if requires_feb_questions %}
-      <fieldset class="usa-fieldset margin-top-0 dotgov-domain-form">
+      <fieldset class="usa-fieldset margin-top-0">
         {{forms.0.management_form}}
         {{forms.1.management_form}}
-        {{forms.2.management_form}}
-        {{forms.3.management_form}}
-        {{forms.4.management_form}}
-        {{forms.5.management_form}}
-        <h2>What is the purpose of your requested domain?</h2>
+        <legend>
+          <h2>What is the purpose of your requested domain?</h2>
+        </legend>
         <p class="margin-bottom-0 margin-top-1">
           <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
         </p>
@@ -35,41 +33,51 @@
             {% input_with_errors forms.1.purpose %}
           {% endwith %}
         </div>
-
-        <h2>Do you have a target time frame for launching this domain?</h2>
-        <p class="margin-bottom-0 margin-top-1">
-          <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
-        </p>
-        {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
-          {% input_with_errors forms.2.has_timeframe %}
-        {% endwith %}
-
-        <div id="purpose-timeframe-details-container" class="conditional-panel">
+        </fieldset>
+        <fieldset class="usa-fieldset margin-top-2">
+          {{forms.2.management_form}}
+          {{forms.3.management_form}}
+          <legend>
+            <h2>Do you have a target time frame for launching this domain?</h2>
+          </legend>
           <p class="margin-bottom-0 margin-top-1">
-            <em>Provide details below. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
+            <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
           </p>
-          {% with add_label_class="usa-sr-only" attr_required="required" attr_maxlength="2000" %}
-            {% input_with_errors forms.3.time_frame_details %}
+          {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
+            {% input_with_errors forms.2.has_timeframe %}
           {% endwith %}
-        </div>
 
-        <h2>Will the domain name be used for an interagency initiative?</h2>
-        <p class="margin-bottom-0 margin-top-1">
-          <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
-        </p>
-        {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
-          {% input_with_errors forms.4.is_interagency_initiative %}
-        {% endwith %}
-
-        <div id="purpose-interagency-initaitive-details-container" class="conditional-panel">
+          <div id="purpose-timeframe-details-container" class="conditional-panel">
+            <p class="margin-bottom-0 margin-top-1">
+              <em>Provide details below. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
+            </p>
+            {% with add_label_class="usa-sr-only" attr_required="required" attr_maxlength="2000" %}
+              {% input_with_errors forms.3.time_frame_details %}
+            {% endwith %}
+          </div>
+        </fieldset>
+        <fieldset class="usa-fieldset margin-top-2">
+          {{forms.4.management_form}}
+          {{forms.5.management_form}}
+          <legend>
+            <h2>Will the domain name be used for an interagency initiative?</h2>
+          </legend>
           <p class="margin-bottom-0 margin-top-1">
-            <em>Name the agencies that will be involved in this initiative. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
+            <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
           </p>
-          {% with add_label_class="usa-sr-only" attr_required="required" attr_maxlength="2000" %}
-            {% input_with_errors forms.5.interagency_initiative_details %}
+          {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
+            {% input_with_errors forms.4.is_interagency_initiative %}
           {% endwith %}
-        </div>
-      </fieldset>
+
+          <div id="purpose-interagency-initaitive-details-container" class="conditional-panel">
+            <p class="margin-bottom-0 margin-top-1">
+              <em>Name the agencies that will be involved in this initiative. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
+            </p>
+            {% with add_label_class="usa-sr-only" attr_required="required" attr_maxlength="2000" %}
+              {% input_with_errors forms.5.interagency_initiative_details %}
+            {% endwith %}
+          </div>
+        </fieldset>
   {% else %}
     <h2>What is the purpose of your requested domain?</h2>
     <p>Describe how you’ll use your .gov domain. Will it be used for a website, email, or something else?</p>
diff --git a/src/registrar/templates/portfolio_domain_request_additional_details.html b/src/registrar/templates/portfolio_domain_request_additional_details.html
index 4107e7bc1..3f9b32575 100644
--- a/src/registrar/templates/portfolio_domain_request_additional_details.html
+++ b/src/registrar/templates/portfolio_domain_request_additional_details.html
@@ -11,9 +11,9 @@
       <fieldset class="usa-fieldset">
         {{forms.0.management_form}}
         {{forms.1.management_form}}
-        {{forms.2.management_form}}
-        {{forms.3.management_form}}
-        <h2 class="margin-top-0 margin-bottom-0">Are you working with someone in the Executive Office of the President (EOP) on this request?</h2> 
+        <legend>
+          <h2 class="margin-top-0 margin-bottom-0">Are you working with someone in the Executive Office of the President (EOP) on this request?</h2> 
+        </legend>
         <p class="margin-bottom-2 margin-top-2">Working with the EOP is not required to request a .gov domain.</p>
         <p class="margin-bottom-0 margin-top-1">
           <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
@@ -31,8 +31,14 @@
             {% input_with_errors forms.1.last_name %}
           {% endwith %}
         </div>
-
-        <h2>Is there anything else you'd like us to know about your domain request?</h2> 
+      </fieldset>
+        
+      <fieldset class="usa-fieldset">
+        {{forms.2.management_form}}
+        {{forms.3.management_form}}
+        <legend>
+          <h2>Is there anything else you'd like us to know about your domain request?</h2> 
+        </legend>
         <p class="margin-bottom-0 margin-top-1">
           <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
         </p>
@@ -51,7 +57,7 @@
       </fieldset>
   {% else %}
       <fieldset class="usa-fieldset">          
-          <h2 class="margin-top-0 margin-bottom-0">Is there anything else you’d like us to know about your domain request?</h2> 
+        <h2 class="margin-top-0 margin-bottom-0">Is there anything else you’d like us to know about your domain request?</h2> 
       </legend>
       </fieldset>