This section allows you to create and manage web forms that automatically generate leads in your CRM when visitors submit them on your website.
Main Interface Elements
| Element | Description |
|---|---|
| New Form button | Creates a new web-to-lead form. Click to open the form builder. |
| Search box | Filters the table by form name or ID. |
| Export button | Exports the current table data (CSV/Excel/PDF). |
| Reload button | Refreshes the table to show the latest data. |
| Entries per page | Choose 10/25/50/100 or show all (-1) records. |
Table Columns
| Column | Explanation |
|---|---|
| ID | Unique numeric identifier for each form. |
| Form Name | Name of the form (e.g., "Support"). Click to edit. Hover shows row options: View, Edit, Delete. |
| Total Submissions | Number of times this form has been submitted. |
| Created | Date and time the form was created (relative time like "5 hrs ago" or exact date). |
Row Options (under Form Name)
- View – Opens the live form URL (preview as a visitor).
- Edit – Opens the form builder to modify fields, settings, and thank-you messages.
- Delete – Permanently removes the form and its submission history.
Pagination Info
- Shows current range (e.g., "Showing 1 to 1 of 1 entries").
- Previous/Next buttons for navigating multiple pages.
Best Practices
- Use descriptive Form Names (e.g., "Support Request", "Quote Form").
- Test each form with View before publishing.
- Regularly check Total Submissions to track performance.
- Use Search to quickly find forms by name.
The Form Builder is the main interface for creating and editing web-to-lead forms. It is divided into three areas: Left Panel (Control Box) – draggable field types, Right Panel (Stage) – form preview and editing area, Bottom/Inside – field settings.
How to Add a New Field
- On the left panel (
cb-wrap), find the desired field type (e.g., Header, Paragraph, File Upload, Name, Email, Phone, Company, Address, etc.). - Drag and drop the field into the right panel (
stage-wrap). - The field appears in the form preview and can be configured.
How to Edit an Existing Field
- Click the pencil icon (
Edit) on the field in the right panel. - The field expands to show its settings (below the preview).
- Configure:
- Required – Make the field mandatory.
- Label – Field display name (editable inline).
- Help Text – Additional hint under the field.
- Placeholder – Example text inside the input.
- Class – CSS class (default:
form-control). - Name – Unique field identifier (used in submission data).
- Access – Restrict to specific user roles (e.g., Administrator).
- Type (for text fields) – text, password, email, color, tel.
- Max Length – Character limit.
- Rows (for textarea) – Height in rows.
- Click Close to collapse settings.
Field Actions (icons on each field)
| Icon | Action | Description |
|---|---|---|
| ✏️ (Pencil) | Edit | Opens field settings. |
| ???? (Copy) | Duplicate | Creates an exact copy of the field. |
| ????️ (Trash) | Delete | Removes the field from the form. |
Sorting & Rearranging
- Drag any field by its top bar (or the six-dots handle) to reorder vertically.
- Fields are automatically saved in the new order.
Left Panel – Available Field Types
| Field | Purpose |
|---|---|
| Header | Heading (h1, h2, h3) |
| Paragraph | Block of text |
| File Upload | Attachment upload |
| Name | Full name input |
| Position | Job title |
| Email Address | Email input (validation) |
| Phone | Phone number input |
| Lead Value | Numeric value of the lead |
| Company | Company name |
| Address | Street address |
| City | City name |
| State | State/Province |
| Country | Country name |
| Zip Code | Postal code |
| Description | Multi-line text (textarea) |
| Website | URL input |
Save the Form
- Click the Save button at the bottom of the left panel.
- The form template is stored and can be embedded on your website.
Best Practices
- Mark required fields with the Required checkbox.
- Use Placeholder text to guide users (e.g., "Enter your email").
- Test the form after saving using the View button in the forms list.
- Keep forms short – 4–6 fields max for better conversion.
- Use Header to explain the form’s purpose.
.png)
This section configures how your web-to-lead form behaves, looks, and communicates after submission. It contains four tabs.
Tab 1: General
| Field | Description |
|---|---|
| Form Name | Required. Internal name of the form (e.g., "Support"). |
| Language | Sets the language for validation messages (e.g., English, Ukrainian). |
| Lead title prefix | Optional text added before each lead name for easy recognition. |
| Source | Required. Where the lead comes from (e.g., Website, Google, Facebook). Click + to add a new source. |
| Status | Required. Initial status of the lead (e.g., Pending, In Progress, New). Click + to add a new status. |
| Responsible (Assignee) | Staff member who gets assigned to leads from this form. |
Tab 2: Branding
| Field | Description |
|---|---|
| Submit button text | Custom label on the submit button (e.g., "Send", "Request Quote"). |
| Submit button background color | Pick a color for the button background. |
| Submit button text color | Pick a color for the button text. |
Tab 3: Submission (What happens after submission)
| Option / Field | Description |
|---|---|
| Display thank you message | Shows a success message on the same page. |
| Redirect to another website | Sends the visitor to a different URL. |
| Message to show | Custom thank you text (required if using message mode). |
| Website URL | Redirect destination (required if using redirect). |
| Auto mark as public | Makes the lead visible to all staff by default. |
| Allow duplicate lead | Permits identical leads in the database. |
| Prevent duplicate on field | Choose 1 or 2 fields to block duplicates (e.g., Email). |
| Create task on duplicate | Converts duplicate submission into a task for the responsible staff. |
Tab 4: Notifications
| Option | Description |
|---|---|
| Notify when lead imported | Sends an alert after form submission. |
| Notify type | Who receives the notification: • Specific Staff Members – choose individuals. • Staff members with roles – choose roles (e.g., Employee). • Responsible person – only the assigned staff. |
| Staff Members to Notify | Visible when "Specific Staff Members" is selected. |
| Roles to Notify | Visible when "Staff members with roles" is selected. |
Save Button
- Click Save at the bottom right to apply all changes across all tabs.
Best Practices
- Always set a meaningful Form Name and Source.
- Use Lead title prefix to track which form generated the lead (e.g., "Support - ").
- Match button colors to your brand.
- Use Prevent duplicate on field (e.g., Email) to avoid spam.
- Notify the right people to ensure fast lead response.
After building your web-to-lead form, you will see the Integration Code section. This provides the HTML code to embed the form on your website.
What You Get
| Element | Description |
|---|---|
| iframe code | A ready-to-use HTML snippet to copy and paste into your website. |
| Direct link (styled) | A full-page version of the form with your branding styles applied. |
| Direct link with logo | Same as above, but also displays your company logo. |
Example iframe Code
<iframe width="600" height="850" src="https://confidencesystem.online/forms/wtl/8c018c20ce959b93db32c1a3c8c1abeb" frameborder="0" sandbox="allow-top-navigation allow-forms allow-scripts allow-same-origin allow-popups" allowfullscreen></iframe>
Parameters You Can Adjust
| Parameter | What to change | Example |
|---|---|---|
width | Form width in pixels | width="100%" or width="500" |
height | Form height in pixels | height="700" |
src | The form URL (do not change unless switching HTTP/HTTPS) | Keep as generated |
Important Protocol Rules
⚠️ Match your website protocol with the iframe source protocol
| Your Website Protocol | Use this in src |
|---|---|
http:// (non-SSL) | http:// version of the form URL |
https:// (SSL) | https:// version of the form URL |
Non-SSL installations must use the non-SSL link on landing pages and vice versa.
Direct Links for Testing & Sharing
| Link Type | Purpose |
|---|---|
?styled=1 | View the form with your branding (colors, fonts) on a full page |
?styled=1&with_logo=1 | Same as above, plus your company logo displayed |
Example:
https://confidencesystem.online/forms/wtl/8c018c20ce959b93db32c1a3c8c1abeb?styled=1
How to Embed on Your Website
- Copy the iframe code from the Integration Code section.
- Paste it into the HTML of your website page (where you want the form to appear).
- Adjust
widthandheightvalues to fit your page layout. - Check protocol – ensure iframe
srcuses the same protocol (http/https) as your website. - Save your webpage and test the form by submitting a sample entry.
Best Practices
- Use
width="100%"for responsive design (if your CMS supports it). - Set
heightslightly larger than the form to avoid scrollbars. - Always test the form after embedding.
- Keep the
sandboxattributes as shown – they maintain security while allowing the form to function. - Use the direct link to share the form via email or social media.
