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();
            }
            
    });
});

I'm trying to implement this and everything seems to be working up until the submit and I receive a "Uncaught SyntaxError: Unexpected token <" referring to the "baseUrl: "https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"," line. What research I've found says something about returning a page expected to be javascript, but getting a html page with code beginning with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Any thoughts on what I might try next. I feel like I've combed over the code enough that everything else is correct.

@MRDoops Thank you brother. I used your workarounds and it worked perfect.

thanks to everyone. this is working perfectly for us.
wondering if anyone has had success with multiple forms? we have 2 nearly identical forms that i need to capture in salesforce. i know this code doesn't work for the second form. let me know if you have thoughts / advice.

Anybody else get a cross origin policy error from Salesforce with this?

I'm also receiving CORB error, it is not affecting the processing of the form and sending to salesforce though

@creatyvtype, any possibility of updating your code to function off of form submit, rather than on click? Looking at leveraging the built-in reCaptcha options with Google, and using on click seems to bypass the advantages of using reCaptcha.

@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?