// 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(); | |
} | |
}); | |
}); |
This comment has been minimized.
This comment has been minimized.
@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:
But the main key, literally, is getting your form's YUI and putting that in. Then everything should work. Sorry for the late response. |
This comment has been minimized.
This comment has been minimized.
@creatyvtype can you please provide an example of your #block-yui that you used |
This comment has been minimized.
This comment has been minimized.
I am getting the error ReferenceError: Can't find variable: $ |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
@osler123 @pinkpo |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
@Jsiewierski11 @creatyvtype
error doesn't occur. I put the following at the top of my header code injection (above the salesforce.js):
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 Finally I was getting a warning that a 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! |
This comment has been minimized.
This comment has been minimized.
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 " |
This comment has been minimized.
This comment has been minimized.
@MRDoops Thank you brother. I used your workarounds and it worked perfect. |
This comment has been minimized.
This comment has been minimized.
thanks to everyone. this is working perfectly for us. |
This comment has been minimized.
This comment has been minimized.
Anybody else get a cross origin policy error from Salesforce with this? |
This comment has been minimized.
This comment has been minimized.
I'm also receiving CORB error, it is not affecting the processing of the form and sending to salesforce though |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
@TenaciousB12 AFAIK reCaptcha should still work with these forms - it just blocks submission / click. The forms where this is implemented has reCaptcha working normally. |
This comment has been minimized.
This comment has been minimized.
@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? |
This comment has been minimized.
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