Form Builder

What Are LeadHub Forms?

LeadHub has a built-in form builder that lets you create contact forms and embed them on your website. When someone fills out the form, a lead is created in LeadHub automatically — no copy-pasting, no CSV downloads, no manual entry.

You can use LeadHub forms instead of (or alongside) tools like Typeform or JotForm. They are simpler to set up because they live right inside LeadHub and connect directly to your pipelines.

---

Creating a Form

1. Go to Leads > Forms in the left sidebar.
2. Click New Form.
3. Fill in the Basic Details section:
   • Form Name — an internal name only your team sees, e.g. "Website Contact Form" or "Free Quote Request".
   • Slug — the short name used in the public URL. It is auto-filled from the form name. You can change it. Use lowercase letters and hyphens only, e.g. free-quote.
   • Display Title — the heading visitors see at the top of the form, e.g. "Get a Free Quote".
   • Description — optional. A short line of text shown below the title, e.g. "Fill out the form below and we'll be in touch within 24 hours."
   • Submit Button Label — what the submit button says. Default is "Submit". You can change it to "Get My Quote", "Contact Us", "Book a Call", etc.
   • Thank-You Message — the message shown to the visitor after they submit the form successfully. Example: "Thank you! We'll be in touch within 24 hours."
   • Redirect URL — optional. If you enter a URL here, the visitor is sent to that page after submitting instead of seeing the thank-you message. Useful for sending visitors to a dedicated thank-you page.
   • Multi-Step Form — toggle this on if you want to split the form into numbered steps (pages). Each field can be assigned a step number.
   • Active — toggle this on so the form accepts submissions.

Adding Fields

Scroll down to the Form Fields section. Click Add Field to add a new field. For each field, choose:

• Field Type — what kind of input it is:

Type	What it looks like
Short Text	A single-line text box
Long Text	A multi-line text box
Email	An email address field (validates format)
Phone	A phone number field
Number	A number-only input
Dropdown	A select dropdown with options you define
Checkbox	A single tick-box (yes/no)
Multi-Checkbox	Multiple tick-boxes where visitors can pick several options
Radio Buttons	Multiple options where only one can be selected
File Upload	Lets the visitor upload a file
Date Picker	A calendar date picker
Hidden Field	Not visible to visitors — used to pass a fixed value automatically
GDPR Consent	A consent checkbox for data protection compliance
Section Divider	A visual line that separates field groups

• Label — the question or label shown above the field, e.g. "Your Name" or "What service are you interested in?".
• Placeholder / Helper — optional grey hint text shown inside the field before the visitor types.
• Field Key — maps this field to a lead property. For standard fields, set this to first_name, last_name, email, phone, or company. For custom fields, use any key you like.
• Required — toggle on to make this field mandatory. Visitors cannot submit without filling it in.
• Step Number — if multi-step is enabled, assign each field to a step (1, 2, 3, etc.).

Drag fields up and down to reorder them.

The GDPR Consent field is a special locked field. Once added, it cannot be removed or edited because it is required for legal compliance in many countries.

---

Form Styling

Click the Appearance section (it is collapsed by default) to style the form:

• Background Color — the background color of the form. Click the color swatch to pick a color.
• Background Image URL — optionally enter the URL of an image to use as the form background.
• Google Font Name — enter the name of a Google Font to use for the form text, e.g. Inter or Roboto. Leave blank to use the default font.
• Logo URL — enter the URL of your logo image. It will appear at the top of the form.

---

Connecting to a Pipeline

Click the Pipeline Connection section (collapsed by default) to choose which pipeline and stage submissions should land in.

• Pipeline — choose which pipeline new leads from this form go into.
• Stage — choose which stage within that pipeline.

This lets you separate form submissions from other lead sources. For example, you might have a "Website Leads" pipeline with a "New Enquiry" stage, and all form submissions land there.

---

Spam Protection

Click the Spam Protection section to enable Google reCAPTCHA v3.

Toggle Enable reCAPTCHA v3 on and enter your:

• reCAPTCHA Site Key — from your Google reCAPTCHA account
• reCAPTCHA Secret Key — from your Google reCAPTCHA account

reCAPTCHA v3 runs silently in the background — visitors do not have to click any "I'm not a robot" box. It scores each submission and LeadHub rejects obvious bot traffic.

To get reCAPTCHA keys, visit google.com/recaptcha and register your site.

---

Embedding Forms on Your Website

After you create a form, you can put it on your website in three ways.

Option 1 — Direct Link (Public URL)

Every form has a public URL where it lives as a standalone page. The URL format is:

https://yourdomain.com/{your-account-slug}/forms/{form-slug}

You can share this link directly — post it in an email, a social media bio, or a WhatsApp message. Anyone who clicks the link sees the form on a clean, standalone page hosted by LeadHub.

To find the public URL: open the form in view mode and look for the Public URL field. Click the copy icon to copy it.

Option 2 — iframe Embed

Copy the iframe code and paste it into the HTML of any page on your website.

<iframe
  src="https://yourdomain.com/{account-slug}/forms/{form-slug}"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

The form appears embedded within your page. Visitors stay on your website and submit without being redirected anywhere.

Option 3 — JavaScript Snippet

The JavaScript snippet is the cleanest embed option. It loads the form dynamically. Copy the snippet from the form's view page and paste it into your website's HTML just before the closing </body> tag:

<script src="https://yourdomain.com/widget.js" data-form-id="YOUR_FORM_ID" defer></script>

Replace YOUR_FORM_ID with the actual form ID shown on the form's detail page.

---

Form Submission to Lead Creation Flow

Here is what happens when someone submits your form:

1. Visitor fills out the form and clicks Submit.
2. LeadHub validates the fields (checks required fields, email format, reCAPTCHA if enabled).
3. If validation passes, LeadHub creates a new lead record with all the submitted field values.
4. The lead is placed in the pipeline and stage configured for the form.
5. The lead's source is recorded as "LeadHub Web Form".
6. Any automations with the trigger "Form Submitted" or "New Lead Received" fire immediately.
7. The visitor sees your thank-you message (or is redirected to your redirect URL).

The entire process takes less than a second.

---

Form Analytics

Open any form in LeadHub to see its analytics:

• Views — how many times the form page was loaded
• Submissions — how many times the form was successfully submitted
• Conversion Rate — the percentage of views that resulted in a submission (Submissions / Views x 100)

This tells you how well your form is working. A low conversion rate might mean the form is too long, too complex, or asking for too much personal information.

---

Lead Capture Widget

The Lead Capture Widget is a floating button that sits in the corner of your website. When a visitor clicks it, a small pop-up contact form appears. It is not a full page — it is subtle, always visible, and does not interrupt the visitor's browsing.

This is different from an embedded form. The widget works as a "chat with us" or "contact us" button that floats on top of all your pages.

Creating a Widget

1. Go to Tools > Lead Widgets in the left sidebar.
2. Click New Lead Capture Widget.
3. Fill in:
   • Name — internal name, e.g. "Website Float Button".
   • Headline — the title shown at the top of the pop-up form, e.g. "Get in touch".
   • Subheadline — optional subtitle, e.g. "We reply within 2 hours".
   • Button Text — the text on the submit button, e.g. "Send Message".
   • Success Message — what the visitor sees after submitting, e.g. "Thank you! We'll be in touch shortly."

Customizing the Appearance

In the Appearance section:

• Primary Color — the color of the floating button and the form header.
• Text Color — the color of the text on the button and header.
• Position — where the floating button appears on the screen:
  • Bottom Right
  • Bottom Left
  • Top Right
  • Top Left

Choosing Which Fields to Show

In the Form Fields section, toggle which fields the widget form shows:

• Show phone field — adds a phone number input
• Require phone — makes phone mandatory
• Show company field — adds a company name input
• Show message field — adds a text area for a message
• Require message — makes the message mandatory

The widget always shows Name and Email fields. Name and Email are always required.

Connecting to a Pipeline

In the Lead Routing section, choose which pipeline and stage leads from this widget should land in.

Embedding the Widget on Your Website

After saving the widget, you will see an Embed Snippet on the widget's detail page. It looks like this:

<script src="https://yourdomain.com/widget/{widget-uuid}/loader.js" async></script>

Copy this snippet and paste it into your website's HTML just before the closing </body> tag on every page where you want the widget to appear. The floating button will appear immediately.

Each widget has its own unique UUID so you can have different widgets on different websites or pages.

Tracking

The widget tracks how many leads it has captured. Open the widget detail view to see the Leads Captured count.