Skip to content
Log in

▶️ Add a web-to-lead form

On this page

Go here 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

  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.

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

Was this article helpful?

Was this article helpful?