Promo Forms

blocks/forms/formHelper.js

@@ -42,6 +42,9 @@ export const formMapping = [
   { type: 'inquiry', id: 'bbca06dd-57d2-433b-a8c1-d5cd18b4ce28' },
   // { type: 'share-story', id: 'a1086f3a-ed6e-47d1-9694-17f8c0a28612' },
   { type: 'share-story', id: '5d062792-bb0b-4f11-bc26-f3d3422ae4ec' },
+  { type: 'promo', id: '014f34d1-570e-49d9-b1a6-c630c5ef609f' },
+  { type: 'ebook-promo', id: 'b83700e4-f00b-4b92-9124-fab2968f60b5' },
+  { type: 'app-note-promo', id: 'ed0daf7c-99c6-4fd8-aa32-13d4e053fa64' },
 ];
 
 export function getFormId(type) {

blocks/forms/forms.css

@@ -3,6 +3,13 @@
   --border-color: #bebebe;
 }
 
+.forms.block .no-type-msg {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+}
+
 /* stylelint-disable no-descending-specificity */
 .hs-form .hs-dependent-field,
 .hs-form .hs-form-field {

blocks/forms/forms.js

@@ -1,7 +1,9 @@
 /* eslint-disable import/no-cycle */
-import { button, div, h3 } from '../../scripts/dom-helpers.js';
+import {
+  button, div, h3, li, p, ul,
+} from '../../scripts/dom-helpers.js';
 import { loadCSS, toClassName } from '../../scripts/lib-franklin.js';
-import { loadScript } from '../../scripts/scripts.js';
+import { loadScript, toTitleCase } from '../../scripts/scripts.js';
 import {
   createSalesforceForm, extractFormData, formMapping, getFormFieldValues,
   getFormId, updateFormFields,
@@ -28,7 +30,7 @@ export function createHubSpotForm(formConfig, target, type = '') {
               const submitButton = button({
                 type: 'submit',
                 class: 'button primary',
-              }, submitInput.value || 'Submit');
+              }, formConfig.cta || submitInput.value || 'Submit');
               submitInput.replaceWith(submitButton);
             }
           }
@@ -69,5 +71,11 @@ export default async function decorate(block, index) {
 
   block.innerHTML = '';
   block.appendChild(form);
-  loadHubSpotScript(createHubSpotForm.bind(null, formConfig, target, formType));
+  if (formType) {
+    loadHubSpotScript(createHubSpotForm.bind(null, formConfig, target, formType));
+  } else {
+    const formTypeList = ul({ class: 'no-type-msg' }, p('Please add one of the following type to the block:'));
+    formMapping.map((item) => formTypeList.appendChild(li(toTitleCase(item.type))));
+    block.appendChild(formTypeList);
+  }
 }

scripts/scripts.js

@@ -1350,4 +1350,8 @@ export async function getCountryCode() {
   return data.country_code;
 }
 
+export function toTitleCase(str) {
+  return str.split('-').join(' ').toLowerCase().replace(/(?:^|\s)\w/g, (match) => match.toUpperCase());
+}
+
 loadPage();