Before starting, ensure you've taken a look at the getting started guide. Below we describe how to implement it specifically in Webflow.
After implementing the steps below, you will be able to store the Spider AF data into Webflow's form submission data page:
1. Setup your hidden fields to store the Spider AF data
To setup the hidden fields, we add a "code embed" element to the form and manually add the two hidden inputs to store our values.
add the code embed element:
be sure to position it inside the form block:
Set its content as follows:
<input type="hidden" name="saf_score" value="" />
<input type="hidden" name="saf_request" value="" />Note: you can access this code by clicking on the
icon, for example:
Ensure your name, email and phone fields use standard names.
If you do not use standard names here, when you setup the code below take an extra caution to ensure they match.
2. Add the Spider AF tracking and protection code code
In the page list, click the settings icon
to open up the custom code section.In the "Inside <head> tag" section, copy and paste the code below:
<script defer src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<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>Replace the
<tracker>at the end by your own tracker ID (available in the configuration page).In the "Before </body> tag" section, copy paste the code below:
<script>
function addDataToForm(result, form) {
$('<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);
}
var hasExecutedFormSubmission = [];
function processForm(e) {
const btn = $(this);
const form = btn.closest('form');
if (hasExecutedFormSubmission[form]) {
return true;
}
e.preventDefault();
hasExecutedFormSubmission[form]=true;
var formValues = {};
// when using default input names, use the default to capture all the form values automatically:
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()
// };
try {
sptrk('validate', 'conversion', formValues, function(result) {
// add result.t to form as hidden field
addDataToForm(result, form);
btn.trigger('click');
});
} catch (e) {
addDataToForm({t: "failed", r: -1, s: 0}, form);
btn.trigger('click');
}
}
var Webflow = Webflow || [];
Webflow.push(function() {
// bind it on every form
$('input[type=submit]').click(processForm);
});
</script>Click the save
button.
If you use non-standard field names for the name, email and phone, be sure to replace the commented code section:
var formValues = {
// edit with the ID of your fields:
name: form.find('#name').val(),
email: form.find('#email').val(),
phone: form.find('#phone').val()
};
After all these steps, publish your form and try a submission. In the data collection you should now see all Spider AF data: