Enquire MAP: Send Third Party Forms to MAP

Javascript API (posting Web Forms using Javascript)

Enquire MAP has a javascript API that allows for posting to a web form using javascript. 

Step 1: Create your form in Enquire MAP

A web form will need to be created in Enquire MAP that have matching fields to the third party web form. This form will be used to receive the data from the submitted third party form.

Step 2: Add the access javascript

Those form pages that have existing forms and the javascript below will post the form data to Enquire MAP whenever a form is submitted. Place this script anywhere after the default Enquire MAP tracking script is inserted. (note, this script requires the default tracking script included on the page)

<script type="text/javascript">
     var i = setInterval(function () {
         if (typeof AD !== 'undefined') {
             clearInterval(i);
             AD.ready(function () {
                 AD.submit_ad_form(<Enquire MAP Form ID>, {
                     data: ["input-selecter-1", "input-selector-2", "input-selector-3"],
                     form_selector: "form-selector"
                 });
             });
         }
     }, 300);
 </script>

Example 1: ID Referenced Inputs

Given this form:

<form accept-charset="UTF-8" action="/contact" class="contact-form" method="post">
  <input name="form_type" type="hidden" value="contact">
  <input name="utf8" type="hidden" value="?">
 
   <p>
   <label>
   Your Name:
   </label>
   <br>
   <input type="text" id="contactFormName" name="contact[name]" placeholder="John Doe">
   </p>
   <p>
   <label>
   Email:
   </label>
   <br>
   <input type="email" id="contactFormEmail" name="contact[email]" placeholder="john@example.com">
   </p>
   <p>
   <label>
   Phone Number:
   </label>
   <br>
   <input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="555-555-1234">
   </p>
   <p>
   <label>
   Message:
   </label>
   <br>
   <textarea rows="15" cols="75" id="contactFormMessage" name="contact[body]" placeholder="Your Message"></textarea>
   </p>
   <p>
   <input type="submit" id="contactFormSubmit" value="Send" class="btn">
   </p>
 </form>

This is the script you would put in:

<script type="text/javascript">
      var i = setInterval(function () {
          if (typeof AD !== 'undefined') {
              clearInterval(i);
              AD.submit_ad_form(12345, {
                  data: ["input#contactFormName", "input#contactFormEmail", "input#contactFormTelephone", "input#contactFormMessage"],
                  form_selector: "form.contact-form"
              });
          }
      }, 300);
  </script>

Example 2: Name Referenced inputs

Given this form:

<form name="" action="/contact-us/#wpcf7-f190-p377-o1" method="post" class="wpcf7-form" novalidate="novalidate">
 <p>Name <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></p>
 <p>Email<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></p>
 <p>Phone Number <input type="tel" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></p>
 <p>Company <input type="text" name="company" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></p>
 <p><textarea name="Comments" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="COMMENTS"></textarea></p>
 <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><img class="ajax-loader" src="http://podmarketinginc.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;"></p>
 <div class="wpcf7-response-output wpcf7-display-none"></div></form> 

This is the script you would put in:

<script type="text/javascript">
      var i = setInterval(function () {
          if (typeof AD !== 'undefined') {
              clearInterval(i);
              AD.ready(function () {
                  AD.submit_ad_form(12345, {
                      data: ["input#contactFormName", "input#contactFormEmail", "input#contactFormTelephone", "input#contactFormMessage"],
                      form_selector: "form.contact-form"
                  });
              });
          }
      }, 300);
  </script>

You can also use this script to post the data to Enquire MAP immediately (as opposed to when the form submits).  You would use this when you have the raw data that needs to be submitted and want to submit it during some other point in the user flow.

<script type="text/javascript">
      var i = setInterval(function () {
          if (typeof AD !== 'undefined') {
              clearInterval(i);
              AD.ready(function () {
                  AD.submit_ad_form(1234, {data: ["Test Person", "test.person@test.com", "1112221212", "Test Company", "Some extra comments"]});
              });
          }
      }, 300);
  </script>