# ▶️ Add a web-to-lead form

Source: https://support.storeconnect.com/articles/how-to-add-a-web-to-lead-form · Last modified 21 August 2026

Video: https://vimeo.com/1197570365?fl=sv&fe=ci

[Go here](web-to-lead-and-web-to-case-integration) to find the sample code for adding validation to the reCAPTCHA form.

CSS for your Style Block:

```css

.sc-web-to-lead-form label {
  color: var(--sc-shade-dark);
  font-size: var(--sc-font-small);
  margin-bottom: var(--sc-spacing-tiny);
}

.sc-web-to-lead-form input {
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0);
  background-color: #fff;
  border: none;
  border-radius: var(--sc-input-border-radius);
  box-shadow: inset 0 1px 2px #0000000d;
  cursor: pointer;
  height: var(--sc-input-height);
  outline: none;
  outline: 1px solid #d9d9d9;
  padding: 0 var(--sc-spacing-medium);
  position: relative;
  transition: border-color .2s ease,background-color .2s ease;
  margin-bottom: var(--sc-spacing-base);
  width: 100%;
  max-width: 500px;
}

.sc-web-to-lead-form input::placeholder {
  color:#00000080;
  transition:color .2s ease;
}

.sc-web-to-lead-form input:disabled {
  background-color:#00000008;
  border-color:var(--sc-shade-lighter);
  color:var(--sc-shade-darkest);
}
.sc-web-to-lead-form input:focus {
  background-color:hsla(var(--sc-color-primary-h),20%,98%,1);
  box-shadow:0 0 0 4px hsla(var(--sc-color-primary-h),71%,92%,1);
  outline-color:hsla(var(--sc-color-primary-h),71%,80%,1);
}
.sc-web-to-lead-form select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  background-color: #fff;
  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");
  background-position-x: calc(100% - var(--sc-spacing-base));
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 10px;
  border: none;
  border-radius: 0;
  border-radius: var(--sc-input-border-radius);
  box-shadow: inset 0 1px 2px #0000000d;
  cursor: pointer;
  height: var(--sc-input-height);
  max-width: 500px;
  outline: 1px solid #d9d9d9;
  padding: 0 var(--sc-spacing-medium);
  padding-right: var(--sc-spacing-xlarge);
  width: 100%;
  margin-bottom: var(--sc-spacing-base);
}
.sc-web-to-lead-form select:focus {
  box-shadow:0 0 0 4px hsla(var(--sc-color-primary-h),71%,92%,1);
  outline:1px solid hsla(var(--sc-color-primary-h),71%,80%,1)
}
.sc-web-to-lead-form input[type="submit"] {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--sc-border-radius);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--sc-font-bold);
  justify-content: space-around;
  line-height: 1;
  outline: none;
  text-align: center;
  transition: background-color .1s ease,color .1s ease;
  background-color: hsla(var(--sc-color-primary-h),var(--sc-color-primary-s),var(--sc-color-primary-l),1);
  color: #fff;
  font-size: var(--sc-font-medium);
  min-width: 150px;
  padding: var(--sc-spacing-medium) var(--sc-spacing-large);
  margin-bottom: var(--sc-spacing-base);
}
.sc-web-to-lead-form textarea {
  background-color:#fff;
  border:none;
  border-radius:var(--sc-input-border-radius);
  box-shadow:inset 0 1px 2px #0000000d;
  box-shadow:inset 0 1px 2px #0000001a;
  outline:1px solid #d9d9d9;
  padding:var(--sc-spacing-medium);
  max-width: 500px;
  width: 100%;
}
.sc-web-to-lead-form textarea:focus {
  box-shadow:0 0 0 4px hsla(var(--sc-color-primary-h),71%,92%,1);
  outline:1px solid hsla(var(--sc-color-primary-h),71%,80%,1);
}
```

### **STEP 1: Create a Web-to-Lead Form in Salesforce**

1.  Go to **Salesforce Setup** (`Cog wheel > Setup`).

2.  Use the **Quick Find** to search for `Web-to-Lead`.

3.  Select **Web-to-Lead**, then click **Create Web-to-Lead Form**.

4.  Choose the fields you want (e.g., `First Name`, `Last Name`, `Email`, `Company`).

5.  Set the **Return URL** (e.g., your homepage) where users are redirected after submitting the form.


---

### **STEP 2: Set Up Google reCAPTCHA (to prevent spam)**

1.  Go to [https://developers.google.com/recaptcha](https://developers.google.com/recaptcha)

2.  Click **Get Started** and:

    -   Name your reCAPTCHA.

    -   Choose **v2 reCAPTCHA**.

    -   Add your **Store’s Domain** (without `https://`).

3.  Submit and copy your **Site Key** and **Secret Key**.


Back in **Salesforce**:

4\. In the Web-to-Lead settings, click the **Lookup** icon next to the reCAPTCHA settings.
5\. Click **New**, enter a name, paste your **Site Key** and **Secret Key**, then **Save**.
6\. Now, click **Generate** to get the **HTML code for your form**.

---

### **STEP 3: Add the Form to Your Contact Page in StoreConnect**

1.  Go to **StoreConnect Navigation** → `Custom Content` → `Custom Pages` → `All Pages`.

2.  Open your **Contact Page**.

3.  Click **New** to create a **new Content Block**.

4.  Set the **Content Template** to **No Added Styling**.

5.  Name the block and paste the **Salesforce HTML form code** under `Content` and click **Save**.


---

### **STEP 4: Style the Form with CSS in StoreConnect**

1.  In StoreConnect Navigation, go to **Custom Content > Style Blocks**.

2.  Click **New Style Block**, name it, and assign it to your store.

3.  Paste the **CSS styling (provided above)**.

4.  Save the style block.


To apply styling:
5\. Reopen the **Web-to-Lead Content Block** on the contact page.
6\. Click **Content** to edit the HTML.
7\. After the

tag, add the **CSS class reference** that applies your style block.

```text

class="sc-web-to-lead-form"
```

8\. Save changes and **refresh your contact page** to see the styled form.

---

### **STEP 5: Enhance UX with Validation Script**

1.  Go back into the **HTML content** of the form block.

2.  At the bottom, insert the **custom validation script (provided above)**.

3.  Scroll up and ensure the  tag includes `id="contact-form"`.

4.  Save the changes.


This step ensures that users are prompted with a friendly message if they try to submit the form without completing the reCAPTCHA.

---

## Follow StoreConnect

- [Email Newsletter](https://getstoreconnect.com/c/lp-newsletter)
- [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464)
- [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g)
- [LinkedIn](https://www.linkedin.com/company/storeconnect)
- [X / Twitter](https://x.com/storeconnecthq)

## Popular Links

- [Partners](https://getstoreconnect.com/partners)
- [News](https://getstoreconnect.com/articles/news)
- [Events](https://getstoreconnect.com/articles/events)
- [Feature Comparison](https://getstoreconnect.com/how-we-compare)
- [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT)
- [Book a Demo](https://getstoreconnect.com/contact)

## Documentation

- [Help documentation](https://support.storeconnect.com/help-documentation)
- [AI agents](https://support.storeconnect.com/ai)
- [Videos & tutorials](https://support.storeconnect.com/videos-tutorials)
- [Developer reference](https://support.storeconnect.com/developer-reference)
- [Release notes](https://support.storeconnect.com/release-notes)
- [Troubleshooting](https://support.storeconnect.com/troubleshooting)
- [Trust Center](https://trust.getstoreconnect.com/)
- [Status Page](https://status.storeconnect.com/)

## Contact

- info@getstoreconnect.com
- US +1 415 745 3230
- AUS +61 2 8365 2308

100 S Ashley Dr, Suite 600-2461
Tampa FL 33602-600 USA

Level 22, Sydney Place
180 George Street
Sydney, NSW, 2000, AUS

---

StoreConnect Support — https://support.storeconnect.com/articles/how-to-add-a-web-to-lead-form