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 having trouble getting this to work. I added salesforce.js code to my header and site.js to my footer. I've updated the Salesforce oid in the site.js script. I then created a form with first name, last name, email and a hidden field called Lead Source. Is there something I'm missing?

Kevin

@utctechadmin You have to dig a little to find your form's #block-yui and swap it out in the footer portion on site.js code's line 10. You shouldn't need the hidden field because the portion in salesforce.js will capture the form and you can just add it there. Make sure you update those fields in salesforce.js to match what's on your form. Your salesforce.js should say:

var params = { first_name: formData['fname'], last_name: formData['lname'], email: formData['email'], lead_source: 'Website Capture', oid: this.config.oid }

But the main key, literally, is getting your form's YUI and putting that in. Then everything should work. Sorry for the late response.

@creatyvtype can you please provide an example of your #block-yui that you used

I am getting the error ReferenceError: Can't find variable: $
in the line in site.js that has var $form = $('block-yui_3_17_2_21_1462965663266_4982')
Not a programmer, can anyone help with suggestions?

@creatyvtype i can't get your code to work. could you give it a quick look and see what i'm doing wrong?

http://www.smilebooth.com/book-now-salesforce-code/

header starts on line 55 and footer starts on line 838.

@osler123 @pinkpo
To use osler's example:
$('#block-yui_3_17_2_21_1462965663266_4982 form')
The missing pieces are the "#" which tells it to look for id="block-yui..." and "form" with a space before it, which tells it to look for a <form> tag inside of that block element. Once that is acquired the rest should work. The same logic will apply to your input names, etc. to capture individual inputs which will be different for every form.

I understand the confusion. This says it does not require developer mode, but it does not mean it does not require a developer, or someone who has some understanding of javascript and DOM manipulation.

@creatyvtype I'm still having trouble getting this to work. I replaced the oid and found the block-yui that is needed but no new leads are showing up in salesforce when I make a submission through the form. I am very confused and would greatly appreciate some help.

Edit: When I use the form to submit email I am getting a "Uncaught ReferenceError: $ is not defined" error on the code for
var $form = $('#block-yui_3_17_2_46_1500994193452_4741 form')
I've looked several times and this is the correct id for the block form. I'm not sure what is going wrong.

@Jsiewierski11 @creatyvtype
Just got my form submission to work. A few things to note:
Make sure to include jquery so that the

Uncaught ReferenceError: $ is not defined

error doesn't occur. I put the following at the top of my header code injection (above the salesforce.js):

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

Make sure you wrap all the injected js code in <script></script> tags like above.

Try removing your form and recreating it by adding a new form block with the Squarespace page editor. I was using a template page with the form already built in, and the pre-made template form wasn't wrapped in the same block tag needed. I.e. the pre-made template forms will not have a #block-yui id needed for the submission to work. Once I removed the templated form and made another, it had the #block-yui needed for the site.js. You can know if you're referencing the right block because it will mention various classes such as form-block and sqs-block-form.

Finally I was getting a warning that a } was missing. Turns out the site.js needs a }); appended to the end. It might work anyway because Javascript though.

I also changed my baseUrl to match what Salesforce generated in my Web-to-Lead form.

Here's what my site.js looks like:

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_3_17_2_5_1516810611212_11111 form')
            if ($form.length) {
                // Submit to sales force
                var salesforce = new Y.Template.Salesforce({
                    baseUrl: "https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
                        oid: "ORG-ID-HERE", // replace with your OID from Salesforce
                    });
                  
                // Replace with custom-named submit for your particular form
                salesforce.submitLead();
            }

        });
    });
});

Hopefully this helps!

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?