javascript Marketo：如何放置字段低于渐进式分析字段

Posted 2021-05-04

/*
FormsPlus::Wrapper Row/Column Tagger
 @preserve @author Sanford Whiteman, TEKNKL (blog.teknkl.com / [e-mail])
 @version v0.2.1
 @copyright Copyright 2016, 2017, 2018 FigureOne, Inc.
 @license MIT License: http://www.opensource.org/licenses/mit-license
 You MUST include the licenses and credits herein in uses & reproductions of this software.
 */
window.FormsPlus = window.FormsPlus || {
  allDescriptors: {},
  allMessages: {},
  detours: {}
};

FormsPlus.tagWrappers = function tagWrappers() {
  /* common vars & aliases */
  var ANCESTORS_STOR = '.mktoFormRow, .mktoFormCol',
    INPUTS_STOR = 'INPUT,SELECT,TEXTAREA,BUTTON,[data-name]',
    attrTag = 'data-wrapper-for',
    _forEach = Array.prototype.forEach;

  /* utility fn to tag wrapper containers with inner form inputs */
  function tagMktoWrappers(formEl) {
    _forEach.call(formEl.querySelectorAll(ANCESTORS_STOR), function(ancestor) {
      ancestor.setAttribute(attrTag, '');
      _forEach.call(ancestor.querySelectorAll(INPUTS_STOR), function(input) {
        var currentTag = ancestor.getAttribute(attrTag);
        ancestor.setAttribute(attrTag, [
          currentTag ? currentTag : '', 
          input.id, 
          input.name != input.id ? input.name : '',
          input.getAttribute('data-name')
        ].join(' ').trim());
      });
    });
  }

  MktoForms2.whenRendered(function(form) {
    var formEl = form.getFormElem()[0];
    tagMktoWrappers(formEl);
  });

};

FormsPlus.tagWrappers();

/*
FormsPlus::Reorder Fields
 @preserve @author Sanford Whiteman, TEKNKL (blog.teknkl.com / [e-mail])
 @version v0.2.2
 @copyright Copyright 2016, 2017, 2018 FigureOne, Inc.
 @license MIT License: http://www.opensource.org/licenses/mit-license
 You MUST include the licenses and credits herein in uses & reproductions of this software.
 */
window.FormsPlus = window.FormsPlus || {
  allDescriptors: {},
  allMessages: {},
  detours: {}
};

FormsPlus.reorderFields = function reorderFields(form, fieldOrder, progProToTop) {
	var formEl = form.getFormElem()[0],
			buttonRow = formEl.querySelector('.mktoButtonRow'),
      progProSepRow = formEl.querySelector('.mktoFormRow[data-wrapper-for="progpro-separator"]'),
      progProBlock = document.createRange();

  if (progProToTop && progProSepRow) {
    progProBlock.setStartAfter(progProSepRow);
    progProBlock.setEndBefore(buttonRow);
    formEl.insertBefore(progProBlock.extractContents(),formEl.firstElementChild);
  }
    
	fieldOrder
		.map(function(fieldName) {
			return formEl.querySelector('.mktoFormRow[data-wrapper-for="' + fieldName + '"]');
		})
		.forEach(function(fieldRow) {
			fieldRow && formEl.insertBefore(fieldRow, progProSepRow || buttonRow);
		});
  
}

/*
Current example found in ADV's Marketo instance: 
https://info.advent.com/Testing-LPs-for-2018-NEW-FORMS-SJ_Standard-DRIP-custom.html

1. Place the following JavaScript snippet just above the </body> tag in the Landing Page template. 
First, though, download the contents of the formsPlus-reorder.js and formsPlus-tagger.js and 
re-upload them into the client's Marketo instance and update the full link with the new URL.

*/


<script id="mktoForms2Lib" src="/js/forms2/js/forms2.min.js"></script>
<script id="teknklFormsPlus-0.2.2-reorder" src="https://info.advent.com/rs/694-KCV-926/images/formsPlus-reorder.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(){ 
        MktoForms2.whenRendered(function(form){
            var fieldOrder = [${fieldReorderSet}];
            FormsPlus.reorderFields(form, fieldOrder);
        });
    });
</script>
<script id="teknklFormsPlus-0.2.1-tag" src="https://info.advent.com/rs/694-KCV-926/images/formsPlus-tagger.js"></script>

/* 2. In the Guided Template, create a mktoString field at the top like the following:

<meta class="mktoString" id="fieldReorderSet" mktoName="Field Reorder Set" default="'FirstName','LastName','Email','Company','Profile__c','Country','AUM_Range__c','Title','Job_Description__c','Phone','mktoCheckbox_16414_0 marketingOptin'">

This "fieldReorderSet" value corresponds with the ${fieldReorderSet} on the 6th line of the JavaScript snippet above. 


3. Determine the preferred field order in your Forms 2.0 form. Find all of the form field IDs and list them out in the following way: comma-delimited and surrounded by single quotes.

'FirstName','LastName','Email','Company'



4. Figure out which ones are the progressive form fields and put them in the middle, putting the final field or fields at the end:

'FirstName','LastName','Email','Company','progProfID','progProfID2','progProfID3','progProfID4','commentsBoxID'



5. Finicky optional step: if you intend to put a single checkbox field at the end, like say an opt-in checkbox, then you will need to do the following. Find out the Marketo Checkbox ID that has been created (go to inspect elements and find it), then find the ID of the field, and then concatenate them together with a space, like this: 'mktoCheckbox_16414_0 marketingOptin'. Then when you put that at the end of the list of fields, it will force the checkbox to be wherever you want it, like this if you wanted to force it to be at the end:

'FirstName','LastName','Email','Company','Profile__c','Country','AUM_Range__c','Title','Job_Description__c','Phone','mktoCheckbox_16414_0 marketingOptin'

In this example, these are the progressive profiling fields: 'Title','Job_Description__c','Phone'

6. In the Guided LP you can now pop in these values in the "Field Reorder Set" variable field without having to make updates to the LP Template.

*/