Squarespace Forms Integration for Salesforce

salesforce.js

// add this salesforce.js file to your scripts dir after enabling developer mode
// this gets included via entries in the site.region file
Y.namespace('Template').Salesforce = Class.create({

  /*
    baseUrl
    oid
    sqsFormSubmit
  */
  initialize: function (config) {
    this.config = config;
  },

  submit: function () {
    var formData = this.getFormData(this.config.sqsFormSubmit);
    
    phoneArr = new Array(formData['phone-area-code'], formData['phone-local-prefix'], formData['phone-local-suffix']);

    var phoneNumber = phoneArr.join('-');
    var description = '';

    for (key in formData) {
      var value = formData[key];

      if (Array.isArray(value)) {
        value = value.join(' ');
      }

      description += key + ': ' + value + '\n';
    }

    // 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
    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'],
      address: formData['your-yui-field-id'],
      lead_source: formData['sqf_lead_source'] || 'Contact Form',
      description: description,
      oid: this.config.oid
    };

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

  getFormData: function (formSubmit) {
    var data = {};

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

      data[key] = item.get('value');

    });

console.log(data);
    return data;
  }

});

site.js

// add this to the top of your scripts/site.js file after enabling developer mode and pulling down your site.

Y.on('domready', function() {
      Y.use('event', 'node', function(Y) {
      var submitbuttons = Y.all('input[type=submit]');
      submitbuttons.on("click", function() {
            var formSubmit = $('form').serializeArray();
            // 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
                sqsFormSubmit: formSubmit
            });
            salesforce.submit();
    });
});

site.region

//include at the bottom near where other scripts are loaded to enable custom js & jQuery
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="scripts/jquery-2.0.0.min.js"><\/script>')</script>
    <squarespace:script src="salesforce.js" combo="true" />

Hi I have enabled developer mode and added all the code but it still isn't working?

http://www.mc-salesforceprojectmanagement.com/

Also I have multiple forms that all need to go salesforce, how does this work with the field ids as they are different across each form even though they are essentially the same form but re-created on separate pages.

@tajbarr sorry i'm just seeing this - i missed any notifications that you had commented. i looked at your site and there aren't any squarespace forms on there?

i just realized that there's a problem with the code. i think squarespace removed the id's from their forms and made it nearly impossible to hijack them. i'm about to post a fix that instead listens for the submit event and then fires off to salesforce.

Rewrote this to work in non-developer mode. @rwheaton please take a look.
My forked gist

Also, yui ids aren't randomly generated for ones you see with a 'block-yui', 'tex-yui' or other text before the 'yui' portion.
Note comment by Bernard West in this question

Has anyone received a cross origin error with this?