Integrating with FormAssembly

FormAssembly is really powerful compliance tool to help your business collect information and then integrate that information across all your core business systems. Our integration gives you the flexibility to make binding contracts out of forms that are filled out and executed in FormAssembly but managed inside of Ironclad Clickwrap.

Example integrated form

To check out an example of an integrated form, check out this form.

FormAssembly Integration: Assumptions

This is a basic example using a standard PactSafe clickwrap Group
For more sophisticated examples, please get in touch!
This requires the use of the Custom Code feature of FormAssembly.
You'll need some semi-advanced knowledge of HTML and how selectors in HTML work.

What you need

Any FormAssembly form setup
A "Checkbox" added to your form
A field for email address

Sample Code

Here's a code snippet that's well commented and gives you everything you need to know to get the integration going with a FormAssembly form.

Note: This sample code will be pasted directly into the "Custom Code" feature within a FormAssembly form which can be found here:

<!-- use this in your CUSTOM CODE in FormAssembly -->
<script>
  (function(w,d,s,c,n,a,b){w['PactSafeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)}, w[n].on=function(){(w[n].e=w[n].e||[]).push(arguments)},w[n].once=function(){(w[n].eo=w[n].eo||[]).push(arguments)},w[n].off=function(){(w[n].o=w[n].o||[]).push(arguments)},w[n].t=1*new Date(); a=d.createElement(s),b=d.getElementsByTagName(s)[0];a.async=1;a.src=c;b.parentNode.insertBefore(a,b) })(window,document,'script','//vault.pactsafe.io/ps.min.js','_ps');
  
  // EXAMPLE FORM ASSEMBLY FORM HOSTED AT:
  // https://www.tfaforms.com/445070
  
  // Site Access ID can be found at https://app.pactsafe.com/settings/account
  _ps('create', '25b2b173-632a-4227-9877-31d2109d8c98');
  
  // after you create and configure your Group (https://app.pactsafe.com/groups), paste in the "key"
  // "key" below is 'register-clickwrap'
  // "container_selector" is where the JavaScript will inject the contracts/checkbox(es)
      // the "container_selector" should be the ID of the div housing a checkbox field you add to your form
      // view a quick video on how to use Chrome Dev Tools to find that here: https://cl.ly/35152O3p3f3T
  // "signer_id_selector" is the field we'll listen to to identify the signer... a la, the email input field
      // view a quick video on how to use Chrome Dev Tools to find that here: https://cl.ly/3v1o1c0b2q22
  _ps('load', 'register-clickwrap', { container_selector: "tfa_4-D", signer_id_selector: "tfa_2" });
  
  // VALIDATION
  // This code disables the submission of the form until the contract is valid
  // by disabling the "submit" button (supported in IE9+)
  window.onload = function() {
    document.getElementsByClassName("primaryAction")[0].disabled = true;
  }
  
  _ps.on('valid', function(){
    document.getElementsByClassName("primaryAction")[0].disabled = false;
  });
  _ps.on('invalid', function(){
    document.getElementsByClassName("primaryAction")[0].disabled = true;
  });
</script>
<style>
  /* removes padding added by the PactSafe snippet, optional depending on your layout preference */
  #ps-group-register-clickwrap div.ps-contract{ padding-bottom: 0 !important; }
</style>

How do I find the `container_selector`?

Here's how you find the container_selector on your form:

How do I find the `signer_id_selector`?

Here's how you find the signer_id_selector on your form: