Web-to-Lead and Web-to-Case integration

This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

Salesforce offers:

Each of these can be used on the StoreConnect platform.

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


Further reading

 


 

  1. Administrator: Someone who manages something. For example, a Salesforce Administrator would be the person responsible for managing and configuring a Salesforce Org. 

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

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