Here is how to protect your forms from invalid lead submissions created by bots, disgruntled competitors and fraudulent sources of ad traffic.

JavaScript implementation

The JavaScript implementation contains two major steps: 1) setting up the tracking code on every page and 2) additional protecting your form submissions.

The example below details how to forward the Spider AF score associated with a submission along with other values of your form.

Note that some changes may be required depending on the specific CRM integration you have implemented.

Insert the tracking javascript tag on all pages:

<script> 
var sptrk=function(){var o="https://sp-trk.com/",t="__spd",e=(new Date).getTime();window[t]||(window[t]={init:!1});var c=window[t];c.d||(c.d=[]);var s=c.d;function v(t){var i=document.createElement("script");i.async=!0,i.src=t,document.head.appendChild(i)}c.init||v(o+"u");var u=/^([a-z0-9]{8})-([a-z0-9]{2})$/;return function(){var t=arguments;if(s.push(t),"config"==t[0]&&!c.init&&!c.a){c.init=!0;var i=t[1],n=i.match(u),a=n[1],r=n[2];if(!a||!r)throw"invalid id: "+i;var d=Math.random().toString(36).substring(2,15);v(o+"t/"+a+"?"+("a="+e+"&o="+d))}}}(); 

sptrk('config', '<tracker>-01');
</script>

In the script above, replace <tracker> with the tracker ID you created in the dashboard (available in the configuration page).

if you would like to bind the user id and/or session id, you can do so by extending the options passed to the config:
```
sptrk('config', '<tracker>-01', {xuid: '<user id>', xsid: '<session id>'});
```

Apply the form submission validation on every form page of your page:

<script>
function addDataToForm(result, form) {
  // add the result information to the form as hidden field
  // 3 fields are available (see below for more details):
  // - score (result.s)
  // - request_id (result.r)
  // - token (result.t)

  $('<input>').attr('type', 'hidden').attr('name', 'saf_score').attr('value', result.s).appendTo(form);
  $('<input>').attr('type', 'hidden').attr('name', 'saf_request').attr('value', result.r).appendTo(form);

  // add the token if needed
  // $('<input>').attr('type', 'hidden').attr('name', 'saf_token').attr('value', result.t).appendTo(form);
}


var hasExecutedFormSubmission = [];

function processForm(e) {
    // analyze the submitted form content with Spider AF
    // and stored the results:
    const btn = $(this);
    const form = btn.closest('form');

    if (hasExecutedFormSubmission[form]) {
        return true;
    }
    
    e.preventDefault();
    hasExecutedFormSubmission[form]=true;

    // capture all the form values automatically: 
    var formValues = {}; 
    form.serializeArray().forEach(function(o) { if (o["value"]) { formValues[o["name"]] = o["value"] } }); 

    // OR specify each value directly: 
    // formValues = {
    // name: form.find('#name').val(),
    // email: form.find('#email').val(),
    // phone: form.find('#phone').val(),
    // address: form.find('#address').val()
    // };

    sptrk('validate', 'conversion', formValues, function(result) {
        // add the score to the form and trigger the final submission
        addDataToForm(result, form);
        btn.trigger('click');
    });
}

// apply the form validation to every submit button in the page:
$(document).ready(function() {
    $('input[type=submit]').click(processForm);
});
</script>

Supported form values

Supported form value fields are: name, email, phone and address. When these fields are provided, they will be used for detecting invalid leads and automatically displayed in the dashboard log data for your reference.

Form submission type

In the snippet above, you can replace the 'conversion' value by any other action name that better represent your form's intent. Common examples are 'sign-up' , 'login', 'password-reset' or also for marketing forms 'newsletter-form' or 'download-form'.

The form validation script above has two major components:

addDataToForm: this function adds the Spider AF data associated with the form submission to your form's hidden input values. In this example, the score and submission request ID are added to fields saf_score and saf_request respectively.
processForm: this function is executed once the submit button of the form is click and submits the form values to Spider AF for classification. It then adds the result to the form by calling into (1) addDataToForm.

NOTE: the script above requires JQuery to be installed.

Spider AF data available in JavaScript

3 fields are available in the result of the form validation request. You can refer to the snippet above for an example of how to use them.

Descriptive Name	Field	How to use
Score	`result.s`	A score of 0.0 indicates that no problem was found. The token is valid and the form submission should be accepted. On the other hand, a score of 1.0 indicates an issue has been detected. In this case the reason is described in the reason field.
Request ID	`result.r`	The unique request ID associated with the Spider AF validation request.
Server-side Token	`result.t`	The token to be used for server-side validation.

Server-side token verification

To ensure your forms have highest level of protection, we also recommend adding server side verification.

How to use Spider AF for Web

How to set up audience inclusions on Criteo.

Getting started with the Spider AF Ad Fraud Protection - Onboarding

Getting started with the Spider AF - Dashboard integration

Protect your Webflow forms