Skip to content

Instantly share code, notes, and snippets.

@sperand-io
Last active August 1, 2018 18:52
Show Gist options
  • Save sperand-io/f90f990eeebe11ccbbff to your computer and use it in GitHub Desktop.
Save sperand-io/f90f990eeebe11ccbbff to your computer and use it in GitHub Desktop.
Squarespace Form Submission -> Segment "Identify"
/**
* helper function to take the form and
* get back a js object with field/value mappings
* ignoring submit fields and fields whose name we can't ascertain
*/
function serialize(form){
return Array.prototype.slice.call(form.elements)
.filter(isInputElement)
.filter(isNotSubmit)
.filter(hasFieldName)
.reduce(function(data, node, index) {
data[getFieldName(node)] = node.value
return data;
}, {});
}
/**
* Check if this form element is of type input
*/
function isInputElement(node) {
return node.tagName.toLowerCase() === 'input';
}
/**
* Check if this is a 'submit' input element
*/
function isNotSubmit(node) {
return node.type !== 'submit';
}
/**
* Ensure field has a derived name
*/
function hasFieldName(node) {
return getFieldName(node) !== 'unknown';
}
/**
* Attempt to ascertain "name" of field.
*
* they don't give inputs real `name` attributes, so
* best guess is to hack around the element's label text,
* falling back to the placeholder text. (their html is
* not semantic and often labels erroneously reference
* parent divs instead of sibling input elements)
*
* strip out the stars they show when validation fails
*
* if label is misplaced _and_ there's no placeholder,
* this function is insufficient
*/
function getFieldName(input) {
if (!input.labels.length) return input.placeholder || 'unknown';
var labelText = input.labels[0].textContent.trim();
return ~labelText.indexOf(' *')
? labelText.slice(0, labelText.indexOf(' *'))
: labelText;
}
/**
* Listen for form submissions and send identify
* if you'd like an event too, just delete the '//' in the track line
*/
document.forms[0].addEventListener('submit', function(e) {
analytics.identify(serialize(e.target));
// analytics.track('Submitted Form');
});
@focusmade
Copy link

How can I implement this? Add it to advanced -> code injection?

@sethfam
Copy link

sethfam commented Aug 1, 2018

Hi @sperand-io! Thanks for building this. I can't seem to get it to work on Squarespace, though. Can you advise where this code should be injected?

Thx!
Seth

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment