{"title":"▶️ Add a web-to-lead form","slug":"how-to-add-a-web-to-lead-form","url":"https://support.storeconnect.com/articles/how-to-add-a-web-to-lead-form","url_markdown":"https://support.storeconnect.com/articles/how-to-add-a-web-to-lead-form.md","subtitle":null,"summary":"Embed a Salesforce Web-to-Lead form on your StoreConnect contact page with Google reCAPTCHA spam protection, custom CSS styling via style blocks, and client-side validation.","type":"Videos_Tutorials","video_url":"https://vimeo.com/1197570365?fl=sv\u0026fe=ci","keywords":null,"last_modified":"2026-08-21T07:12:35+0000","body_markdown":"[Go here](web-to-lead-and-web-to-case-integration) to find the sample code for adding validation to the reCAPTCHA form.\n\nCSS for your Style Block:\n\n```css\n\n.sc-web-to-lead-form label {\n  color: var(--sc-shade-dark);\n  font-size: var(--sc-font-small);\n  margin-bottom: var(--sc-spacing-tiny);\n}\n\n.sc-web-to-lead-form input {\n  -webkit-appearance: none;\n  background-color: rgba(0, 0, 0, 0);\n  background-color: #fff;\n  border: none;\n  border-radius: var(--sc-input-border-radius);\n  box-shadow: inset 0 1px 2px #0000000d;\n  cursor: pointer;\n  height: var(--sc-input-height);\n  outline: none;\n  outline: 1px solid #d9d9d9;\n  padding: 0 var(--sc-spacing-medium);\n  position: relative;\n  transition: border-color .2s ease,background-color .2s ease;\n  margin-bottom: var(--sc-spacing-base);\n  width: 100%;\n  max-width: 500px;\n}\n\n.sc-web-to-lead-form input::placeholder {\n  color:#00000080;\n  transition:color .2s ease;\n}\n\n.sc-web-to-lead-form input:disabled {\n  background-color:#00000008;\n  border-color:var(--sc-shade-lighter);\n  color:var(--sc-shade-darkest);\n}\n.sc-web-to-lead-form input:focus {\n  background-color:hsla(var(--sc-color-primary-h),20%,98%,1);\n  box-shadow:0 0 0 4px hsla(var(--sc-color-primary-h),71%,92%,1);\n  outline-color:hsla(var(--sc-color-primary-h),71%,80%,1);\n}\n.sc-web-to-lead-form select {\n  appearance: none;\n  -webkit-appearance: none;\n  background: none;\n  background-color: #fff;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23111' d='m56.7 83.75 38.7-38.7c3.4-3.4 3.4-9 0-12.4s-9-3.4-12.4 0l-32.5 32.4L18 32.55c-3.4-3.4-9-3.4-12.4 0-1.7 1.7-2.6 4-2.6 6.2 0 2.3.9 4.5 2.6 6.2l38.7 38.8c3.4 3.4 9 3.4 12.4 0'/%3E%3C/svg%3E\");\n  background-position-x: calc(100% - var(--sc-spacing-base));\n  background-position-y: center;\n  background-repeat: no-repeat;\n  background-size: 10px;\n  border: none;\n  border-radius: 0;\n  border-radius: var(--sc-input-border-radius);\n  box-shadow: inset 0 1px 2px #0000000d;\n  cursor: pointer;\n  height: var(--sc-input-height);\n  max-width: 500px;\n  outline: 1px solid #d9d9d9;\n  padding: 0 var(--sc-spacing-medium);\n  padding-right: var(--sc-spacing-xlarge);\n  width: 100%;\n  margin-bottom: var(--sc-spacing-base);\n}\n.sc-web-to-lead-form select:focus {\n  box-shadow:0 0 0 4px hsla(var(--sc-color-primary-h),71%,92%,1);\n  outline:1px solid hsla(var(--sc-color-primary-h),71%,80%,1)\n}\n.sc-web-to-lead-form input[type=\"submit\"] {\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--sc-border-radius);\n  cursor: pointer;\n  display: inline-flex;\n  font-weight: var(--sc-font-bold);\n  justify-content: space-around;\n  line-height: 1;\n  outline: none;\n  text-align: center;\n  transition: background-color .1s ease,color .1s ease;\n  background-color: hsla(var(--sc-color-primary-h),var(--sc-color-primary-s),var(--sc-color-primary-l),1);\n  color: #fff;\n  font-size: var(--sc-font-medium);\n  min-width: 150px;\n  padding: var(--sc-spacing-medium) var(--sc-spacing-large);\n  margin-bottom: var(--sc-spacing-base);\n}\n.sc-web-to-lead-form textarea {\n  background-color:#fff;\n  border:none;\n  border-radius:var(--sc-input-border-radius);\n  box-shadow:inset 0 1px 2px #0000000d;\n  box-shadow:inset 0 1px 2px #0000001a;\n  outline:1px solid #d9d9d9;\n  padding:var(--sc-spacing-medium);\n  max-width: 500px;\n  width: 100%;\n}\n.sc-web-to-lead-form textarea:focus {\n  box-shadow:0 0 0 4px hsla(var(--sc-color-primary-h),71%,92%,1);\n  outline:1px solid hsla(var(--sc-color-primary-h),71%,80%,1);\n}\n```\n\n### **STEP 1: Create a Web-to-Lead Form in Salesforce**\n\n1.  Go to **Salesforce Setup** (`Cog wheel \u003e Setup`).\n\n2.  Use the **Quick Find** to search for `Web-to-Lead`.\n\n3.  Select **Web-to-Lead**, then click **Create Web-to-Lead Form**.\n\n4.  Choose the fields you want (e.g., `First Name`, `Last Name`, `Email`, `Company`).\n\n5.  Set the **Return URL** (e.g., your homepage) where users are redirected after submitting the form.\n\n\n---\n\n### **STEP 2: Set Up Google reCAPTCHA (to prevent spam)**\n\n1.  Go to [https://developers.google.com/recaptcha](https://developers.google.com/recaptcha)\n\n2.  Click **Get Started** and:\n\n    -   Name your reCAPTCHA.\n\n    -   Choose **v2 reCAPTCHA**.\n\n    -   Add your **Store’s Domain** (without `https://`).\n\n3.  Submit and copy your **Site Key** and **Secret Key**.\n\n\nBack in **Salesforce**:\n\n4\\. In the Web-to-Lead settings, click the **Lookup** icon next to the reCAPTCHA settings.\n5\\. Click **New**, enter a name, paste your **Site Key** and **Secret Key**, then **Save**.\n6\\. Now, click **Generate** to get the **HTML code for your form**.\n\n---\n\n### **STEP 3: Add the Form to Your Contact Page in StoreConnect**\n\n1.  Go to **StoreConnect Navigation** → `Custom Content` → `Custom Pages` → `All Pages`.\n\n2.  Open your **Contact Page**.\n\n3.  Click **New** to create a **new Content Block**.\n\n4.  Set the **Content Template** to **No Added Styling**.\n\n5.  Name the block and paste the **Salesforce HTML form code** under `Content` and click **Save**.\n\n\n---\n\n### **STEP 4: Style the Form with CSS in StoreConnect**\n\n1.  In StoreConnect Navigation, go to **Custom Content \u003e Style Blocks**.\n\n2.  Click **New Style Block**, name it, and assign it to your store.\n\n3.  Paste the **CSS styling (provided above)**.\n\n4.  Save the style block.\n\n\nTo apply styling:\n5\\. Reopen the **Web-to-Lead Content Block** on the contact page.\n6\\. Click **Content** to edit the HTML.\n7\\. After the\n\ntag, add the **CSS class reference** that applies your style block.\n\n```text\n\nclass=\"sc-web-to-lead-form\"\n```\n\n8\\. Save changes and **refresh your contact page** to see the styled form.\n\n---\n\n### **STEP 5: Enhance UX with Validation Script**\n\n1.  Go back into the **HTML content** of the form block.\n\n2.  At the bottom, insert the **custom validation script (provided above)**.\n\n3.  Scroll up and ensure the  tag includes `id=\"contact-form\"`.\n\n4.  Save the changes.\n\n\nThis step ensures that users are prompted with a friendly message if they try to submit the form without completing the reCAPTCHA."}