diff --git a/static/js/src/dynamic-forms.js b/static/js/src/dynamic-forms.js
index 443bc289f9b..b30ecbf9368 100644
--- a/static/js/src/dynamic-forms.js
+++ b/static/js/src/dynamic-forms.js
@@ -1,3 +1,10 @@
+/**
+ * This script is used to load dynamic contact forms on the website.
+ * Important notes about using dynamic forms:
+ * - Form fields that should be in the payload must have "name" attribute for the input fields.
+ * - "js-formfield" class should be used to encapsulate fields that do not have "name" attributes. These fields will be consolidated and added to the "Comments_from_lead__c" payload.
+ * - "Comments_from_lead__c" must be a hidden field.
+ */
 import "infer-preferred-language.js";
 import { prepareInputFields } from "./prepare-form-inputs.js";
 
@@ -312,7 +319,6 @@ import { prepareInputFields } from "./prepare-form-inputs.js";
       function createMessage(submit) {
         const contactModal = document.getElementById("contact-modal");
         var message = "";
-        var commentsFromLead = document.querySelector("#Comments_from_lead__c");
         if (contactModal) {
           var formFields = contactModal.querySelectorAll(".js-formfield");
 
diff --git a/templates/shared/forms/interactive/ai.html b/templates/shared/forms/interactive/ai.html
index 75fceaa61ef..4afc0191ee7 100644
--- a/templates/shared/forms/interactive/ai.html
+++ b/templates/shared/forms/interactive/ai.html
@@ -1,119 +1,126 @@
 <div class="p-modal" id="contact-modal">
   <div class="p-modal__dialog is-paper" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
     <div class="js-pagination js-pagination--1">
-      <div class="js-formfield">
-        <div class="row--50-50 p-strip is-shallow">
-          <div class="col">
-            <h2 class="p-heading--1" id="modal-title">Open source AI: a scalable path to production</h2>
-            <p>Looking to scale your MLOPs infrastructure or need consulting services to kick start your AI journey? Our experts are here to help you.</p>
-          </div>
-          <div class="col">
-            <button class="p-modal__close" aria-label="Close active modal">Close</button>
-            <form action="/marketo/submit" onsubmit="stringifyCustomFields()" method="post" id="mktoForm_%% formid %%" class="modal-form">
+      <div class="row--50-50 p-strip is-shallow">
+        <div class="col">
+          <h2 class="p-heading--1" id="modal-title">Open source AI: a scalable path to production</h2>
+          <p>Looking to scale your MLOPs infrastructure or need consulting services to kick start your AI journey? Our experts are here to help you.</p>
+        </div>
+        <div class="col">
+          <button class="p-modal__close" aria-label="Close active modal">Close</button>
+          <form action="/marketo/submit" onsubmit="stringifyCustomFields()" method="post" id="mktoForm_%% formid %%" class="modal-form">
+            <div class="js-formfield">
               <div class="p-section--shallow">
-                <p>Do you already have any AI projects rolled out in your enterprise?</p>
+                <p class="p-heading--5">Do you already have any AI projects rolled out in your enterprise?</p>
                 <label class="p-radio">
-                  <input type="radio" value="Yes" class="p-radio__input" id="aiProjectsYes" name="aiProjects" aria-labelledby="aiProjectsYes" required>
+                  <input type="radio" value="Yes" class="p-radio__input" id="aiProjectsYes" name="aiProjects" aria-labelledby="aiProjectsYes" required />
                   <span class="p-radio__label" id="aiProjectsYes">Yes</span>
                 </label>
                 <label class="p-radio">
-                  <input type="radio" value="No" class="p-radio__input" id="aiProjectsNo" name="aiProjects" aria-labelledby="aiProjectsNo" required>
+                  <input type="radio" value="No" class="p-radio__input" id="aiProjectsNo" name="aiProjects" aria-labelledby="aiProjectsNo" required />
                   <span class="p-radio__label" id="aiProjectsNo">No</span>
                 </label>
               </div>
+            </div>
+            <div class="js-formfield">
               <div class="p-section--shallow">
-                <hr class="p-rule">
-                <p>What are you interested in from our AI offering?</p>
+                <hr class="p-rule" />
+                <p class="p-heading--5">What are you interested in from our AI offering?</p>
                 <label class="p-checkbox js-checkbox">
-                  <input type="checkbox" aria-labelledby="canonicalMlopsSolution" class="p-checkbox__input">
+                  <input type="checkbox" aria-labelledby="canonicalMlopsSolution" class="p-checkbox__input" />
                   <span class="p-checkbox__label" id="canonicalMlopsSolution">Canonical MLOps solution</span>
                 </label>
                 <label class="p-checkbox js-checkbox">
-                  <input type="checkbox" aria-labelledby="aiConsultingServices" class="p-checkbox__input">
+                  <input type="checkbox" aria-labelledby="aiConsultingServices" class="p-checkbox__input" />
                   <span class="p-checkbox__label" id="aiConsultingServices">AI consultancy services</span>
                 </label>
                 <label class="p-checkbox js-checkbox">
-                  <input type="checkbox" aria-labelledby="mlopsWorkshop" class="p-checkbox__input">
+                  <input type="checkbox" aria-labelledby="mlopsWorkshop" class="p-checkbox__input" />
                   <span class="p-checkbox__label" id="mlopsWorkshop">MLOps Workshop</span>
                 </label>
                 <label class="p-checkbox js-checkbox">
-                  <input type="checkbox" aria-labelledby="notSure" class="p-checkbox__input">
+                  <input type="checkbox" aria-labelledby="notSure" class="p-checkbox__input" />
                   <span class="p-checkbox__label" id="notSure">Not sure</span>
                 </label>
               </div>
+            </div>
+            <div class="js-formfield">
               <div class="p-section--shallow">
-                <hr class="p-rule">
-                <label for="mlopsRequirements">Add details about your AI or MLOps requirements</label>
+                <hr class="p-rule" />
+                <p class="p-heading--5">Add details about your AI or MLOps requirements</p>
                 <textarea id="mlopsRequirements"></textarea>
-                <hr class="p-rule">
-                <p>Add your information</p>
-                <label for="firstName">First name:</label>
-                <input required id="firstName" name="firstName" maxlength="255" type="text"/>
+              </div>
+            </div>
 
-                <label for="lastName">Last name:</label>
-                <input required id="lastName" name="lastName" maxlength="255" type="text"/>
+            <div class="row">
+              <hr class="p-rule" />
+              <p class="p-heading--5">Add your information</p>
+              <label for="firstName">First name:</label>
+              <input required id="firstName" name="firstName" maxlength="255" type="text"/>
 
-                <label for="company">Company:</label>
-                <input required id="company" name="company" maxlength="255" type="text"/>
+              <label for="lastName">Last name:</label>
+              <input required id="lastName" name="lastName" maxlength="255" type="text"/>
 
-                <label for="company">Title:</label>
-                <input required id="title" name="title" maxlength="255" type="text"/>
+              <label for="company">Company:</label>
+              <input required id="company" name="company" maxlength="255" type="text"/>
 
-                <label for="email">Email:</label>
-                <input required id="email" name="email" maxlength="255" type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$"/>
+              <label for="company">Title:</label>
+              <input required id="title" name="title" maxlength="255" type="text"/>
 
-                <label for="phone">Phone number:</label>
-                <input required id="phone" name="phone" maxlength="255" type="tel" />
-              </div>
+              <label for="email">Email:</label>
+              <input required id="email" name="email" maxlength="255" type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$"/>
 
-              <div class="p-section--shallow">
-                <label class="p-checkbox">
-                  <input class="p-checkbox__input" value="yes" aria-labelledby="canonicalUpdatesOptIn" name="canonicalUpdatesOptIn" type="checkbox">
-                  <span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical's products and services.</span>
-                </label>
+              <label for="phone">Phone number:</label>
+              <input required id="phone" name="phone" maxlength="255" type="tel" />
 
-                <p>By submitting this form, I confirm that I have read and agree to <a href="/legal/data-privacy/contact">Canonical's Privacy Notice</a> and <a href="/legal/data-privacy">Privacy Policy</a>.</p>
-                {# These are honey pot fields to catch bots #}
-                <ul class="p-list u-off-screen">
-                  <li class="u-off-screen">
-                    <label class="website" for="website">Website:</label>
-                    <input name="website" type="text" class="website" autocomplete="off" value="" id="website" tabindex="-1" />
-                  </li>
-                  <li class="u-off-screen">
-                    <label class="name" for="name">Name:</label>
-                    <input name="name" type="text" class="name" autocomplete="off" value="" id="name" tabindex="-1" />
-                  </li>
-                </ul>
-                {# End of honey pots #}
-              </div>
+            </div>
+            <div class="p-section--shallow">
+              <label class="p-checkbox">
+                <input class="p-checkbox__input" value="yes" aria-labelledby="canonicalUpdatesOptIn" name="canonicalUpdatesOptIn" type="checkbox" />
+                <span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical's products and services.</span>
+              </label>
 
-              <div class="u-hide">
-                <h3>Your comments</h3>
-                <ul class="p-list">
-                  <li class="p-list__item">
-                    <label for="Comments_from_lead__c">What would you like to talk to us about?</label>
-                    <textarea id="Comments_from_lead__c" name="Comments_from_lead__c" rows="5" maxlength="2000"></textarea>
-                  </li>
-                </ul>
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="%% returnURL %%" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="formid" value="%% formid %%" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="Consent_to_Processing__c" value="yes" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="GCLID__c" id="GCLID__c" value="" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" name="Facebook_Click_ID__c" id="Facebook_Click_ID__c" value="" />
-                <input type="hidden" aria-hidden="true" aria-label="hidden field" id="preferredLanguage" name="preferredLanguage" maxlength="255" value="" />
-              </div>
+              <p>By submitting this form, I confirm that I have read and agree to <a href="/legal/data-privacy/contact">Canonical's Privacy Notice</a> and <a href="/legal/data-privacy">Privacy Policy</a>.</p>
+              {# These are honey pot fields to catch bots #}
+              <ul class="p-list u-off-screen">
+                <li class="u-off-screen">
+                  <label class="website" for="website">Website:</label>
+                  <input name="website" type="text" class="website" autocomplete="off" value="" id="website" tabindex="-1" />
+                </li>
+                <li class="u-off-screen">
+                  <label class="name" for="name">Name:</label>
+                  <input name="name" type="text" class="name" autocomplete="off" value="" id="name" tabindex="-1" />
+                </li>
+              </ul>
+              {# End of honey pots #}
+            </div>
 
-              <div class="pagination p-section--shallow">
-                <hr>
-                <button type="submit" class="pagination__link--next p-button--positive" aria-label="Submit">Submit form</button>
-              </div>
-            </form>           
-          </div>
+            <div class="u-hide">
+              <h3>Your comments</h3>
+              <ul class="p-list">
+                <li class="p-list__item">
+                  <label for="Comments_from_lead__c">What would you like to talk to us about?</label>
+                  <textarea id="Comments_from_lead__c" name="Comments_from_lead__c" rows="5" maxlength="2000"></textarea>
+                </li>
+              </ul>
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="%% returnURL %%" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="formid" value="%% formid %%" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="Consent_to_Processing__c" value="yes" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="GCLID__c" id="GCLID__c" value="" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" name="Facebook_Click_ID__c" id="Facebook_Click_ID__c" value="" />
+              <input type="hidden" aria-hidden="true" aria-label="hidden field" id="preferredLanguage" name="preferredLanguage" maxlength="255" value="" />
+            </div>
+
+            <div class="pagination p-section--shallow">
+              <hr />
+              <button type="submit" class="pagination__link--next p-button--positive" aria-label="Submit">Submit form</button>
+            </div>
+          </form>           
         </div>
       </div>
     </div>
diff --git a/templates/shared/forms/interactive/kafka.html b/templates/shared/forms/interactive/kafka.html
index b27a5dfd120..a20c57033b9 100644
--- a/templates/shared/forms/interactive/kafka.html
+++ b/templates/shared/forms/interactive/kafka.html
@@ -6,9 +6,11 @@ <h2 class="p-modal__title u-sv1" id="modal-title">Talk to our Kafka experts</h2>
     </header>
     <div class="js-pagination js-pagination--1">
       <form action="/marketo/submit" method="post" id="mktoForm_%% formid %%" class="modal-form p-form p-form--stacked">
-        <div class="u-sv2">
-          <h3 class="p-heading--5">Tell us more about your Kafka use case</h3>
-          <textarea id="Comments_from_lead__c" name="Comments_from_lead__c" aria-label="Anything you'd like to communicate about your needs or interests?" rows="3" placeholder="Anything you'd like to communicate about your needs or interests?"></textarea>
+        <div class="js-formfield">
+          <div class="u-sv2">
+            <h3 class="p-heading--5">Tell us more about your Kafka use case</h3>
+            <textarea aria-label="Anything you'd like to communicate about your needs or interests?" rows="3" placeholder="Anything you'd like to communicate about your needs or interests?"></textarea>
+          </div>
         </div>
         <div class="row u-no-padding">
           <div class="col-6">
@@ -24,11 +26,11 @@ <h3 class="p-heading--5">How should we get in touch?</h3>
               </li>
               <li class="p-list__item">
                 <label for="company">Company name:</label>
-                <input required id="company" name="company" maxlength="255" type="text">
+                <input required id="company" name="company" maxlength="255" type="text" />
               </li>
               <li class="p-list__item">
                 <label for="title">Job title:</label>
-                <input required id="title" name="title" maxlength="255" type="text">
+                <input required id="title" name="title" maxlength="255" type="text" />
               </li>
               <li class="p-list__item">
                 <label for="email">Work email:</label>
@@ -40,7 +42,7 @@ <h3 class="p-heading--5">How should we get in touch?</h3>
               </li>
               <li class="p-list__item">
                 <label class="p-checkbox">
-                  <input class="p-checkbox__input" value="yes" aria-labelledby="canonicalUpdatesOptIn" name="canonicalUpdatesOptIn" type="checkbox">
+                  <input class="p-checkbox__input" value="yes" aria-labelledby="canonicalUpdatesOptIn" name="canonicalUpdatesOptIn" type="checkbox" />
                   <span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical's products and services.</span>
                 </label>
               </li>
@@ -58,6 +60,13 @@ <h3 class="p-heading--5">How should we get in touch?</h3>
             </ul>
 
             <div class="u-hide">
+              <h3>Your comments</h3>
+              <ul class="p-list">
+                <li class="p-list__item">
+                  <label for="Comments_from_lead__c">What would you like to talk to us about?</label>
+                  <textarea id="Comments_from_lead__c" name="Comments_from_lead__c" rows="5" maxlength="2000"></textarea>
+                </li>
+              </ul>
               <input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="%% returnURL %%" />
               <input type="hidden" aria-hidden="true" aria-label="hidden field" name="formid" value="%% formid %%" />
               <input type="hidden" aria-hidden="true" aria-label="hidden field" name="Consent_to_Processing__c" value="yes" />
@@ -88,15 +97,12 @@ <h3 class="p-heading--2">Thank you for enquiring about Kafka</h3>
             <p class="p-heading--4">A member of our team will be in touch within one working day.</p>
           </div>
           <div class="col-5 u-vertically-center u-hide--medium u-hide--small u-align--center">
-            {{
-              image(
-              url="https://assets.ubuntu.com/v1/cbae9a60-thank_you_orange_cmyk.svg",
-              alt="smile",
-              width="200",
-              height="200",
-              hi_def=True,
-              loading="auto",
-              ) | safe
+            {{ image(url="https://assets.ubuntu.com/v1/cbae9a60-thank_you_orange_cmyk.svg",
+                      alt="smile",
+                      width="200",
+                      height="200",
+                      hi_def=True,
+                      loading="auto") | safe
             }}
           </div>
         </div>