[WD-18696] Ref: use form generator on /iot bubble (#14791)

* Added form for iot/smart-city * Added form for iot/smart-home * Added form for the rest of iot bubble * Fixes
canonical · Feb 27, 2025 · 43653a5 · 43653a5
1 parent a510071
commit 43653a5
Show file tree

Hide file tree

Showing 14 changed files with 449 additions and 780 deletions.
diff --git a/templates/internet-of-things/appstore.html b/templates/internet-of-things/appstore.html
@@ -489,12 +489,8 @@ <h2>Sign up for our IoT newsletter</h2>
     {% include "internet-of-things/shared/_latest-news-iot.html" %}
   {% endwith %}
 
-  <!-- Set default Marketo information for contact form below-->
-  <div class="u-hide"
-       id="contact-form-container"
-       data-form-location="/shared/forms/interactive/internet-of-things"
-       data-form-id="2639"
-       data-lp-id="5811"
-       data-return-url="https://ubuntu.com/internet-of-things/thank-you?product=appstore"
-       data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
+  {% with formId=2639 %}
+    {% include "/shared/forms/form-template.html" %}
+  {% endwith %}
+
 {% endblock content %}
diff --git a/templates/internet-of-things/digital-signage.html b/templates/internet-of-things/digital-signage.html
@@ -368,13 +368,8 @@ <h2>Build your own digital signage solution</h2>
     {% include "shared/contextual_footers/_contextual_footer.html" %}
   {% endwith %}
 
-  <!-- Set default Marketo information for contact form below-->
-  <div class="u-hide"
-       id="contact-form-container"
-       data-form-location="/shared/forms/interactive/internet-of-things"
-       data-form-id="1422"
-       data-lp-id="2166"
-       data-return-url="https://ubuntu.com/internet-of-things/thank-you?product=smart-displays"
-       data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
+  {% with formId=1422 %}
+    {% include "/shared/forms/form-template.html" %}
+  {% endwith %}
 
 {% endblock content %}
diff --git a/templates/internet-of-things/form-data.json b/templates/internet-of-things/form-data.json
@@ -0,0 +1,133 @@
+{
+  "form": {
+    "/internet-of-things": {
+      "templatePath": "/internet-of-things/index.html",
+      "childrenPaths": [
+        "/internet-of-things/appstore",
+        "/internet-of-things/digital-signage",
+        "/internet-of-things/gateways",
+        "/internet-of-things/management",
+        "/internet-of-things/networking",
+        "/internet-of-things/smart-displays"
+      ],
+      "isModal": true,
+      "modalId": "contact-modal",
+      "formData": {
+        "title": "Let's get your project to market faster!",
+        "introText": "Canonical partners with silicon companies, board manufacturers and ODMs to help the industry bring smart device and software capabilities to market faster. Tell us about your project so we can bring the right Canonical team members to the conversation to help you.",
+        "formId": 1266,
+        "returnUrl": "/internet-of-things#success",
+        "lpUrl": "https://pages.ubuntu.com/things-contact-us.html",
+        "product": ""
+      },
+      "fieldsets": [
+        {
+          "title": "Tell us more about your project",
+          "id": "about-project",
+          "fields": [
+            {
+              "type": "long-text",
+              "id": "about-project",
+              "label": "Abour your project"
+            }
+          ]
+        },
+        {
+          "title": "Do you have a commercial project?",
+          "id": "commercial-project",
+          "inputName": "commercial-project",
+          "inputType": "radio",
+          "isRequired": true,
+          "fields": [
+            {
+              "type": "radio",
+              "label": "Yes",
+              "value": "Yes"
+            },
+            {
+              "type": "radio",
+              "label": "No",
+              "value": "No"
+            }
+          ]
+        },
+        {
+          "title": "When do you need to ship?",
+          "id": "shipping-time",
+          "inputType": "radio",
+          "inputName": "shipping-time",
+          "isRequired": true,
+          "fields": [
+            {
+              "type": "radio",
+              "label": "Next 3 months",
+              "value": "Next 3 months"
+            },
+            {
+              "type": "radio",
+              "label": "Next 3 - 6 months",
+              "value": "Next 3 - 6 months"
+            },
+            {
+              "type": "radio",
+              "label": "Next 6 - 12 months",
+              "value": "Next 6 - 12 months"
+            },
+            {
+              "type": "radio",
+              "label": "No timeline - just researching",
+              "value": "No timeline - just researching"
+            }
+          ]
+        },
+        {
+          "title": "How should we get in touch?",
+          "id": "about-you",
+          "noCommentsFromLead": true,
+          "fields": [
+            {
+              "type": "text",
+              "id": "firstName",
+              "label": "First name",
+              "isRequired": true
+            },
+            {
+              "type": "text",
+              "id": "lastName",
+              "label": "Last name",
+              "isRequired": true
+            },
+            {
+              "type": "text",
+              "id": "company",
+              "label": "Company",
+              "isRequired": true
+            },
+            {
+              "type": "text",
+              "id": "title",
+              "label": "Job title",
+              "isRequired": true
+            },
+            {
+              "type": "email",
+              "id": "email",
+              "label": "Email address",
+              "isRequired": true
+            },
+            {
+              "type": "tel",
+              "id": "phone",
+              "label": "Mobile/cell phone number"
+            },
+            {
+              "type": "country",
+              "label": "Country",
+              "isRequired": true
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
diff --git a/templates/internet-of-things/gateways.html b/templates/internet-of-things/gateways.html
@@ -661,13 +661,8 @@ <h2>Sign up for our IoT newsletter</h2>
     {% include "internet-of-things/shared/_latest-news-iot.html" %}
   {% endwith %}
 
-  <!-- Set default Marketo information for contact form below-->
-  <div class="u-hide"
-       id="contact-form-container"
-       data-form-location="/shared/forms/interactive/internet-of-things"
-       data-form-id="1663"
-       data-lp-id="3143"
-       data-return-url="https://ubuntu.com/internet-of-things#success"
-       data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
+  {% with formId=1663 %}
+    {% include "/shared/forms/form-template.html" %}
+  {% endwith %}
 
 {% endblock content %}
diff --git a/templates/internet-of-things/index.html b/templates/internet-of-things/index.html
@@ -635,13 +635,6 @@ <h2>Ready to innovate?</h2>
     </div>
   </section>
 
-  <!-- Set default Marketo information for contact form below-->
-  <div class="u-hide"
-       id="contact-form-container"
-       data-form-location="/shared/forms/interactive/internet-of-things"
-       data-form-id="1266"
-       data-lp-id="2551"
-       data-return-url="/internet-of-things#success"
-       data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
+  {% include "/shared/forms/form-template.html" %}
 
 {% endblock content %}
diff --git a/templates/internet-of-things/management.html b/templates/internet-of-things/management.html
@@ -94,7 +94,8 @@ <h2>
           </p>
           <hr class="p-rule--muted" />
           <p>
-            <a href="/internet-of-things/contact-us?product=management" class="js-invoke-modal">Get in touch to discuss your device management needs&nbsp;&rsaquo;</a>
+            <a href="/internet-of-things/contact-us?product=management"
+               class="js-invoke-modal">Get in touch to discuss your device management needs&nbsp;&rsaquo;</a>
           </p>
         </div>
       </div>
@@ -221,7 +222,8 @@ <h2>
             We know that everyone’s needs are different. That’s why we have multiple solutions available for you to use to manage your devices.
           </p>
           <hr class="p-rule--muted" />
-          <a href="/internet-of-things/contact-us?product=management" class="js-invoke-modal">Get in touch to discuss the best solution for you&nbsp;&rsaquo;</a>
+          <a href="/internet-of-things/contact-us?product=management"
+             class="js-invoke-modal">Get in touch to discuss the best solution for you&nbsp;&rsaquo;</a>
         </div>
       {%- endif -%}
 
@@ -489,13 +491,8 @@ <h2>Let's work together</h2>
     </div>
   </section>
 
-<!-- Set default Marketo information for contact form below-->
-<div class="u-hide"
-     id="contact-form-container"
-     data-form-location="/shared/forms/interactive/internet-of-things"
-     data-form-id="4296"
-     data-lp-id=""
-     data-return-url="/internet-of-things#success"
-     data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
+  {% with formId=4296 %}
+    {% include "/shared/forms/form-template.html" %}
+  {% endwith %}
 
 {% endblock content %}
diff --git a/templates/internet-of-things/networking.html b/templates/internet-of-things/networking.html
@@ -247,13 +247,8 @@ <h2>Build and operate programmable NICs on Ubuntu</h2>
     {% include "shared/contextual_footers/_contextual_footer.html" %}
   {% endwith %}
 
-  <!-- Set default Marketo information for contact form below-->
-  <div class="u-hide"
-       id="contact-form-container"
-       data-form-location="/shared/forms/interactive/internet-of-things"
-       data-form-id="3484"
-       data-lp-id=""
-       data-return-url="https://ubuntu.com/internet-of-things/thank-you?product=networking"
-       data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
+  {% with formId=3484 %}
+    {% include "/shared/forms/form-template.html" %}
+  {% endwith %}
 
 {% endblock content %}