Squarespace Forms Integration for Salesforce

salesforce.js

// DOES NOT REQUIRE DEVELOPER MODE
// Add this to your HEADER in a <script> tag
// Home -> Settings -> Advanced -> Code Injection -> HEADER

Y.namespace('Template').Salesforce = Class.create({

    /*
    baseUrl
    oid
    */
    initialize: function (config) {
        this.config = config;
    },
  
    formatPhone: function(formData) {
        var phoneArr = new Array(formData['phone-area-code'], formData['phone-local-prefix'], formData['phone-local-suffix']);
      	return phoneArr.join('-')
    },
    
    // rename to reuse for different forms, eg. submitNormalLead
    submit: function () {
        var formData = this.getFormData();

        var phoneNumber = this.formatPhone(formData)

        // add data from form values pulled below in getFormData().  
        // replace the keys for title, company, and address with those 
        // that are generated for your form
        
        // NOTE: There is info out there that ids with 'yui' are randomly generated. This is true, however 
        // if it begins with 'block-yui', 'select-yui', 'text-yui', etc it will stay the same and is a 
        // useable id for both CSS AND Script
        var params = {
            first_name: formData['fname'],
            last_name: formData['lname'],
            email: formData['email'],
            phone: phoneNumber,
            title: formData['your-yui-field-id'],
            company: formData['your-yui-field-id'], 
            lead_source: 'Website Capture',
            oid: this.config.oid
        };

        $.ajax({
            url: this.config.baseUrl,
            data: params,
            type: 'GET',
            dataType: 'jsonp',
            jsonp: false,
            complete: function(data) {
                console.log('Salesforce Lead Sent');
            }
        });
    },

    getFormData: function (formSubmit) {
        var data = {};
        
        // Not tested for more than one form on a page...
        Y.all('input,textarea,select,button').each(function(item) {
            var key = null;

            var $element = $(this);

            // this builds an array of input name -> value entered
            // in the sqsp forms, fields outside of name and email
            // don't have names and instead use random YUI ids.
            // jquery is included to pull in some extra data for the
            // phone number fields.  you need to find the ids for your
            // extra form fields and add them to params above.
            
            if (item.get('name')) {
                key = item.get('name');
                
            } else if ($element.attr('x-autocompletetype')) {
                key = $element.attr('x-autocompletetype');
      
            } else {
                key = item.get('id');
            }
            
            if (item.get('type') == 'checkbox') {
            	  if (item.get('checked')) {
                	  if (data[key]) {
                    	  data[key] = data[key] + ', ' + item.get('value')
                    } else {
                    	  data[key] = item.get('value')
                    }
                }
            } else {  
      			    data[key] = item.get('value');
            }

        });

        console.log(data);
        return data;
    }
});

site.js

// DOES NOT REQUIRE DEVELOPER MODE
// Add this to your FOOTER in a <script> tag
// Home -> Settings -> Advanced -> Code Injection -> FOOTER

Y.on('domready', function() {
      Y.use('event', 'node', function(Y) {
      var submitbuttons = Y.all('input[type=submit]');
      submitbuttons.on("click", function() {
            // Get the correct form if it's on the page
            var $form = $('#block-yui_your_forms_wrapper form')
            if ($form.length) {
                  // Submit to sales force
                  var salesforce = new Y.Template.Salesforce({
                        baseUrl: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
                        oid: "00DE0000000IPLv", // replace with your OID from Salesforce
                  });
                  
                  // Replace with custom-named submit for your particular form
                  salesforce.submit();
            }
            
    });
});

@TenaciousB12 AFAIK reCaptcha should still work with these forms - it just blocks submission / click. The forms where this is implemented has reCaptcha working normally.

@creatyvtype, thanks for the reply. I've been testing it out on a Squarespace website and it seems to post directly to Salesforce regardless of any requirements - if fields are required, or reCaptcha is enabled, the form is immediately posted to Salesforce with whatever field data has been filled in, regardless if the requirements have been met. This is with the Impact template. Any thoughts?