Forum
Mobile Form Success Message Issues
I have a form on a client's site that is acting up only sometimes and I can't figure out why. Sometimes when a person fills out the form and click submit, the form will get submitted but it doesn't show the success message or any other reaction so the person doesn't think it went through and hits the submit button again and sometimes even a third time. This only happened on a computer once that I know of, but it's happening randomly on the phone.
This is the code for the form. Does anyone know why this would be happening?
<perch:form id="get-quote-form" method="post" app="perch_forms" role="form">
<div class="form-label"><perch:label for="Company Name">Company Name</perch:label></div>
<div class="input-large"><perch:input id="CompanyName" type="text" required="true" label="Company Name" /></div>
<div class="form-label"><perch:label for="Email">Email</perch:label></div>
<div class="input-large"><perch:input id="Email" type="email" required="true" label="Email" /></div>
<div class="form-label"><perch:label for="Name">Name</perch:label></div>
<div class="input-large"><perch:input id="Name" type="text" required="true" label="Name" /></div>
<section class="input-medium"><div class="form-label"><perch:label for="Phone">Phone</perch:label></div>
<perch:input id="Phone" type="tel" required="true" label="Phone" /></section>
<section class="input-small"><div class="form-label"><perch:label for="State">State</perch:label></div>
<perch:input type="select" required="true" options=" ,FL,GA,PA,VA" id="State" /></section>
<div class="form-label"><perch:label for="Description">Brief Description of your Business</perch:label></div>
<div class="input-message"><perch:input id="Description" type="textarea" required="true" label="Description" /></div>
<perch:input type="submit" id="submit2" value="Submit" />
<perch:success>
<div class="alert success">
<perch:content id="success" type="textarea" size="m" label="Thank You Message" markdown="true" editor="simplemde" required="true" />
</div>
</perch:success>
</perch:form>
And the code on the page (I striped out some of the text but left anything that I thought might be causing the issue.
<?php include('perch/runtime.php'); ?>
<!doctype html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel='shortcut icon' type=image/x-icon href='images/favicon.ico'/>
<link rel=stylesheet href=css/styles.css>
<title>Get a Quote | Normandy Insurance Company</title>
<link href="https://app.vwo.com/#/settings/code?token=eyJhY2NvdW50X2lkIjozMTE3NDUsInR5cGUiOiJ0cmFja2luZ0NvZGUiLCJ2ZXJzaW9uIjoxLCJoYXNoIjoiOWE2ODZlODVmZTJmZTA0NTJjYjM4YWRkNDgzYTRiZTkifQ==">
</head>
<body>
<?php perch_content('Navigation'); ?>
<div id=form-box-quote>
<?php perch_content('Quote-Form'); ?>
</div>
<div class="clear"></div>
<p class="small-text">Know your class codes?
<a class="small-text" onclick="appFunction()">Get an estimated cost here</a></p>
</div>
</div>
<?php perch_content('footer'); ?>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Open+Sans:400,600,700" rel=stylesheet>
<script src=scripts/modernizr.custom.js></script>
<script src=https://code.jquery.com/jquery-latest.min.js type=text/javascript></script>
<script src=scripts/navscript.js></script>
<script>function appFunction() {window.open("calculatorApp/index.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=100,left=500,width=458,height=600");}</script>
<script>new UISearch(document.getElementById("sb-search"));</script>
<script>(function($) {$('#form1_submit2').attr('onclick','goog_report_conversion("https://normandyins.com/get-quote-2.html")');})(jQuery);</script>
<!-- Google Code for HP Convert Conversion Page
In your html page, add the snippet and call goog_report_conversion when someone clicks on the chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 877642365;
w.google_conversion_label = "woyOCIuZx3MQ_YS_ogM";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
<!--Linkedin-->
<script type="text/javascript"> _linkedin_data_partner_id = "66328"; </script><script type="text/javascript"> (function(){var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript";b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s);})(); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=66328&fmt=gif" /> </noscript>
</body>
</html>
It doesn't look like you're outputting any error messages anywhere. It could be that the form isn't validating with the input supplied and you're simply not telling the user.