https://gymsales.io/wp-content/themes/GymSales/bov/js/multistep-marketo.js?ver=31.05.2024.10.34.28

1//Marketo multistep forms
2if (d.get('.p-multistep--marketo')) {
3
4  var userConfig = {
5    buttons: {
6      prev: {
7        label: "Previous",
8        disabled: false
9      },
10      next: {
11        label: "Next Step"
12      }
13    },
14    requiredFields: [
15      {
16        name: "Business_Type__c",
17        message: "Please select your business type"
18      },
19      {
20        name: "Modality__c",
21        message: "Please select your business type"
22      },
23      {
24        name: 'Business_Growth_Stage__c',
25        message: "Please select the number of locations"
26      },
27      {
28        name: "FirstName",
29        message: "Please enter your first name"
30      },
31      {
32        name: "LastName",
33        message: "Please enter your last name"
34      },
35      {
36        name: "Email",
37        message: "Please enter your email"
38      },
39      {
40        name: "Phone",
41        message: "Please enter your phone"
42      }
43    ]
44  };
45
46//Codepen code
47  window.addEventListener('load', (event) => {
48    MktoForms2.whenReady(function (form) {
49
50      var formEl = form.getFormElem()[0],
51        arrayify = getSelection.call.bind([].slice);
52
53      if (!form.getFormElem()[0].classList.contains('marketo-multistep')) {
54        return;
55      }
56
57      var fieldRowStor = ".mktoForm > .mktoFormRow",
58        buttonRowStor = ".mktoForm > .mktoButtonRow",
59        buttonStor = ".mktoButtonRow .mktoButton",
60        fsaatPrefix = "fsaat-",
61        localFragmentAttr = "data-form-local-fragment";
62
63      var CSSOM_RULEPOS_FIRST = 0;
64
65      var fieldRows = formEl.querySelectorAll(fieldRowStor),
66        submitButtonRow = formEl.querySelector(buttonRowStor),
67        submitButton = submitButtonRow.querySelector(buttonStor);
68
69      userConfig.requiredFields
70        .map(function (fieldDesc) {
71          fieldDesc.label = formEl.querySelector("[for*='" + fieldDesc.name + "']");
72          fieldDesc.refEl = formEl.querySelector("[name*='" + fieldDesc.name + "']");
73          return fieldDesc;
74        })
75        .forEach(function (fieldDesc) {
76          if (fieldDesc.label) {
77            fieldDesc.label.parentNode.classList.add("mktoRequiredField");
78          }
79        });
80
81      var dynableSheet = arrayify(document.styleSheets)
82        .filter(function (sheet) {
83          if (sheet.ownerNode) {
84            return sheet.ownerNode.nodeName == "STYLE";
85          } else {
86            return false
87          }
88        })[0];
89
90      arrayify(fieldRows).forEach(function (row, rowIdx) {
91        var rowPos = {
92          isFirst: rowIdx == 0,
93          isLast: rowIdx == fieldRows.length - 1
94        };
95
96        // id each wrapper row in DOM order
97        row.id = fsaatPrefix + rowIdx;
98
99        var navButtonRow = rowPos.isLast
100            ? submitButtonRow
101            : submitButtonRow.cloneNode(true),
102          newRowAxis = row.nextSibling,
103          nextEnabled = !rowPos.isLast,
104          prevEnabled = !rowPos.isFirst && !userConfig.buttons.prev.disabled,
105          newButtonAxis,
106          newButtonTmpl,
107          navButtons = {};
108
109        if (nextEnabled) {
110          navButtons.next = navButtonRow.querySelector(buttonStor);
111        }
112
113        if (prevEnabled) {
114          newButtonTmpl = newButtonAxis = navButtons.next || submitButton;
115          navButtons.prev = newButtonTmpl.cloneNode();
116        }
117
118        Object.keys(navButtons).forEach(function (dir) {
119          navButtons[dir].type = "button";
120          navButtons[dir].setAttribute("data-dir", dir);
121          navButtons[dir].innerHTML = userConfig.buttons[dir].label;
122        });
123
124        if (nextEnabled) {
125          row.parentNode.insertBefore(navButtonRow, newRowAxis);
126        }
127
128        if (prevEnabled) {
129          newButtonAxis.parentNode.insertBefore(navButtons.prev, newButtonAxis);
130        }
131
132        navButtonRow.addEventListener("click", function (e) {
133          if (e.target.tagName == "BUTTON" && e.target.type == "button") {
134            if (e.target.getAttribute("data-dir") == "next" && !isCustomValid(true, row)) {
135              return;
136            }
137            fsaatSet(row, e.target.getAttribute("data-dir"));
138          }
139        });
140
141        dynableSheet.insertRule(
142          [
143            ".mktoForm[" + localFragmentAttr + "='#" + row.id + "']" + " " + ".mktoFormRow#" + row.id + ",",
144            ".mktoForm[" + localFragmentAttr + "='#" + row.id + "']" + " " + ".mktoFormRow#" + row.id + " + " + ".mktoButtonRow",
145            "{ display: block; }"
146          ].join(" "),
147          CSSOM_RULEPOS_FIRST
148        );
149
150      });
151
152      function fsaatSet(current, dir) {
153        var FSAAT_DIR_PREV = "prev",
154          FSAAT_DIR_NEXT = "next";
155
156        var dir = dir || FSAAT_DIR_NEXT,
157          currentIndex,
158          newHash;
159
160        if (current instanceof HTMLElement) {
161          currentIndex = +current.id.split(fsaatPrefix)[1];
162        } else if (!isNaN(current)) {
163          currentIndex = current;
164
165        } else {
166          currentIndex = -1;
167        }
168
169        //Change pagination bullets
170        if (currentIndex != -1) {
171          if (dir == FSAAT_DIR_NEXT) {
172            nextStep();
173          } else {
174            prevStep();
175          }
176        }
177
178        newHash = "#" + fsaatPrefix + (dir == FSAAT_DIR_NEXT ? ++currentIndex : --currentIndex);
179
180        formEl.setAttribute(localFragmentAttr, newHash);
181      }
182
183      function isCustomValid(native, currentStep) {
184        form.submittable(false);
185
186        var currentStep = currentStep || formEl,
187          currentValues = form.getValues();
188
189        var currentUnfilled = userConfig.requiredFields
190          .filter(function (fieldDesc) {
191            return currentStep.contains(fieldDesc.refEl) && (!currentValues[fieldDesc.name] || (fieldDesc.refEl.type == "checkbox" && currentValues[fieldDesc.name] == "no"));
192          });
193
194        if (currentUnfilled.length) {
195          form.showErrorMessage(currentUnfilled[0].message, MktoForms2.$(currentUnfilled[0].refEl));
196          return false;

197        } else {
198          form.submittable(true);
199          return true;
200        }
201      }
202
203      form.onValidate(isCustomValid);
204      fsaatSet();
205    });
206
207    //FormsPlus::Wrapper Row/Column Tagger
208    window.FormsPlus = window.FormsPlus || {
209      allDescriptors: {},
210      allMessages: {},
211      detours: {}
212    };
213
214    FormsPlus.tagWrappers = function tagWrappers() {
215      /* common vars & aliases */
216      var ANCESTORS_STOR = ".mktoFormRow, .mktoFormCol",
217        INPUTS_STOR = "INPUT,SELECT,TEXTAREA,BUTTON,[data-name],.mktoPlaceholder,LEGEND",
218        attrTag = "data-wrapper-for",
219        attrDone = "data-initial-wrapper-tagging-complete",
220        placeholderPrefix = "mktoPlaceholder",
221        arrayify = getSelection.call.bind([].slice);
222
223      /* utility fn to tag wrapper containers with inner form inputs */
224      function tagMktoWrappers(formEl) {
225        arrayify(formEl.querySelectorAll(ANCESTORS_STOR)).forEach(function (ancestor) {
226          ancestor.setAttribute(attrTag, "");
227          arrayify(ancestor.querySelectorAll(INPUTS_STOR)).forEach(function (input) {
228            var currentTag = ancestor.getAttribute(attrTag);
229            ancestor.setAttribute(attrTag, [
230              currentTag ? currentTag : "",
231              input.id,
232              input.name != input.id ? input.name : "",
233              input.getAttribute('data-name'),
234              input.nodeName == "LEGEND" ? input.textContent : "",
235              arrayify(input.classList)
236                .filter(function (cls) {
237                  return cls.indexOf(placeholderPrefix) == 0;
238                })
239                .map(function (cls) {
240                  ancestor.classList.add(placeholderPrefix);
241                  return cls.replace(placeholderPrefix, "", 0);
242                })
243                .join(" ")
244            ].join(" ").trim());
245          });
246        });
247      }
248
249      MktoForms2.whenRendered(function (form) {
250        var formEl = form.getFormElem()[0];
251        tagMktoWrappers(formEl);
252        formEl.setAttribute(attrDone, "true");
253      });
254
255    };
256
257    FormsPlus.tagWrappers();
258  });
259
260//My pagination logic
261  let stepIndex = 0;
262  const STEP_COUNT = 2;
263
264  function nextStep() {
265    if (stepIndex >= STEP_COUNT - 1) {
266      return;
267    }
268
269    //Update pagination
270    d.getAll('.p-multistep__bullet')[stepIndex].classList.remove('p-multistep__bullet--current');
271    d.getAll('.p-multistep__bullet')[stepIndex].classList.add('p-multistep__bullet--done');
272    d.getAll('.p-multistep__bullet')[stepIndex + 1].classList.add('p-multistep__bullet--current');
273
274    stepIndex++;
275  }
276
277  function prevStep() {
278    if (stepIndex <= 0) {
279      return;
280    }
281
282    //Update pagination
283    d.getAll('.p-multistep__bullet')[stepIndex].classList.remove('p-multistep__bullet--current');
284    d.getAll('.p-multistep__bullet')[stepIndex - 1].classList.remove('p-multistep__bullet--done');
285    d.getAll('.p-multistep__bullet')[stepIndex - 1].classList.add('p-multistep__bullet--current');
286
287    stepIndex--;
288  }
289
290}