form.tpl

<form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form" id="pardot-form">
	%%form-opening-general-content%%

	%%form-if-thank-you%%
	%%form-javascript-focus%%
	%%form-thank-you-content%%
	%%form-thank-you-code%%
	%%form-end-if-thank-you%%

	%%form-if-display-form%%
	%%form-before-form-content%%
	%%form-if-error%%
	<span class="pd-errors">Please correct the errors below:</span>
%%form-end-if-error%%

	%%form-start-loop-fields%%
	<div class="pd-form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%">
	%%form-if-field-label%%
	<label class="pd-field-label" for="%%form-field-id%%">%%form-field-label%%</label>
	%%form-end-if-field-label%%

	%%form-field-input%%

	%%form-if-field-description%%
	<span class="pd-description">%%form-field-description%%</span>
	%%form-end-if-field-description%%
	</div>

	<div id="error_for_%%form-field-id%%" style="display:none"></div>

	%%form-field-if-error%%
	<span class="pd-error no-label">%%form-field-error-message%%</span>
	%%form-field-end-if-error%%
	%%form-end-loop-fields%%

	%%form-spam-trap-field%%

	<!-- forces IE5-8 to correctly submit UTF8 content  -->
	<input name="_utf8" type="hidden" value="&#9731;" />

	<input class="pd-submit" type="submit" accesskey="s" value="%%form-submit-button-text%%" %%form-submit-disabled%%/>

	%%form-after-form-content%%
	%%form-end-if-display-form%%

	%%form-javascript-link-target-top%%
	</form>

	<script>
	let height;

const sendPostMessage = () => {
	if (height !== document.getElementById('container').offsetHeight) {
		height = document.getElementById('container').offsetHeight;

		window.parent.postMessage({
			frameHeight: height
		}, '*');
	}
}

window.onload = () => sendPostMessage();
window.onresize = () => sendPostMessage();
window.onchange = () => sendPostMessage();


var labels = document.querySelectorAll('div.pd-text label, div.pd-select label, div.pd-textarea label');
var i = labels.length;

while (i--) {
	var label = labels.item(i);

	if (label.parentNode.classList.contains('required')) {
		label.textContent += ' *';
	}
}

var form = document.getElementById('pardot-form');
var queryString = window.location.search.substring(1);

if (queryString != '') {
	var queries = queryString.split("&");

	for ( i = 0, l = queries.length; i < l; i++ ) {
		var params = queries[i].split('=');

		var input = form.querySelectorAll('.' + params[0] + ' input')[0];

		if (input) {
			input.value = params[1];
		}

		if (params[0] == 'redirectUrl') {
			form.setAttribute('onSubmit', "top.location = '" + params[1] + "';");
		}
	}
}

var inputElements = form.querySelectorAll("input, select, checkbox, textarea");

var onfocus = function (e) {
	console.log('onfocus', e);
	if (e.target.parentElement.classList) {
		e.target.parentElement.classList.add('focused');
	}
};

var onblur = function (e) {
	console.log('onblur', e);
	if (e.target.parentElement.classList) {
		e.target.parentElement.classList.remove('focused');
	}
};

var onchange = function (e) {
	console.log('onchange', e);
	if (e.target.parentElement.classList && e.target.value != '') {
		e.target.parentElement.classList.add('filled');
	}
	else if (e.target.parentElement.classList) {
		e.target.parentElement.classList.remove('filled');
	}
};

var arrayLength = inputElements.length;

for (var i = 0; i < arrayLength; i++) {
	var input = inputElements[i];

	input.addEventListener('focus', onfocus);
	input.addEventListener('blur', onblur);
	input.addEventListener('change', onchange);
}
</script>