Posting External Forms to Act-On with Custom Code

This article describes how to write external form submissions to Act-On using custom code. This should be done only when those submissions are already being sent to another database (using the <form action=""> attribute). If your form is not using this HTML attribute, use the Form Post URL method instead.

Your web developer should determine which integration method will work for your forms. Generally, use the first method for forms with a single ‘Submit’ event, and the second method for forms that use multiple ‘Submit’ events or AJAX requests.

Act-On Support cannot provide in-depth troubleshooting for custom code.

Javascript Triggered by Submit Event

Notes

• May not work with forms that use 'onclick' functionality within the Submit button element
• Forms that utilize AJAX or have multiple submit events are not compatible - use the custom event method instead
• This script is very unlikely to work with multi-page forms, payment forms, login forms, or membership forms

Instructions

1. Create a form in Act-On with all of the same input fields that exist on the external form you intend to post from
   • The Field Names in your Act-On Form must match fields on the external form exactly for this process to work
2. Locate the following information:
   • AID (Account ID): Found in the ‘Account’ section of the Act-On Start Page
   • FID (Form ID): Found in the URL of the Form Composer
   • DID (Deployment ID): This will always be d-0001
   • Server: Your server domain and subdomain, if applicable (such as yourcompanyname.actonsoftware.com - or marketing.companyname.com if you use a custom URL for your account - do not include 'http' or 'www' before the domain, or any characters after '.com' or '.org')
   • formName: Your external form name, found within that form HTML. For example, if you view the source of your form you should see something similar to <form name="formNameExample">
     
     Note: You can change 'formName' to 'formId' to use your custom form’s ID attribute.
3. Add the values from the last step to the following script where indicated in bold (shown here with example inputs) and add the script to your webpage

   <script type="text/javascript">
   var aoProtocol = location.protocol;
   if ( aoProtocol.indexOf('http') < 0 ) aoProtocol = 'http:';
   var aoCAP = {
   aid: '1234',
   fid: '77abe64f-8baa-4dc9-9639-d92e23eab9f3',
   did: 'd-0001',
   server: 'marketing.actonsoftware.com',
   formName: 'myMarketingForm',
   protocol: aoProtocol
   };
   document.write( '<script type="text/javascript" src="'+aoCAP.protocol+'//'+aoCAP.server+'/acton/js/formcap.min.js"><'+'/script>' );
   </script>

JavaScript Triggered by Custom Event

The previous method uses the Submit event on your form as the trigger. If your form uses an AJAX submit or multiple Submit events, then you must take some additional steps to post your form data.

Instructions

1. Follow steps 1 and 2 in the method above.
2. Add the values specified above to the following script where indicated in bold (shown here with example inputs) and add the script to the page containing your form

   <script type="text/javascript">
   var aoProtocol = location.protocol;
   if ( aoProtocol.indexOf('http') < 0 ) aoProtocol = 'http:';
   var aoCAP = {
   aid: '1234',
   fid: '77abe64f-8baa-4dc9-9639-d92e23eab9f3',
   did: 'd-0001',
   server: 'marketing.actonsoftware.com',
   formName: 'myMarketingForm',
   protocol: aoProtocol
   };
   var aoArr = aoArr || []; aoArr.push(aoCAP);
   </script>
   Add this additional script to the page that contains your form
   function AoProcessForm(formelement) {
   for (AoI = 0; AoI < aoArr.length; AoI++) {
    if ( aoArr[AoI].aid && aoArr[AoI].fid && aoArr[AoI].did && aoArr[AoI].server && ( aoArr[AoI].formId || aoArr[AoI].formName )) {
      var d = document,
      thisFormId = formelement.id || '',
      thisFormName = formelement.name || '',
      bi = function(i) {
        return d.getElementById(i)
      },
      bn = function(i) {
        return d.getElementsByName(i)[0]
      },
      names = [],
      values = [],
      params = {},
      w = window,
      targetIdOrName = aoArr[AoI].formName ? bn(aoArr[AoI].formName) : bi(aoArr[AoI].formId),
      len = targetIdOrName.elements.length,
      isLoaded = false,
      ud = 'undefined',
      st = function(f, i) {
        w.setTimeout(f, i)
      },
      ce = function(t) {
        return d.createElement(t)
      },
      gid = function(p) {
        var j, i = 0,
        n = Math.random,
        r = [],
        c = '0123456789abcdef'.split('');
        for (; i < 16; i++) r[i] = c[(0 | n() * 16) & 0xf];
        j = p + r.join('');
        return bi(j) == null ? j : gid(p);
      },
      addInput = function( form, name, value )
      {
        var el = ce('input');
        el.name = name;
        el.value = value;
        form.appendChild( el );
      },
      idifr = gid('aoCapT');
   
      if (aoArr[AoI].formName == thisFormName || aoArr[AoI].formId == thisFormId) {
        var dTarget = ce('div');
        dTarget.style.display = 'none';
        d.body.appendChild(dTarget);
        dTarget.innerHTML = '<iframe name="' + idifr + '" id="' + idifr + '"></iframe>'; // generate iframe
   
        var dForm = ce('form'), idform = gid('aoCapD');
        dForm.id = idform;
        dForm.style.display = "none";
        dForm.method = 'POST';
        dForm.enctype = 'multipart/form-data';
        dForm.acceptCharset = 'UTF-8';
        dForm.target = idifr; // form targets iframe
        dForm.action = (aoCAP.protocol || w.location.protocol) + '//' + aoCAP.server + '/acton/forms/userSubmit.jsp';
        d.body.appendChild(dForm); // generate form
   
        for (i = 0; i < len; i++) {
          var el = targetIdOrName.elements[i];
          var name = typeof(el.name) != ud ? el.name : null;
          var value = typeof(el.value) != ud ? el.value : null;
          tagName = el.nodeName.toLowerCase();
          if (tagName == 'input' && (el.type == 'radio' || el.type == 'checkbox') && !el.checked) {
            name = null;
          } else if (tagName == 'select' && el.selectedIndex && el.selectedIndex != -1 && el.options[el.selectedIndex] && el.options[el.selectedIndex].value)
          {
            value = el.options[el.selectedIndex].value
          };
          if (name != null && name != '') {
            names.push(name);
            values.push(el.value);
            console.log("Element name: " + el.name + " / Element value: " + el.value);
            params[name] = el.value;
          };
          addInput( dForm, el.name, el.value );
        }
   
        aoCAP.pid = 0;
        aoCAP.cuid = aoCAP.cuid || '';
        aoCAP.srcid = aoCAP.srcid || '';
        aoCAP.camp = aoCAP.camp || '';
        addInput( dForm, 'ao_a', aoArr[AoI].aid );
        addInput( dForm, 'ao_f', aoArr[AoI].fid );
        addInput( dForm, 'ao_d', aoArr[AoI].fid+":"+aoArr[AoI].did );
        addInput( dForm, 'ao_p', 0 );
        addInput( dForm, 'ao_jstzo', new Date().getTimezoneOffset() );
        addInput( dForm, 'ao_form_neg_cap', '' );
        addInput( dForm, 'ao_refurl', d.referrer );
        addInput( dForm, 'ao_cuid', aoCAP.cuid );
        addInput( dForm, 'ao_srcid', aoCAP.srcid );
        addInput( dForm, 'ao_camp', aoCAP.camp );
        bi(idform).submit();
   
        var dTargetFrame = bi( idifr );
          dTargetFrame.onload = function() {
          isLoaded = true;
        };
        var waitForSubmit = function()
        {
          this.count = "";
          if ( ! ( isLoaded || dTargetFrame.readyState == "complete" ) ) {
            st( waitForSubmit, 200 );
            this.count ++;
          } else if (this.count > 7) {
            return true;
            console.log("skipping dForm");
          }
        else {
          d.body.removeChild( dForm );
          d.body.removeChild( dTarget );
        }
      };
      st( waitForSubmit, 100 );
      }
    } else {
      console.log('aoCAP property missing');
      }
    }
   };

3. Call the AoProcessForm function (defined in the script above) from your webpage. What this call looks like will depend upon how your page is set up. The example below shows one possible implementation based on http://api.jquery.com/jQuery.ajax/:

   $.ajax({
   async: false,
   url: 'your-url-where-request-is-sent',
   type: 'POST',
   data: PostData,
   success: function(data) {
   setTimeout(AoProcessForm(this), 0);
   // any other success behavior
   
   }, error:function (xhr, ajaxOptions, thrownError){
   // error behavior
   }
   });
   
   document.getElementById("myform").addEventListener("submit", function(evt) {
   evt.preventDefault();
   setTimeout(AoProcessForm(this), 0);
   }, true);
   

Note: setTimeout(AoProcessForm(this), 0) may need to be customized to reference your form, rather than using this

Frequently Asked Questions

What if I don't see an ID or name attribute inside the <form> tag?

• This script requires a name="nameExample" or id="idExample" inside your <form> tag (within your custom form's HTML) in order to be able to target your form.
• To successfully integrate with this JavaScript-based external post method, you will need to add one of these attributes to your form's HTML inside the <form> tag.

Where should I place this script?

• It can be placed anywhere on your page where JavaScript can run (head or body), though we advise placing it at the foot of your page.

What if I place this script on a page without the correct form?

• The external formcap.js script will load, but it will take no action and there should not be any detrimental effect on your web page.

I have more than one form per web page. Will this work?

• There is no harm in using multiple formcap.js scripts on the same web page.
• One function of this script is that it will load the full formcap.js external script located at http://www.yoursubdomain.domain.com/acton/js/formcap.js on your page once per page-load, so multiple instances of the above script will load that external script multiple times.
• If you want to save the few Kilobytes of redundancy this would create, all you need to do is omit the document.write line from the extra instances of the script to avoid this redundant file loading.

Is "formId" or "formName" case-sensitive?

• Yes -- these properties are case-sensitive because Javascript is case-sensitive. These are properties of the script itself, and don't correspond to your form's HTML capitalization.
• For example, you can use <form id="myID"> or <form ID="myID"> or <form name="myName"> or <form NAME="myName"> and so on.

If the beacon is working on the site, does this javascript also work with the beacon to track as a lead conversion (e.g. from anonymous to known)?

• Yes it does! Unknown contacts who submit an external form will still become a known contact in your account.

How do I troubleshoot if this is not working?

• Go to the URL with your custom form, submit the form, and check the Developer tools or Javascript console in your browser. Most often, the source of the problem is a syntax error such as a missing single-quote.
• The developer interface of your browser should highlight any script errors it catches.
• Solutions to some common console errors:
  • "SyntaxError: Expected token '}'" is caused by a missing quote. Please ensure all single quotes or double quotes are properly paired (every opening quote needs a closing quote of the same type). This also may be caused by a smart quote, which should be replaced with a single quote.
  • "Property ‘submit’ of object #<HTMLFormElement> is not a function" is caused by your form's submit button having a name attribute of "submit". Please avoid using "submit" as your form input names.