Method:Classic Web Forms

Re: Web-to-Lead form Header HTML not provided

Method_Paul — Thu, 24 Feb 2011 16:18:41 GMT

Ken -

My advice is to take the original web form code that was provided by Method and make sure that works on your site. It should work just fine.

What I don't want this thread or forum to become is a place to troubleshoot web site's source code. I see the purposes of this forum as a place to (1) troubleshoot the webform setup wizard; (2) troubleshoot the original web form HTML/Javascript code; and (3) to offer advice on how the web form functions so that web developers can interact with it. Victor has done a great job going over and beyond - but I think we've taken it as far as we can take it here. Entire page source code being copied and pasted on a forum post raises the alarm bells!!

It is fine to customize the HTML display. In fact, it is encouraged - and your web form looks great! However, it is important to tread carefully when designing. Ideally, you should get an experienced web developer to assist you in doing this if you are modifying the code to the extent that you are, and they should approach this like any other software project: slowly adding code piece-by-piece and testing to make sure the process still functions properly at each point along the way.

If you are doing this coding yourself, and I'm taking a quick glance at your code, I'll give you a hint...it's important to know some basics on how to apply HTML tags in javascript. Here is a useful article that tells you some base-level fundamentals of how to "escape" characters in javascript:

http://www.htmlgoodies.com/beyond/javascript/article.php/3470891/Web-Developer-Tutorial-Escape-Characters.htm

If you are still totally stuck, one step I can suggest is booking some consulting time with Michael to get straightened out.

Paul

Re: Web-to-Lead form Header HTML not provided

k.leeser — Wed, 23 Feb 2011 21:05:47 GMT

Victor,

Can you take a quick look at the code and see what we missed on the validation? Thanks!

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<title>test5 | VarZero</title>
<link rel="shortcut icon" href="http://varzero.webomanager.com/files/2011/02/vzfavicon.png" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta name="generator" content="WordPress 3.0.5" />
<link rel="pingback" href="http://varzero.com/xmlrpc.php" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo">

<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="VarZero » Feed" href="http://varzero.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="VarZero » Comments Feed" href="http://varzero.com/comments/feed/" />

<script type="text/javascript">//<![CDATA[
// Google Analytics for WordPress by Yoast v4.06 | http://yoast.com/wordpress/google-analytics/
var _gaq = _gaq || [;
_gaq.push(['_setAccount','UA-21326870-1']);
_gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// End of Google Analytics for WordPress by Yoast v4.0
//]]></script>
<link rel="alternate" type="application/rss+xml" title="VarZero » test5 Comments Feed" href="http://varzero.com/test5/feed/" />
<link rel='stylesheet' id='pagelines-pro-css' href='http://varzero.com/wp-content/themes/varzero/pro/pro.css?ver=4.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='pagelines-stylesheet-css' href='http://varzero.com/wp-content/themes/varzero_child/style.css?ver=4.0.0' type='text/css' media='all' />


<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://varzero.com/wp-includes/js/comment-reply.js?ver=20090102'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://varzero.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://varzero.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='VarZero' href='http://varzero.com/' />
<link rel='prev' title='test' href='http://varzero.com/test/' />
<link rel='next' title='Thank You!' href='http://varzero.com/thankyou/' />
<meta name="generator" content="WordPress 3.0.5" />

<link rel="canonical" href="http://varzero.com/test5/" />

<style type="text/css" media="screen">

/* Begin Contact Form CSS */
.contactform {
position: static;
overflow: hidden;
width: 95%;
}

.contactleft {
width: 25%;
white-space: pre;
text-align: right;
clear: both;
float: left;
display: inline;
padding: 4px;
margin: 5px 0;
}

.contactright {
width: 70%;
text-align: left;
float: right;
display: inline;
padding: 4px;
margin: 5px 0;
}

.contacterror {
border: 1px solid #ff0000;
}

.contactsubmit {
}
/* End Contact Form CSS */

</style>

</head>
<body class="page page-id-101 page-template page-template-default logged-in full_width">

<ul id="menu-main-navigation" class="main-nav nosearch"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-16"><a href="http://varzero.com/">Home</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="http://varzero.com/about-us/">About Us</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="http://varzero.com/solutions/">Solutions</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="http://varzero.com/customers/">Customers</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="http://varzero.com/blog/">Blog</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="http://varzero.com/contact-us/">Contact Us</a></li>
</ul> </div>
       <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
    </div>
   </div>
      <div id="page-main" class="container-group fix"> 
    <div class="outline fix">
        <div id="maincontent" class="container fix">
    <div class="texture">
     <div class="content">
      <div class="content-pad">
<div id="pagelines_content" class="one-sidebar-right fix">

  <div id="column-wrap" class="fix">

    <div id="column-main" class="mcolumn fix">
   <div class="mcolumn-pad" >
       <div id="theloop" class="copy fix">
    <div class="copy-pad">
<div class="post-101 page type-page hentry fpost" id="post-101">




      <div class="entry_wrap fix">

       <div class="entry_content">

<p><br />
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"><br />
<script src="https://www.methodintegration.com/MethodWebForms/Javascript/formValidation.js" type="text/javascript"></script><br />
<script type="text/javascript">
function validate_form(thisform){
     with (thisform){
if (validate_required("FirstName_Step2","vld_FirstName_Step2","First Name must be filled out!")==false)
{document.getElementById("FirstName_Step2").focus();return false;}
if (validate_required("LastName_Step2","vld_LastName_Step2","Last Name must be filled out!")==false)
{document.getElementById("LastName_Step2").focus();return false;}
if (validate_required("Phone_Step2","vld_Phone_Step2","Phone must be filled out!")==false)
{document.getElementById("Phone_Step2").focus();return false;}
if (validate_required("Email_Step2","vld_Email_Step2","Email must be filled out!")==false)
{document.getElementById("Email_Step2").focus();return false;}
if (validate_maxLength("Description_Step3","vld_Description_Step3","Products / Services: maximum length should be 4000 characters!",4000)==false)
{document.getElementById("Description_Step3").focus();return false;}
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;</p>
<p>if (emailPattern.test(document.getElementById("Email_Step2").value) == false) {
   document.getElementById("vld_Email_Step2").innerHTML = "You email is invalid.";</p>
<p>   document.getElementById("Email_Step2").focus();
   return false;
}
else {</p>
<p>   document.getElementById(alertField).innerHTML = "";
}
         document.getElementById('submit_web_form').disabled=true;
     }
}
</script></p>
<form action="https://www.methodintegration.com/method/timezonerouter.aspx?url=https://www.methodintegration.com/MethodWebForms/submit.aspx" onsubmit="return validate_form(this)" method="POST">
<input type="hidden" name="oid" value="6rfk02WvNXej9bVFGxdrjQ=="/>
<input type="hidden" name="retURL" value="http://"/>
<input type="hidden" name="formName" value="Web-To-Lead"/>
<h3>Contact Information</h3>
<h4>Please enter your contact information below.</h4>
<table>
<tr>
<td valign ="top">
         <label for="CompanyName_Step2">Company Name</label>
      </td>
<td>
<input type="text" id="CompanyName_Step2" name="CompanyName_Step2" maxlength="41" size="20" value="" />
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="FirstName_Step2">First Name</label>
      </td>
<td>
<input type="text" id="FirstName_Step2" name="FirstName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_FirstName_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="LastName_Step2">Last Name</label>
      </td>
<td>
<input type="text" id="LastName_Step2" name="LastName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_LastName_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="Phone_Step2">Phone</label>
      </td>
<td>
<input type="text" id="Phone_Step2" name="Phone_Step2" maxlength="21" size="20" value="" />
         <span id="vld_Phone_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="Email_Step2">Email</label>
      </td>
<td>
<input type="text" id="Email_Step2" name="Email_Step2" maxlength="1023" size="20" value="" />
         <span id="vld_Email_Step2" style="color:Red">*</span>
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="BillAddressAddr3_Step2">Address</label>
      </td>
<td>
<input type="text" id="BillAddressAddr3_Step2" name="BillAddressAddr3_Step2" maxlength="41" size="20" value="" />
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="BillAddressCity_Step2">City</label>
      </td>
<td>
<input type="text" id="BillAddressCity_Step2" name="BillAddressCity_Step2" maxlength="31" size="20" value="" />
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="BillAddressState_Step2">State / Province</label>
      </td>
<td>
<input type="text" id="BillAddressState_Step2" name="BillAddressState_Step2" maxlength="21" size="20" value="" />
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="BillAddressPostalCode_Step2">Postal Code</label>
      </td>
<td>
<input type="text" id="BillAddressPostalCode_Step2" name="BillAddressPostalCode_Step2" maxlength="13" size="20" value="" />
      </td>
</tr>
<tr>
<td valign ="top">
         <label for="BillAddressCountry_Step2">Country</label>
      </td>
<td>
<input type="text" id="BillAddressCountry_Step2" name="BillAddressCountry_Step2" maxlength="31" size="20" value="" />
      </td>
</tr>
</table>
<h3>Products & Services</h3>
<h4>Please let us know what product(s) or service(s) are you interested in.</h4>
<table>
<tr>
<td valign ="top">
         <label for="Description_Step3">Products / Services:</label>
      </td>
<td>
         <textarea rows="5" id="Description_Step3" name="Description_Step3" ></textarea><br />
         <span id="vld_Description_Step3" style="color:Red"></span>
      </td>
</tr>
</table>
<input type="submit" name="submit" id="submit_web_form" value="Submit" />
</form>
         <div class="clear"></div>
         <a class="post-edit-link" href="http://varzero.com/wp-admin/post.php?post=101&action=edit" title="Edit Page">[Edit Page]</a>       </div>
       <div class="tags">
         
       </div>
      </div>
        </div>

<div id="comments">

    
   <p class="nocomments">Comments are closed.</p>


         </div>
    <div class="clear"></div>
    </div>
   </div>
   </div>
  </div>


</div>

<div id="sidebar-wrap" class="fix">
   <div id="sidebar1" class="scolumn fix" >
    <div class="scolumn-pad">
        <div id="sidebar_secondary" class="copy fix">
    <div class="copy-pad">
<ul id="list_sidebar_secondary" class="sidebar_widgets fix">
  <li id="text-9" class="widget_text widget fix"><div class="widget-pad">   <div class="textwidget"><a href="http://varzero.com/contact-us"><h3 class="contact-btn">Contact VarZero</h3></a></div>
  </div></li> </ul>
    <div class="clear"></div>
    </div>
   </div>
   <div id="sidebar_primary" class="copy fix">
    <div class="copy-pad">
<ul id="list_sidebar_primary" class="sidebar_widgets fix">
  <li id="text-8" class="widget_text widget fix"><div class="widget-pad">   <div class="textwidget"><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 6000,
width: 250,
height: 275,
theme: {
    shell: {
      background: '#e7dee3',
      color: '#008cac'
    },
    tweets: {
      background: '#fcfcfc',
      color: '#545154',
      links: '#a671a6'
    }
},
features: {
    scrollbar: false,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: false,
    avatars: false,
    behavior: 'all'
}
}).render().setUser('var_zero').start();
</script></div>
  </div></li> </ul>
    <div class="clear"></div>
    </div>
   </div>

    </div>
   </div>
   </div>

</div>      <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
   <div class="clear"></div>

</div> 
</div> 
</div>

<div id="footer">
  <div class="outline fix">
      <div id="footcols" class="container fix">
    <div class="texture">
     <div class="content">
      <div class="content-pad">
   <div id="fcolumns_container" class="dcol_container_5 fix">

    <div id="text-4" class="widget_text dcol_5 dcol"><div class="dcol-pad">   <div class="textwidget"><a href="http://varzero.com/test5/#"><img src="http://varzero.webomanager.com/files/2011/02/vz_logo_ftr.jpg" /></a></div>
  </div></div><div id="nav_menu-4" class="widget_nav_menu dcol_5 dcol"><div class="dcol-pad"><div class="menu-main-navigation-container"><ul id="menu-main-navigation-1" class="menu"><li class="menu-item menu-item-type-post_type menu-item-16"><a href="http://varzero.com/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-29"><a href="http://varzero.com/about-us/">About Us</a></li>
<li class="menu-item menu-item-type-post_type menu-item-28"><a href="http://varzero.com/solutions/">Solutions</a></li>
<li class="menu-item menu-item-type-post_type menu-item-27"><a href="http://varzero.com/customers/">Customers</a></li>
<li class="menu-item menu-item-type-post_type menu-item-26"><a href="http://varzero.com/blog/">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-25"><a href="http://varzero.com/contact-us/">Contact Us</a></li>
</ul></div></div></div><div id="text-5" class="widget_text dcol_5 dcol"><div class="dcol-pad">   <div class="textwidget"><span>29 Crafts St., Suite 550 Newton, MA 02458
<br/>
<a href="mailto:info@varzero.com">info@varzero.com</a>
<br/>
(857) 524-5137</span></div>
  </div></div><div id="text-7" class="widget_text dcol_5 dcol"><div class="dcol-pad">   <div class="textwidget">Copyright © 2011 VarZero<br />All Rights Reserved<br /><a href="http://varzero.com/privacy-policy/">Privacy Policy</a><br /></div>
  </div></div>   </div>
   <div class="clear"></div>
        <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
   <div class="clear"></div>
      <div class="clear"></div>
  </div>
</div>
</div>
<script type='text/javascript' src='http://varzero.com/wp-content/themes/varzero/sections/nav/superfish.js?ver=1.0'></script>
<script type='text/javascript' src='http://varzero.com/wp-content/themes/varzero/sections/nav/jquery.bgiframe.min.js?ver=1.0'></script>
</body>
</html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: varzero.com @ 2011-02-23 19:55:59 -->

Re: Web-to-Lead form Header HTML not provided

Method_Victor — Tue, 22 Feb 2011 16:34:25 GMT

Hi Ken,

With red I've highlighted the "onsubmit" you need to have in order for validation to happen. With yellow, I've highlighted the script where you will need to insert the email validity script.

Hope it helps.

Victor

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.methodintegration.com/MethodWebForms/Javascript/formValidation.js" type="text/javascript"></script>
<script type="text/javascript">
function validate_form(thisform){
     with (thisform){
if (validate_required("FirstName_Step2","vld_FirstName_Step2","First Name must be filled out!")==false)
{document.getElementById("FirstName_Step2").focus();return false;}
if (validate_required("LastName_Step2","vld_LastName_Step2","Last Name must be filled out!")==false)
{document.getElementById("LastName_Step2").focus();return false;}
if (validate_required("Phone_Step2","vld_Phone_Step2","Phone must be filled out!")==false)
{document.getElementById("Phone_Step2").focus();return false;}
if (validate_required("Email_Step2","vld_Email_Step2","Email must be filled out!")==false)
{document.getElementById("Email_Step2").focus();return false;}
if (validate_maxLength("Description_Step3","vld_Description_Step3","Products / Services: maximum length should be 4000 characters!",4000)==false)
{document.getElementById("Description_Step3").focus();return false;}
         document.getElementById('submit_web_form').disabled=true;
     }
}
</script>

<form action="https://www.methodintegration.com/method/timezonerouter.aspx?url=https://www.methodintegration.com/MethodWebForms/submit.aspx"

onsubmit="return validate_form(this)"

method="POST">
<input type="hidden" name="oid" value="6rfk02WvNXej9bVFGxdrjQ=="/>
<input type="hidden" name="retURL" value="http://varzero.webomanager.com/thankyou"/>
<input type="hidden" name="formName" value="Web-To-Lead"/>
<table>
   <tr>
      <td valign ="top">
         <label for="CompanyName_Step2">Company Name</label>
      </td>
      <td>
         <input type="text" id="CompanyName_Step2" name="CompanyName_Step2" maxlength="41" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="FirstName_Step2">First Name</label>
      </td>
      <td>
         <input type="text" id="FirstName_Step2" name="FirstName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_FirstName_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="LastName_Step2">Last Name</label>
      </td>
      <td>
         <input type="text" id="LastName_Step2" name="LastName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_LastName_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="Phone_Step2">Phone</label>
      </td>
      <td>
         <input type="text" id="Phone_Step2" name="Phone_Step2" maxlength="21" size="20" value="" />
         <span id="vld_Phone_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="Email_Step2">Email</label>
      </td>
      <td>
         <input type="text" id="Email_Step2" name="Email_Step2" maxlength="1023" size="20" value="" />
         <span id="vld_Email_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressAddr3_Step2">Address</label>
      </td>
      <td>
         <input type="text" id="BillAddressAddr3_Step2" name="BillAddressAddr3_Step2" maxlength="41" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressCity_Step2">City</label>
      </td>
      <td>
         <input type="text" id="BillAddressCity_Step2" name="BillAddressCity_Step2" maxlength="31" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressState_Step2">State / Province</label>
      </td>
      <td>
         <input type="text" id="BillAddressState_Step2" name="BillAddressState_Step2" maxlength="21" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressPostalCode_Step2">Postal Code</label>
      </td>
      <td>
         <input type="text" id="BillAddressPostalCode_Step2" name="BillAddressPostalCode_Step2" maxlength="13" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressCountry_Step2">Country</label>
      </td>
      <td>
         <input type="text" id="BillAddressCountry_Step2" name="BillAddressCountry_Step2" maxlength="31" size="20" value="" />
      </td>
   </tr>
</table>
<table>
   <tr>
      <td valign ="top">
         <label for="Description_Step3">Products / Services:</label>
      </td>
      <td>
         <textarea rows="5" id="Description_Step3" name="Description_Step3" ></textarea>
         <span id="vld_Description_Step3" style="color:Red"></span>
      </td>
   </tr>
</table>
<input type="submit" name="submit_web_form" id="submit_web_form" value="Submit" />
</form>

Re: Web-to-Lead form Header HTML not provided

k.leeser — Tue, 22 Feb 2011 16:16:20 GMT

I have pasted in the HTML which Method generated and I passed along to my programmer. There doesn't seem to be any onsubmit functionality in the code.

<form action="https://www.methodintegration.com/method/timezonerouter.aspx?url=https://www.methodintegration.com/MethodWebForms/submit.aspx" onsubmit="return validate_form(this)" method="POST">
<input type="hidden" name="oid" value="6rfk02WvNXej9bVFGxdrjQ=="/>
<input type="hidden" name="retURL" value="http://varzero.webomanager.com/thankyou"/>
<input type="hidden" name="formName" value="Web-To-Lead"/>
<table>
   <tr>
      <td valign ="top">
         <label for="CompanyName_Step2">Company Name</label>
      </td>
      <td>
         <input type="text" id="CompanyName_Step2" name="CompanyName_Step2" maxlength="41" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="FirstName_Step2">First Name</label>
      </td>
      <td>
         <input type="text" id="FirstName_Step2" name="FirstName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_FirstName_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="LastName_Step2">Last Name</label>
      </td>
      <td>
         <input type="text" id="LastName_Step2" name="LastName_Step2" maxlength="25" size="20" value="" />
         <span id="vld_LastName_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="Phone_Step2">Phone</label>
      </td>
      <td>
         <input type="text" id="Phone_Step2" name="Phone_Step2" maxlength="21" size="20" value="" />
         <span id="vld_Phone_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="Email_Step2">Email</label>
      </td>
      <td>
         <input type="text" id="Email_Step2" name="Email_Step2" maxlength="1023" size="20" value="" />
         <span id="vld_Email_Step2" style="color:Red">*</span>
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressAddr3_Step2">Address</label>
      </td>
      <td>
         <input type="text" id="BillAddressAddr3_Step2" name="BillAddressAddr3_Step2" maxlength="41" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressCity_Step2">City</label>
      </td>
      <td>
         <input type="text" id="BillAddressCity_Step2" name="BillAddressCity_Step2" maxlength="31" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressState_Step2">State / Province</label>
      </td>
      <td>
         <input type="text" id="BillAddressState_Step2" name="BillAddressState_Step2" maxlength="21" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressPostalCode_Step2">Postal Code</label>
      </td>
      <td>
         <input type="text" id="BillAddressPostalCode_Step2" name="BillAddressPostalCode_Step2" maxlength="13" size="20" value="" />
      </td>
   </tr>
   <tr>
      <td valign ="top">
         <label for="BillAddressCountry_Step2">Country</label>
      </td>
      <td>
         <input type="text" id="BillAddressCountry_Step2" name="BillAddressCountry_Step2" maxlength="31" size="20" value="" />
      </td>
   </tr>
</table>
<table>
   <tr>
      <td valign ="top">
         <label for="Description_Step3">Products / Services:</label>
      </td>
      <td>
         <textarea rows="5" id="Description_Step3" name="Description_Step3" ></textarea>
         <span id="vld_Description_Step3" style="color:Red"></span>
      </td>
   </tr>
</table>
<input type="submit" name="submit_web_form" id="submit_web_form" value="Submit" />
</form>

Re: Web-to-Lead form Header HTML not provided

Method_Victor — Tue, 22 Feb 2011 14:45:40 GMT

Hi Ken,

The reason why no validation was being done for you is because for form tag you have used, you were missing an important attribute "onsubmit" that was included in the original HTML that was produced by Method Web Forms. This is how it should look

<form action="https://www.methodintegration.com/method/timezonerouter.aspx?url=https://www.methodintegration.com/MethodWebForms/submit.aspx" 
      onsubmit="return validate_form(this)" method="POST">

For the validation of the email format here is what you will need to do:

Inside JavaScript function "validate_form(thisform)" between the

if (validate_maxLength("Description_Step3", "vld_Description_Step3", "Products / Services: maximum length should be 4000 characters!", 4000) == false)
{ document.getElementById("Description_Step3").focus(); return false; }

and

document.getElementById('submit_web_form').disabled = true;

You will need to insert the following script

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
if (emailPattern.test(document.getElementById("Email_Step2").value) == false) {
   document.getElementById("vld_Email_Step2").innerHTML = "You email is invalid.";
   document.getElementById("Email_Step2").focus();
   return false;
}
else {
   document.getElementById(alertField).innerHTML = "";
}

If in the future you will need to implement more data validations, you will be able to create them yourself, based on the example I've given.

Thank you

Victor

Re: Web-to-Lead form Header HTML not provided

k.leeser — Mon, 21 Feb 2011 17:30:32 GMT

Victor,

In doing our final testing, there doesn't seem to be any form validation. For example, the fields identified with asterisks as being required are not really required. And I would like to have the form test to make sure that the email is a valid format.

Thanks.

Re: Web-to-Lead form Header HTML not provided

k.leeser — Thu, 17 Feb 2011 22:07:55 GMT

I think everything is all set. Going live tomorrow. Thanks for all of your help.

Re: Web-to-Lead form Header HTML not provided

Method_Victor — Wed, 16 Feb 2011 20:25:45 GMT

Hi Ken,

In order to return "Thank you for submitting your information. A representative will contact you shortly." screen you need to do the following:

1. On "Welcome to Method Web Forms" screen (which is the first screen) choose "Load Existing Web Form" radio button

2. Choose your "Web-To-Lead" web form and click Load

3. Go to "Step 6 of 9: Thank you page?" step of the wizard

4. Put a check-mark for "Take customers to a specific URL after they submit the form."

5. Enter a URL for your custom "Thank you for submitting your information. A representative will contact you shortly." web page (eg. http://marylandaccidentlawyers.com/thanks/)

6. Click "Finish"

You are done! You don't need to edit HTML, the settings will be applied immediately. As soon as user submits the web form, he will be redirected to the "Thank you" web page.

Thank you

Victor

Re: Web-to-Lead form Header HTML not provided

k.leeser — Wed, 16 Feb 2011 20:09:22 GMT

Thanks, Victor

Things seem to be working now. I also had a devil of a time getting the email server working but I think that is set, too.

One (hopefully) last question:

We would like to return a screen which says "Thank you for submitting your information. A representative will contact you shortly." After the prospect presses SUBMIT.

Can we do that? Do you have any sample code?

Thanks.

Ken

Re: Web-to-Lead form Header HTML not provided

Method_Victor — Wed, 16 Feb 2011 17:55:41 GMT

Hi Ken,

I beleive I know what the problem is. Try changing <input type="submit" value="Submit" name="submit" id="submit_web_form"> in HTML to <input type="submit" value="Submit" name="submit_web_form" id="submit_web_form">

That should solve the issue.

Thank you

Victor

Re: Web-to-Lead form Header HTML not provided

k.leeser — Wed, 16 Feb 2011 15:31:56 GMT

We fixed the URL. Now when we submit the form, the page is redirect4ed to: https://www.methodintegration.com/method/TimeZoneRouter.aspx and just sits there as a blank screen.

Re: Web-to-Lead form Header HTML not provided

Method_Victor — Mon, 14 Feb 2011 15:19:32 GMT

Hi Ken,

I've figured out why you had the error "We couldn't authenticate web form provider. Please contact web form provider for any additional information." The problem is that in In "Step 1 of 9" of the wizard, you didn't include the correct URL of your website. You made a small spelling mistake and entered "http://varzero.webomanger.com" instead of "http://varzero.webomanager.com". As soon as you fix this little problem, everything should start working as expected (and you don't even need to touch the HTML, just fix it on the Method website).

Thank you

Victor

Re: Web-to-Lead form Header HTML not provided

k.leeser — Mon, 14 Feb 2011 14:41:48 GMT

Thanks.

Re: Web-to-Lead form Header HTML not provided

Method_Victor — Mon, 14 Feb 2011 14:33:48 GMT

Hi Ken,

I am working on it right now and I will respond as soon as possible.

Sorry for the wait.

Victor

Re: Web-to-Lead form Header HTML not provided

k.leeser — Mon, 14 Feb 2011 14:27:21 GMT

Hi Victor,

Did you have a chance to look at my secondary issue?

Thanks.

Ken