Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Squarespace Forms Integration for Salesforce
// 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;
}
});
// 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();
}
});
});
@urbanteachers

This comment has been minimized.

Copy link

@urbanteachers urbanteachers commented Nov 8, 2016

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

@creatyvtype

This comment has been minimized.

Copy link
Owner Author

@creatyvtype creatyvtype commented Nov 26, 2016

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

@pinkpo

This comment has been minimized.

Copy link

@pinkpo pinkpo commented Dec 9, 2016

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

@osler123

This comment has been minimized.

Copy link

@osler123 osler123 commented Jan 30, 2017

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?

@jdshepard

This comment has been minimized.

Copy link

@jdshepard jdshepard commented Feb 24, 2017

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

@creatyvtype

This comment has been minimized.

Copy link
Owner Author

@creatyvtype creatyvtype commented Mar 20, 2017

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

@creatyvtype

This comment has been minimized.

Copy link
Owner Author

@creatyvtype creatyvtype commented Mar 20, 2017

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.

@Jsiewierski11

This comment has been minimized.

Copy link

@Jsiewierski11 Jsiewierski11 commented Aug 14, 2017

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

@zblanco

This comment has been minimized.

Copy link

@zblanco zblanco commented Jan 24, 2018

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

@TheBeerdedBeer

This comment has been minimized.

Copy link

@TheBeerdedBeer TheBeerdedBeer commented Mar 28, 2018

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.

@jarooty

This comment has been minimized.

Copy link

@jarooty jarooty commented Jul 30, 2018

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

@ammoneyops

This comment has been minimized.

Copy link

@ammoneyops ammoneyops commented Nov 5, 2018

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.

@kmclaugh

This comment has been minimized.

Copy link

@kmclaugh kmclaugh commented Apr 4, 2019

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

@indieianjones

This comment has been minimized.

Copy link

@indieianjones indieianjones commented Apr 8, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.