For addition to Google Tag Manager; expected trigger: All Pages.

auto-append-gdpr-field-in-marketo.html

<script type="text/plain" id="gdpr-acknowledgement">
<div class="mktoFormRow gdpr-acknowledgement-row" style="margin-bottom:1em;">
    <div class="mktoFormCol" style="margin-bottom: 10px;">
        <div class="mktoFieldWrap mktoRequiredField" style="display: flex !important;">
            <div class="mktoLogicalField mktoCheckboxList mktoHasWidth mktoRequired mktoInvalid"
                 style="position: relative;">
                <div class="mktoAsterix" style="position: absolute; right: 0;">*</div>
                <input name="PSEUDO_GDPR_Opt_In__c" id="PSEUDO_GDPR_Opt_In__c" type="checkbox" value="yes" class="mktoField">
                <label for="PSEUDO_GDPR_Opt_In__c"></label>
            </div>
            <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
            <label for="PSEUDO_GDPR_Opt_In__c" class="mktoLabel mktoHtmlText mktoHasWidth" style="display:block;font-weight:400;margin-left:10px !important;margin-top: 0 !important;">
                By checking this box, I acknowledge that I have
                read, understand, and agree to the SignalFx
                <a href="https://signalfx.com/privacy-policy" target="_blank">Privacy Policy</a> and
                <a href="https://signalfx.com/terms-and-conditions/" target="_blank">Terms of Service</a>.
            </label>
        </div>
    </div>
    <div class="mktoClear"></div>
</div>
</script>
<script>
    (function () {
        // Constants
        var MKTO_TRUE = 'yes'; //constants not compatible with GTM :(
        var MKTO_FALSE = 'no'; //constants not compatible with GTM :(

        // "Globals" (not really)
        var $;

        // Fallback settings, in case Marketo Form2 API isn't yet loaded
        var intervalReference;
        var intervalElapsed = 0;
        var intervalTimeout = 50;
        var intervalMaxWait = 2000;

        // Field settings
        var gdprInputName = 'GDPR_Opt_In__c';
        var gdprPseudoInputName = 'PSEUDO_' + gdprInputName;

        var onReadyCallback = function (form) {
            var $form = form.getFormElem();
            var $buttonRow;
            var newFormRowHTML;
            var hiddenFields;
            var $gdprPseudoCheckbox;

            if ($form.find(':input[name="' + gdprInputName + '"]').length || form.vals().GDPR_Opt_In__c) {
                // If this form already has a GDPR Input Field
                // Don't try to override it
                return false;
            }

            if ($form.find('.gdpr-acknowledgement-row').length) {
                // If this callback has already been fired/loaded
                // on this form, don't add a duplicate
                return false;
            }

            $buttonRow = $form.find('.mktoButtonRow');
            if (!$buttonRow.length) {
                // If there is no button row, we won't know where
                // to add the new field... This is likely an error
                return false;
            }
            newFormRowHTML = $('#gdpr-acknowledgement').html();
            if (!newFormRowHTML) {
                // This should never happen because the HTML is
                // included with this script, but let's add a
                // graceful fallback in case something strange
                // happens
                return false;
            }

            $buttonRow[0].insertAdjacentHTML(
                'beforebegin',
                newFormRowHTML
            );

            // Add the real GDPR field into hidden fields to
            // keep track of (and will ultimately submit) the
            // user's selection on the pseudo-checkbox
            hiddenFields = {};
            hiddenFields[gdprInputName] = MKTO_FALSE;
            form.addHiddenFields(hiddenFields);

            // Watch the pseudo input field and update the
            // hidden field appropriately, when changed
            $gdprPseudoCheckbox = $form.find('input[name="' + gdprPseudoInputName + '"]');
            $gdprPseudoCheckbox.change(function () {
                var values = form.vals();
                if (this.checked) {
                    values[gdprInputName] = MKTO_TRUE;
                } else {
                    values[gdprInputName] = MKTO_FALSE;
                }
                form.setValues(values);
            });

            form.onValidate(function () {
                // Require the GDPR field to be selected
                if (form.vals()[gdprInputName] !== MKTO_TRUE) {
                    // Prevent form submission
                    form.submittable(false);
                    // Show error message near the checkbox
                    form.showErrorMessage(
                        'Please accept our privacy policy & terms of service to continue.',
                        $form.find('label[for="' + gdprPseudoInputName + '"]').eq(0)
                    );
                } else {
                    // Allow form submission
                    // PS: Don't worry, the default validators
                    //     will still be able to prevent submits
                    form.submittable(true);
                }
            });
        };

        var initialize = function () {
            // The API comes packaged with its own version
            // of jQuery; so, we'll rely on that, just in
            // case the page doesn't have jQuery installed
            $ = window.MktoForms2.$;

            // This whenReady callback will be executed
            // independently on every form that is loaded
            // on the page
            MktoForms2.whenReady(onReadyCallback);
        };

        if (window.MktoForms2) {
            // If Marketo's Forms2 API is already
            // loaded, let's get goin'!
            initialize();
        } else {
            // Ugh. This should never happen because the Forms2 API
            // should be loaded before this loads, but SignalFx's
            // current setup isn't ideal, so we may have wait a bit
            // and watch to see when MktoForms2 appears. When it does,
            // we'll initialize the script normally.
            intervalReference = setInterval(
                function () {
                    if (intervalElapsed > intervalMaxWait) {
                        clearInterval(intervalReference);
                    } else {
                        if (window.MktoForms2) {
                            clearInterval(intervalReference);
                            initialize();
                        }
                    }
                    intervalElapsed += intervalTimeout;
                },
                intervalTimeout
            );
        }
    }());
</script>