<script> (function () { var fillScript = document.createElement('script'), // the LI autofill script (client-side) iframeHolderDiv = document.createElement('div'), // so we can style location of button autoFillLocation = document.querySelector("form[id^='mktoForm_']"), // will only find first Marketo form on a page firstRow, mktoForm, hiddenLinkedInInputs = document.createDocumentFragment(), // since we're creating multiple nodes, just do the add once hiddenInputCreator = function (tagName, onChangeHandler) { var newInput = document.createElement('input'); newInput.style.position = 'absolute'; newInput.style.left = '-999em'; newInput.setAttribute('name', tagName + '-flag'); newInput.setAttribute('type', 'text'); newInput.setAttribute('id', tagName + '-flag'); newInput.style.display = 'none'; newInput._value = newInput.value; Object.defineProperty(newInput, 'value', { get: function () { return this._value; }, set: function (v) { this._value = v; onChangeHandler(v); }, }); hiddenLinkedInInputs.appendChild(newInput); fillScript.setAttribute('data-field-' + tagName, tagName + '-flag'); }, linkedInAutofillClicked = false; console.log(firstRow); console.log(mktoForm); // style the holder div iframeHolderDiv.style.textAlign = 'center'; iframeHolderDiv.style.margin = '10px 0px'; // required by LinkedIn fillScript.setAttribute('type', 'IN/Form2'); // You don't need any of these fields if they're // named the same thing as the ones returned from LinkedIn. // Unfortunately means you can't disable them, either... // LinkedIn will set them automatically if it finds them // in your form so you need to map them to 'pseudo-hidden' // fields (like way offscreen). HIDDEN FIELDS WON'T WORK. /*fillScript.setAttribute('data-field-firstname', 'FirstName'); fillScript.setAttribute('data-field-lastname', 'LastName'); fillScript.setAttribute('data-field-phone', 'Phone'); fillScript.setAttribute('data-field-company', 'Company'); fillScript.setAttribute('data-field-title', 'Title');*/ // 'Pseudo-hide' input fields to give us a place to store // the email address and country LI provides to us. We do this for 2 // reasons: // [1] To keep the main email field from being filled // We *could* autofill email, but if they don't use a business // address (few do) then submit will reject it. Better to make them // just fill it to start with. We will also use this to trigger the GA // autofill event. // [2] To allow us to map the ISO country code LinkedIn provides us // to the [sigh] full-text version of the country our select element // requires hiddenInputCreator('email', function (newValue) { // fire the GA event for autofill console.log('%s value changed to %s', this.ID, newValue); // this sets the flag to ID an autofill event. We are // gating this on email since it's the only guaranteed // field that we can't see on screen so can't be set by // a user directly... linkedInAutofillClicked = true; }); hiddenInputCreator('country', function (newValue) { // console.log('%s value changed to %s', this.ID, newValue); // map to the country we have in our select dropdown var newCountry = {{JS - ISO Country Code to EVBG Country Name}}(newValue); // sets the value in the form the user can see if (typeof MktoForms2 !== 'undefined') { mktoForm.setValues({ Country: newCountry }); } }); hiddenInputCreator('state', function (newValue) { // only set state if we're in the US if(mktoForm.getValues()['Country'] === "United States"){ mktoForm.setValues({ State: newValue.toUpperCase() }); } }); // add the iframe to the holder div iframeHolderDiv.appendChild(fillScript); autoFillLocation.prepend(iframeHolderDiv); if (typeof MktoForms2 !== 'undefined') { MktoForms2.whenReady(function (form) { // need the id of the form so we can hook up autofill // doing this way will work on any Marketo form fillScript.setAttribute('data-form', 'mktoForm_' + form.getId()); firstRow = document.querySelector('form .mktoFormRow'); mktoForm = form; // so we can use it above firstRow.appendChild(hiddenLinkedInInputs); // fragment vaporizes leaving input elements form.onSubmit(function (form) { // tell GA about it, but only if we know they autofilled if (linkedInAutofillClicked) { var values = form.getValues(), eventData = { category: 'LinkedIn Form AutoFill', action: 'mktoForm_' + form.getId() + '-', // will automatically set dlv-action which we'll pass to form id to name mapper in event submit in GTM label: [ values.Company, values.Industry, values.Title, values.Country, values.State, '{{Page Path}}', 'gclid:' + '{{JS - GA Client ID}}', ].join(' | '), }; console.log(eventData); // 'eventData' automatically maps to the GTM variables 'dlv - category', 'dlv - action', etc. window.dataLayer.push({ event: 'formLinkedInAutoFill', // MUST FIX WHEN EXPANDING AS EVENT ONLY FIRES ON DEMO PAGE eventData: eventData, eventCallback: function () { // this just prints that we've sent it console.log('event submitted: %O', eventData); }, }); // populated on the GTM side } return false; }); }); } })(); </script> <!-- what LinkedIn recommends which doesn't allow any customization --> <!--<script type="IN/Form2" data-form="mktoForm_1248" data-field-firstname="FirstName" data-field-lastname="LastName" data-field-phone="Phone" data-field-company="Company" data-field-title="Title"></script>-->