Skip to content

Commit

Permalink
Merge pull request #14259 from britneywwc/forms-kafka
Browse files Browse the repository at this point in the history 
Include comments message in payload
  • Loading branch information
@britneywwc
britneywwc committed Sep 4, 2024
2 parents da69005 + dcc3d37 commit 70ec4dc
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 96 deletions.
8 changes: 7 additions & 1 deletion static/js/src/dynamic-forms.js
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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");

Expand Down
167 changes: 87 additions & 80 deletions templates/shared/forms/interactive/ai.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
36 changes: 21 additions & 15 deletions templates/shared/forms/interactive/kafka.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 70ec4dc

Please sign in to comment.