Setting Up ActiveProspect Consent Tracking On A Stack Form & Survey

Enhance your Stack forms and surveys by integrating ActiveProspect consent tracking. Follow these steps to set it up seamlessly:

Step-by-Step Guide

1. Build Your Form

   • Create your form as you usually do within Stack.

2. Add a Custom Short Text Field

   • Create a field named xxTrustedFormCertUrl.
   • Drag this field into your form, positioning it above the submit button.

3. Integrate the Form

   • Save your form.
   • Click the Integrate Form button.
   • Go to the Link tab and copy the form URL.
   • Open this URL in a new Google Chrome tab (you’ll return to this tab in a later step).

4. Insert an HTML Field

   • Drag an HTML field into your form, placing it below the submit button.
   • Select the HTML field and click the Edit Script button.
   • Copy and paste the custom script provided below (do not save yet).

5. Inspect and Copy Field ID

   • Return to the tab opened in Step 3.
   • Right-click the page and select Inspect.
   • Use the mouse pointer tool to click the xxTrustedFormCertUrl field.
   • Copy its ID.

6. Edit the Script

   • Go back to the form’s Edit Script modal.
   • Replace FORMID in both instances within the script with the ID you copied.
   • Save the changes.

7. Apply Custom CSS

   • Copy the custom CSS provided below.
   • Open the Styles tab in your form settings.
   • Paste the CSS into the Custom CSS field.
   • Adjust the number in parentheses to match the position of the xxTrustedFormCertUrl field in your form.
   • Save the form.

Custom CSS for Forms

.form-field-wrapper:nth-child(n) {
  display: none;
}

Custom CSS for Surveys

.slide-no-SlideNumber .form-field-wrapper:nth-child(n) {
  display: none;
}

Note:

• Replace SlideNumber with the actual slide number of your survey.
• Replace n with the position of the field you wish to hide.
• Ensure xxTrustedFormCertUrl is placed above any hidden fields in a slide or form.

Example

If the xxTrustedFormCertUrl field is on the second slide and is the fourth element:

.slide-no-2 .form-field-wrapper:nth-child(4) {
  display: none;
}

Custom Script

<script type="text/javascript">
  (function() {
      var field = 'xxTrustedFormCertUrl';
      var provideReferrer = false;
      var invertFieldSensitivity = false;
      var tf = document.createElement('script');
      tf.type = 'text/javascript'; tf.async = true;
      tf.src = 'http' + ('https:' == document.location.protocol ? 's' : '') +
        '://api.trustedform.com/trustedform.js?provide_referrer=' + escape(provideReferrer) + '&field=' + escape(field) + '&l='+new Date().getTime()+Math.random() + '&invert_field_sensitivity=' + invertFieldSensitivity;
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tf, s); }
  )();
function trustedFormCertUrlCallback(certificateUrl) {
    document.getElementsByName('customFieldId')[0].value = certificateUrl;
    document.getElementsByName('customFieldId')[0].dispatchEvent(new Event("input"));
}
</script>
<noscript>
    <img src="http://api.trustedform.com/ns.gif" />
</noscript>

By following these steps, you can effectively track consent using ActiveProspect within your Stack forms and surveys.