How to create and generate a lead capture form

Summary:

OpenSolar enables seamless integration of leads generated via the OpenSolar Lead Capture Form directly into the platform. Users can customize the form, generate an embeddable code snippet, and place it on their company website or blog. While the process is straightforward, it does require a basic understanding of HTML/CSS and access to a hosting platform (e.g., AWS, WordPress, GoDaddy).

Table of contents:

Creating the Lead Capture Form

• Configuration
• Input fields
• Spam Protection
• EMBED Code

Integrating the lead capture form

• Embed in page

Platform-specific Instructions

• SquareSpace
• Wordpress.org
• Wordpress.com
• Wix

Creating the Lead Capture Form:

Navigate to:

• Control > Other > Lead capture:

Click + Add Lead Capture.

Choose whether the form should appear as:

• An embedded form within a page

• A pop-up form when a button or link is clicked

The form consists of four key sections:

• Configuration

• Input Fields

• SPAM Protection (optional)

• Embed Code

Configuration:

The Configuration section allows you to set key form parameters:

• Format: Select between a pop-up or embedded format.

• Title: Internal name visible in the OpenSolar dashboard.

• Assign to Team Member: New leads are assigned to this individual.

• Lead Source: Tag applied to identify lead origin.

• Form Heading: Main heading visible to customers.

• Form Subheading: Secondary heading for additional context.

• Submit Button Label: Text displayed on the submission button.

• Thank You Message: Confirmation message shown after submission.

Input fields:

This section controls which data fields are included in the form. Options include:

• Last Name

• Phone Number

• Notes

• Roof Type

• Number of Phases

For each field, you can configure it as:

• Excluded

• Included Optional

• Included Required

Spam Protection:

Enter the reCaptcha Site Key and Secret Key provided by Google to enable it in the form.You can optionally add Google reCAPTCHA v3 to enable SPAM protection.  If you haven't created one already for your website before, you can create a new one here.

EMBED Code:

The code is only visible once you save the Lead Capture Form. The code remains the same even if you edit the input fields, and the changes can be seen on the website dynamically. You do not have to update the code on the website every time you edit the Lead Capture Form.

Integrating the lead capture form:

While simple, form integration requires basic knowledge of HTML and access to the hosting environment.

Embed in page:

Below is an example of a dummy website.

Suppose you want to insert the form between the “Our Services” and “Partners” sections of a website. Follow these steps:

• Copy the generated script from the Lead Capture form.

• Identify the appropriate <div> tag in your website HTML code.

• Paste the code snippet at the desired location.

Example:

Once published, the form should render immediately.

Platform-specific Instructions: 

SquareSpace:

• Go to your website editor.

• Click Manage Sections → Add Section.

• Use the Code Block feature to paste the script.

• Save the changes.

Wordpress.org:

Built in editor

• Add (+) Custom HTML
• Paste the code snippet into the custom HTML
• Save and publish

Alternative method:

• Add (+) plugin - code embed
• Paste the code snippet into the plugin
• Save and publish

Wordpress.com:

Built-in Editor (Integration is not supported by WordPress)

Alternative Method

• Add (+) plugin - Code Embed
• Paste the code snippet into the plugin
• Save and publish

Wix:

• Go to editor
• Click the Wix App market
• In the toolbar, select HTML and choose HTML iFrame/Embed
• Add it to the site
• A window pops up. Click Enter code
• Paste the code inside the <div> wrapper
  • <div> <script></div>