diff --git a/package-lock.json b/package-lock.json index 0ae0ab4551..cbd8d2528c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "@hashicorp/react-hashi-stack-menu": "^3.0.0", "@hashicorp/react-head": "^3.3.2", "@hashicorp/react-inline-svg": "^6.1.0", - "@hashicorp/react-marketo-form": "^0.8.4", + "@hashicorp/react-marketo-form": "^0.9.0", "@hashicorp/react-min-100-layout": "^2.0.1", "@hashicorp/react-product-downloads-page": "^2.9.1", "@hashicorp/react-search": "^6.5.0", @@ -4569,9 +4569,9 @@ } }, "node_modules/@hashicorp/react-marketo-form": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/@hashicorp/react-marketo-form/-/react-marketo-form-0.8.4.tgz", - "integrity": "sha512-pN9KFkXhHviMHsn6ylIlnXZHyKsG6lCNlgL4eLAculaRUSYwN1BoPrAA2zrYR7VHBbvrSEh66SXbS9Fi0x0v5A==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-marketo-form/-/react-marketo-form-0.9.0.tgz", + "integrity": "sha512-owcs/Wbn+uQFN/e1++TfDNctbVuCoev6k7eehdWmLvQIljIFmiqNjVz59diKbkdLFBCOYDM0jMXJFu2u2PV/JA==", "dependencies": { "@hashicorp/platform-analytics": "^0.11.2", "@hashicorp/react-button": "^6.2.0", diff --git a/package.json b/package.json index f0244b402b..7f04f4f042 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "@hashicorp/react-hashi-stack-menu": "^3.0.0", "@hashicorp/react-head": "^3.3.2", "@hashicorp/react-inline-svg": "^6.1.0", - "@hashicorp/react-marketo-form": "^0.8.4", + "@hashicorp/react-marketo-form": "^0.9.0", "@hashicorp/react-min-100-layout": "^2.0.1", "@hashicorp/react-product-downloads-page": "^2.9.1", "@hashicorp/react-search": "^6.5.0", diff --git a/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.module.css b/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.module.css index c64ef71669..9d0d6ce091 100644 --- a/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.module.css +++ b/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.module.css @@ -31,6 +31,17 @@ } } + & [data-field-id='privacy-policy-text'] { + & span, + & a { + color: var(--token-color-foreground-high-contrast); + } + + & a { + text-decoration: underline; + } + } + /* Remove margin from around the checkbox input */ & [data-field-id='Consent_Privacy_Policy__c'] > [class*='style_root'] { margin: 0; @@ -64,11 +75,14 @@ & [data-field-id='Consent_Privacy_Policy__c'] label { color: var(--token-color-foreground-primary); + } - & a { + & [data-field-id='privacy-policy-text'] { + & span, & a { color: var(--token-color-foreground-primary); } } + & input { color: var(--token-color-foreground-high-contrast); } @@ -91,6 +105,11 @@ grid-column: 1 / -1; } + /* Privacy disclaimer */ + & [data-field-id='privacy-policy-text'] { + grid-column: 1 / 3; + } + /* Submit button */ & button { align-self: end; diff --git a/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.ts b/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.ts index 64f08708ad..b81c875941 100644 --- a/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.ts +++ b/src/views/certifications/components/signup-form-area/components/newsletter-signup-form/marketo-form-data.ts @@ -14,10 +14,10 @@ export const marketoFormData: MarketoFormAPIResponse = { id: 2459, name: 'FORM - Newsletter Sign Up', description: '', - createdAt: '2022-10-26T23:38:43Z+0000', - updatedAt: '2023-01-03T20:57:20Z+0000', + createdAt: '2023-05-23T16:15:32Z+0000', + updatedAt: '2023-05-23T16:15:32Z+0000', url: 'https://app-ab32.marketo.com/#FO2459B2', - status: 'approved', + status: 'draft', theme: 'simple', language: 'English', locale: null, @@ -25,6 +25,22 @@ export const marketoFormData: MarketoFormAPIResponse = { labelPosition: 'left', fontFamily: 'Helvetica', fontSize: '13px', + folder: { + type: 'Folder', + value: 35855, + folderName: 'f. Dotcom', + }, + knownVisitor: { + type: 'form', + template: null, + }, + thankYouList: [ + { + followupType: 'url', + followupValue: 'https://www.hashicorp.com/thank-you/contact-sales', + default: true, + }, + ], buttonLocation: 120, buttonLabel: 'Submit', waitingLabel: 'Please Wait', @@ -39,23 +55,49 @@ export const marketoFormData: MarketoFormAPIResponse = { { id: 'Email', dataType: 'email', - validationMessage: 'Must be a valid email address.', + validationMessage: 'Please enter a valid business email address.', + rowNumber: 0, + columnNumber: 0, required: true, - visibilityRules: { ruleType: 'alwaysShow' }, + formPrefill: true, + visibilityRules: { + ruleType: 'alwaysShow', + }, hintText: 'Business Email Address', }, { id: 'Consent_Privacy_Policy__c', + label: 'Send me news about HashiCorp products, releases and events.', dataType: 'checkbox', validationMessage: 'This field is required.', - required: true, - fieldMetaData: { initiallyChecked: false }, - visibilityRules: { ruleType: 'alwaysShow' }, + rowNumber: 1, + columnNumber: 0, + required: false, + formPrefill: true, + fieldMetaData: { + initiallyChecked: false, + }, + visibilityRules: { + ruleType: 'alwaysShow', + }, + }, + { + id: 'privacy-policy-text', + labelWidth: 260, + dataType: 'htmltext', + rowNumber: 2, + columnNumber: 0, + visibilityRules: { + ruleType: 'alwaysShow', + }, + text: 'By submitting this form, you acknowledge and agree that HashiCorp will process your personal information in accordance with the Privacy Policy.', }, { id: 'utm_medium__c', label: 'utm_medium:', dataType: 'hidden', + rowNumber: 3, + columnNumber: 0, required: false, autoFill: { value: '', @@ -67,6 +109,8 @@ export const marketoFormData: MarketoFormAPIResponse = { id: 'utm_source__c', label: 'utm_source:', dataType: 'hidden', + rowNumber: 4, + columnNumber: 0, required: false, autoFill: { value: '', @@ -78,6 +122,8 @@ export const marketoFormData: MarketoFormAPIResponse = { id: 'utm_campaign__c', label: 'utm_campaign:', dataType: 'hidden', + rowNumber: 5, + columnNumber: 0, required: false, autoFill: { value: '', @@ -89,20 +135,34 @@ export const marketoFormData: MarketoFormAPIResponse = { id: 'utm_cid__c', label: 'utm_cid:', dataType: 'hidden', + rowNumber: 6, + columnNumber: 0, required: false, - autoFill: { value: '', valueFrom: 'query', parameterName: 'utm_cid' }, + autoFill: { + value: '', + valueFrom: 'query', + parameterName: 'utm_cid', + }, }, { id: 'utm_offer__c', label: 'utm_offer:', dataType: 'hidden', + rowNumber: 7, + columnNumber: 0, required: false, - autoFill: { value: '', valueFrom: 'query', parameterName: 'utm_offer' }, + autoFill: { + value: '', + valueFrom: 'query', + parameterName: 'utm_offer', + }, }, { id: 'form_page_url__c', label: 'form_page_url:', dataType: 'hidden', + rowNumber: 8, + columnNumber: 0, required: false, autoFill: { value: '', @@ -114,13 +174,21 @@ export const marketoFormData: MarketoFormAPIResponse = { id: 'utm_term__c', label: 'utm_term:', dataType: 'hidden', + rowNumber: 9, + columnNumber: 0, required: false, - autoFill: { value: '', valueFrom: 'query', parameterName: 'utm_term' }, + autoFill: { + value: '', + valueFrom: 'query', + parameterName: 'utm_term', + }, }, { id: 'utm_content__c', label: 'utm_content:', dataType: 'hidden', + rowNumber: 10, + columnNumber: 0, required: false, autoFill: { value: '', @@ -132,6 +200,8 @@ export const marketoFormData: MarketoFormAPIResponse = { id: 'utm_channel_bucket__c', label: 'utm_channel_bucket:', dataType: 'hidden', + rowNumber: 11, + columnNumber: 0, required: false, autoFill: { value: '', @@ -143,8 +213,14 @@ export const marketoFormData: MarketoFormAPIResponse = { id: 'Signed_Up_For_Newsletter__c', label: 'Signed Up For Newsletter:', dataType: 'hidden', + rowNumber: 12, + columnNumber: 0, required: false, - autoFill: { value: 'TRUE', valueFrom: 'default', parameterName: '' }, + autoFill: { + value: 'TRUE', + valueFrom: 'default', + parameterName: '', + }, }, ], },