Web-to-Lead and Web-to-Case integration
Salesforce offers:
- Web-to-Lead forms for lead generation
- Web-to-Case forms for customer support
Each of these can be used on the StoreConnect platform.
Related Help Articles
Building and Integrating Your Forms
A Salesforce System Administrator1 has the technical skill required to build out the web-to-lead or web-to-case html codes. There may be some CSS2 styling required on these forms to match your site design. But once you have the html codes you only need to add them to a Content Block3 and insert the Content Block to the Page in the desired location.
You generate your forms code from Web-to-Lead or Web-to-Case in Salesforce Setup.
Generate the Form Code
In this video we show you how to create your web-to-lead html code. It is also highly recommended you add Captcha to your forms to prevent being spammed.
Place the Form Code onto a Page
Once you have your code, you can create a Content Block and paste it in the Content field. You then add that content block to your page or article. Alternatively you could paste your code directly on the page or article without the needing for content block.
Make sure you test your form to ensure entries arrive in Salesforce. Checkout Troubleshooting if your form appears to not be working.
Captcha
Captcha can be added to your forms code when generating the code in Salesforce using Google reCAPTCHA v2.
If you add Googles reCAPTCHA to your web-to-lead and web-to-case forms, you may want to add the below JavaScript also. Without it, if a visitor forgets to click on the reCAPTCHA checkbox, their form will be rejected by Salesforce without notice. This code will enforce the use of the checkbox.
1) Give the form an ID by adding id='contact-form'
to this line of your forms HTML:
<form id='contact-form' action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
2) Place this code at the bottom of the page or content block, after the forms HTML:
<script>
document.getElementById("contact-form").onsubmit = function (event) {
const recaptcha = document.getElementById("g-recaptcha-response").value
if (recaptcha === "") {
alert("Please confirm that you are not a robot.");
event.preventDefault();
}
}
</script>
You can change the error message (alert) if you want and you must use different form ID’s for each form if you have more than one form on the same page.
Troubleshooting
- If some leads are not coming through to Salesforce, check your Salesforce Duplicate Rules to make sure they don’t block duplicates. Disable alerts on create or add a condition to the rule so it only applies when records are not created by the StoreConnect Synchronisation User.
- Add the raw code generated by Salesforce to a page on its own and confirm this is working, then add your customisations and continue testing until you narrow down on the customisation causing the issue.
Further reading
- Adding CAPTCHA to your Checkout
- Pages
- Introduction to StoreConnect’s Content Management System (CMS)
-
Administrator: Someone who manages something. For example, a Salesforce Administrator would be the person responsible for managing and configuring a Salesforce Org. ↩
-
CSS: Cascading Style Sheets (CSS) is a programming language that defines the design styles; colours, font-sizes, font-types, border-colours, etc on a website. ↩
-
Content Block: Content Blocks are used to place content on your Pages and Articles. There are two types of Content Blocks 1) A Container Content Block, and 2) A Template Content Block. ↩
Back to Documentation