Jump to: Requirements | Create Your Own Form | Required Fields | Optional Fields | Templates | Communication Preferences | Privacy Mode | Return Status | Advanced Error Handling

The Web Lead Service allows you to use an HTML form on your website to create membership leads in your InTouch site. The user will submit a form and then be redirected to either a success page (e.g. Thanks for your submission) or a failure page (e.g. Something went wrong. Please try again). Upon a successful completion, a membership lead will be created in InTouch as a Web Lead and assigned to Incoming Leads for distribution. 

You will need:

1. A website software that allows you to add/edit HTML Source Code to add an HTML <form>
2. Your Club UUID (each InTouch site has it's own UUID which can be found under Admin > Club)

Optional, but highly recommended:

1. A success page: This is a website landing page where the lead is redirected upon successful completion of the form. You'll need the URL for this page.
2. A failure page: This is a website landing page where the lead is redirected if there was an issue in completing the form. You'll need the URL for this page. 

Option 1: Create Your Own HTML Form

Form Attributes

The attribute values for the <form> HTML tag must be as follows:

• action: https://app.intouchfollowup.com/intouch-webapp/weblead/form/
• method: POST

Required Fields

Below are the fields that must be sent with every form submission. Failure to submit one of these will result in the failure page being shown.

Optional Fields

Please note that some of these fields may be mandatory depending on your local legislation. We recommend that you look into the email and text messaging laws in your own jurisdiction and seek legal advice to ensure that you add the necessary fields to make your club compliant with your local regulations.

Option 2: Start With a Template

Single Site Source Code Template

Here is a very simple web lead form for a single site. Simply change the value of the UUID, successPage and failurePage and you can drop the below source code into your website (as long as your website software allows you to paste in custom HTML source code).

<form name="createLead"
 action="https://app.intouchfollowup.com/intouch-webapp/weblead/form/"
 method="POST">

 <!-- Replace each value between the quotation marks with your club UUID and the URLs for your success and failure pages -->
 <input type="hidden" name="UUID" value="11111111-1111-1111-1111-111111111111">
 <input type="hidden" name="successPage" value="http://www.example.com/thankyou">
 <input type="hidden" name="failurePage" value="http://www.example.com/failure">

 <table>
   <tr><td><input name="firstName" type="text" size="40" placeholder="First Name" required></td></tr>
   <tr><td><input name="lastName" type="text" size="40" placeholder="Last Name" required></td></tr>
   <tr><td><input name="email" type="text" size="40" placeholder="Email" required></td></tr>
   <tr><td><input name="mobile" type="text" size="40" placeholder="Mobile" required></td></tr>
   <tr><td align="middle"><input type="submit" value="Submit"></td></tr>
 </table>
 
</form>

Multi-Site Source Code Template

Here is a very simple web lead form if you have multiple sites using the same form. Simply change the values of the UUIDs and Club Names, successPage and failurePage and you can apply it to your website. 

<form name="createLead"
 action="https://app.intouchfollowup.com/intouch-webapp/weblead/form/"
 method="POST">

 <!-- Replace each value between the quotation marks with the URLs for your success and failure pages -->
 <input type="hidden" name="successPage" value="http://www.example.com/thankyou">
 <input type="hidden" name="failurePage" value="http://www.example.com/failure">

<table>
  <tr><td>
    <select name="UUID" required>
    <option value="" disabled="" selected="" style=display: none; >Select a location</option>

    <!-- On each line below, replace the blue value (between the > and < characters)
       with your club name and the red value (between the quotation marks) with
       that club's InTouch UUID. Add and remove lines as needed. You want to have
       one line per location. -->

    <option value="11111111-AAAA-1111-1111-A11111111111">Club One</option>
    <option value="11111111-AAAA-1111-1111-A11111111112">Club Two</option>
    <option value="11111111-AAAA-1111-1111-A11111111113">Club Three</option>

    </select>
  </td></tr>
  <tr><td><input name="firstName" type="text" size="40" placeholder="First Name" required></td></tr>
  <tr><td><input name="lastName" type="text" size="40" placeholder="Last Name" required></td></tr>
  <tr><td><input name="email" type="text" size="40" placeholder="Email" required></td></tr>
  <tr><td><input name="mobile" type="text" size="40" placeholder="Mobile" required></td></tr>
  <tr><td align="middle"><input type="submit" value="Submit"></td></tr>
</table>
</form>

Contact Communication Preferences

For each of the below, if no value is sent the defaults defined in club settings will be used.

Submitting Communication Preferences with a Checkbox

InTouch recommends that you gather consent to communicate via text message, email, and phone calls and that you seek your own legal advice to ensure that you add the necessary fields so your club is compliant with your local regulations.

Unfortunately in the HTML standard there is no way to tell the difference between the submission of an unchecked checkbox (which would mean unsubscribed), and the checkbox being missing altogether (which would mean to use the club default settings). Therefore you must use the Javascript solution listed below to work around this issue.

1. Create a file named webleadform.js with the following contents and place it next to the HTML file containing your form. 
   

   $(document).ready(function() {
     var allPrefsToggle = $('[name="allPrefsToggle"]');
     var textPref = $('[name="textPref"]');
     var emailPref = $('[name="emailPref"]');
     var mobilePhonePref = $('[name="mobilePhonePref"]');
     var workPhonePref = $('[name="workPhonePref"]');
     var homePhonePref = $('[name="homePhonePref"]');
     allPrefsToggle.change(function() {
       textPref.val($(this).is(':checked') ? 'subscribe' : 'unsubscribe');
       emailPref.val($(this).is(':checked') ? 'subscribe' : 'unsubscribe');
       mobilePhonePref.val($(this).is(':checked') ? 'can_contact' : 'cannot_contact');
       workPhonePref.val($(this).is(':checked') ? 'can_contact' : 'cannot_contact');
       homePhonePref.val($(this).is(':checked') ? 'can_contact' : 'cannot_contact');
     });
   });

2. This code depends on the JQuery library. You can reference it through CDN or download and place it beside webleadform.js and your form. Add the following to your HTML web lead form after the <body> tag (an example of direct link to CDN)
   

   <script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
   <script type="text/javascript">

3. Now all that remains is to add the form elements. Use the following HTML as a reference
   

   <!-- These five preference fields represent the five options that can be
   submitted. Not submitting a value will result in club defaults being used -->
   
   <input name="emailPref" type="hidden" value="unsubscribe">
   <input name="textPref" type="hidden" value="unsubscribe">
   <input name="mobilePhonePref" type="hidden" value="cannot_contact" >
   <input name="workPhonePref" type="hidden" value="cannot_contact" >
   <input name="homePhonePref" type="hidden" value="cannot_contact" >
   
   <!-- This checkbox will run the above Javascript which will toggle the
   preference values. If copying, be sure to update your Club Name! -->
   <input name="allPrefsToggle" type="checkbox">
   I hereby consent to receive phone, text and email messages from or on 
   behalf of Club Name at the telephone number and email provided.
   I understand that consent is not a condition of purchase.

The checkbox will now toggle the values of all five of the communication preferences hidden form fields.

Privacy Mode

By default, In Touch will append all parameters (first name, last name, mobile no, etc) to the return URL (identified as successPage in the form). Some tools like Google Analytics, have a problem with this. To avoid this issue, add following to the form:

<input name="enablePrivacyMode" id="enablePrivacyMode" type="hidden" value="true">

Return Status

With the successPage and failurePage, the response is encoded in URI in the following form

result=<STATUS_MESSAGE>&resultCode=<STATUS_CODE>

Possible codes are:

Advanced Error Handling

When an error occurs, the lead's browser is redirected to the failure page. This page can be a generic page but most often it is more useful to display an error message to the user so that they can make corrections and re-submit the form. This section outlines how to output the returned error message using JavaScript.

This sample code uses a free online JavaScript library called CSJSRequestObject.

In the failure HTML page, the following JavaScript code is required:

<script type="text/javascript" src="CSJSRequestObject.js"> </script>
<script type="text/javascript" >
<!--
function urldecode(psEncodeString)
{
// Create a regular expression to search all +s in the string
var lsRegExp = /\+/g;
// Return the decoded string
return unescape(String(psEncodeString).replace(lsRegExp, " "));
}
// -->
</script>

And then, to output the returned error use the following code:

<body>
  <h2>Lead creation failed</h2>
  <script type="text/javascript">
  document.write(urldecode(Request.QueryString("result")));
  </script>
</body>

Here is what the resulting page looks like when the Web Lead Form Service returns an error about a missing or invalid first name: