Wondering why onSubmit is not functioning properly. Instead of staying on the page and showing the confirmform DIV, the page reloads and the URL is appended with all of the input data I had previously entered. The submission is also not recorded in the Marketo back-end as a result.
I have a marketo form inside a popup that I call with this code:
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$(".popupOpener").on("click", function(e) {
e.preventDefault();
$(this).simplePopup({ type: "html", htmlSelector: "#popup1" });
});
});
// ]]></script>
Inside of that popup DIV I have this code with the form:
<script src="//app-ab13.marketo.com/js/forms2/js/forms2.min.js" type="text/javascript"></script>
<div id="popup1" style="display: none;">
<div class="popup-flex-container">
<div class="wrapper-horiz">
<div class="popup-flex-center">
<div class="london-contest-form">
<form id="mktoForm_1748"></form>
<div id="confirmform" style="visibility: hidden;"><p>Thank you.</p></div>
</div>
</div>
<div class="popup-flex-right">Contest Info and Rules perhaps.</div>
</div><!--end flex-horiz -->
</div><!-- end flex container -->
</div>
At the end of my page I have this code:
<script type="text/javascript">// <![CDATA[
MktoForms2.loadForm("//app-ab13.marketo.com", "204-HUD-558", 1748, function ( form ) {
form.onSuccess(function(values, followUpUrl) {
// Get the form's jQuery element and hide it
form.getFormElem().hide();
document.getElementById('confirmform').style.visibility = 'visible';
return false;
});
});
// ]]></script>
Any help or insight would be immensely appreciated. Thanks a lot.
.png)