Marketing Tools

Web Forms User Guide

TL;DR

Web Forms are a powerful tool for capturing prospect information directly from your website or marketing campaigns. When a visitor submits a form, ellocharlie automatically creates a lead record with all the information they provided — including field values, submission timestamp, and marketing attribution data from URL parameters like UTM codes.

Web Forms User Guide

Introduction

You can share forms as direct links, embed them on your website using an iframe, or inject them into a page using a JavaScript snippet. Forms are fully customizable, supporting multiple field types and flexible submission behaviors. Whether you're running a lead generation campaign or collecting customer feedback, Web Forms streamline the process of turning website visitors into tracked leads in your pipeline.

How to Set Up a Web Form

Step 1: Create and Name Your Form

  1. Navigate to the Web Forms section in ellocharlie.

  2. Click Create New Form or Add Form.

  3. Enter a Form Name — this is how you'll identify the form internally.

  4. Optionally, add a Description to document the form's purpose (e.g., "Summer sale lead capture").

  5. Decide whether to Show Form Title to Visitors — toggle this on if you want the form name displayed at the top of the form on your website.

Step 2: Add and Configure Fields

  1. Click Add Field to begin adding form fields.

  2. For each field, enter a Label (the text visitors see) and optionally a Placeholder (hint text inside the input).

  3. Select the Field Type:

    • Single Line Text — for short responses like names or email addresses

    • Multi-Line Text — for longer responses like messages or descriptions

    • Dropdown Select — for selecting one option from a predefined list

    • Checkbox — for yes/no or agreement confirmations

  4. Toggle Required on if the field must be filled before submission.

  5. Repeat for each field you need.

Step 3: Map Fields to Lead Properties

  1. For each field you've added, select which Lead Property it maps to.

  2. Standard lead properties include:

    • First Name

    • Last Name

    • Email

    • Phone

    • Company

  3. Custom lead properties — if you've created custom fields in ellocharlie (such as Industry, Budget Range, or Product Interest), you can map form fields to those as well.

  4. The mapping determines where submitted data is stored on the lead record. For example, if you have a form field labeled "Work Email," map it to the email property so the data goes to the right place.

Step 4: Configure Submission Behavior

  1. Decide what happens after a visitor submits the form — you have two options:

    • Thank-You Message: Display a custom message to the visitor (e.g., "Thanks for signing up! We'll be in touch soon.").

    • Redirect URL: Send the visitor to another page (e.g., your thank-you page, a resource download, or a product demo). All original URL parameters are automatically carried over to the redirect URL, so your analytics and ad pixels continue to work.

  2. Choose one option — you cannot use both a thank-you message and a redirect URL on the same form.

Step 5: Customize Styling

  1. Enter custom Submit Button Text (default is "Submit").

  2. Choose Button Colors — set the background color and text color using hex values.

  3. Optionally select a Google Font to customize the form's typography.

Step 6: Activate Your Form

  1. Toggle the form to Active when you're ready to start accepting submissions.

  2. Inactive forms will not record any data — this is useful if you want to test the form before going live.

  3. Once active, the form is ready to receive submissions.

How to Embed a Web Form

Web Forms can be shared and embedded in three ways:

Option 1: Direct Link

  1. Open your form in ellocharlie.

  2. Copy the form's direct URL: https://your-domain.com/embed/form/{form-id}

  3. Share this link in emails, social media, ads, or anywhere you want to drive traffic to the form.

  4. Visitors will see the form on a dedicated page.

Option 2: Embed via iframe

  1. Copy the form's direct URL (see Option 1 above).

  2. On your website, create an <iframe> element pointing to that URL:

    <iframe src="https://your-domain.com/embed/form/{form-id}" width="100%" height="600"></iframe>

  3. Adjust the width and height attributes to fit your page layout.

  4. The form will render inside the iframe on your page.

Option 3: JavaScript Embed (Recommended)

  1. Open your form in ellocharlie.

  2. Go to the Embed Code tab.

  3. Copy the JavaScript snippet provided.

  4. Paste the snippet into your website's HTML where you want the form to appear — typically just before the closing </body> tag or in the page section where you want the form.

  5. The JavaScript embed renders the form natively inside your webpage without iframe borders or scrolling issues, providing a seamless user experience.

Tracking Marketing Attribution with Embedded Forms

When you embed a form on a page with UTM parameters or other URL parameters, those parameters are automatically captured when the form is submitted:

  1. Build your campaign URLs with UTM parameters appended:

    https://your-domain.com/embed/form/abc123?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale

  2. When a visitor submits the form, all URL parameters are automatically captured and stored on the lead record.

  3. If you've configured a redirect URL, all original parameters are automatically appended to the redirect destination as well — ensuring your thank-you page, analytics tools, and ad conversion pixels receive the attribution data.

  4. You can capture any URL parameter, not just UTM codes — custom parameters like ?ref=partner123&campaign_id=456 are also stored and available in your submission records.

Viewing Web Form Submissions

Form Analytics Dashboard

Each form displays a quick overview of its performance:

  • Total Views — how many times the form has been loaded

  • Total Submissions — how many visitors have completed and submitted the form

  • Conversion Rate — the percentage of views that resulted in submissions

Submissions Table

  1. Open a form and navigate to the Submissions tab.

  2. View a complete list of all submissions with:

    • Visitor information (name, email, company, etc.)

    • Submission timestamp

    • Source/attribution data (UTM parameters and other URL parameters)

    • All custom field values

  3. Click on any submission to view the full lead record created from that submission.

Export Data to CSV

  1. In the Submissions table, click Export to CSV.

  2. The export includes:

    • All standard lead fields (First Name, Last Name, Email, Phone, Company)

    • All custom field values

    • UTM parameters as individual columns

    • A full parameter string column containing all URL query parameters captured at submission time

  3. Use the CSV for reporting, analysis, or import into external tools.

Web Form Workflows

Lead Creation from Form Submissions

When a visitor submits a form:

  1. ellocharlie automatically creates a new lead record.

  2. All mapped field values are populated on the lead.

  3. The submission timestamp is recorded.

  4. A complete JSON capture of all URL query parameters is stored on the lead record.

  5. The lead status is automatically set to "New".

  6. The lead appears in your leads list and is ready for follow-up.

Converting a Lead to a Deal

Once you've reviewed a lead and determined they're qualified, you can convert them into a deal:

  1. Open the lead record from your leads list.

  2. Select the option to Convert to Deal.

  3. ellocharlie will automatically:

    • Create an associated company record (if one doesn't already exist)

    • Create an associated contact record with the lead's information

    • Create a new deal in your sales pipeline

  4. All original form data and marketing attribution is preserved on the deal.

  5. The deal is now ready to move through your sales stages.

Using Automation with Web Forms

You can set up Automation Rules to automatically respond to form submissions and new leads:

  • Automatically assign new leads to a team member

  • Send a Slack notification when a form is submitted

  • Add tags or notes to leads based on submission data

  • Create projects or tasks for follow-up

  • Trigger other actions based on lead properties or submission source

Refer to the Automations documentation for detailed setup instructions.

Best Practices and Web Form FAQ

Best Practices

Include an Email Field Always include an email field mapped to the email property. This ensures lead deduplication works correctly — if the same person submits multiple forms, ellocharlie can recognize them as the same lead. Email is also essential for contact creation when you convert leads to deals.

Keep Forms Short Longer forms have lower conversion rates. Capture only the information you truly need. You can always ask for more details in follow-up conversations.

Use Clear Field Labels Write descriptive labels and helpful placeholder text so visitors understand what information you're asking for.

Test Before Going Live Before activating a form, test it thoroughly. Verify that:

  • All fields are capturing data correctly

  • Field mappings are correct

  • The thank-you message or redirect URL works as expected

  • The form displays properly on your website

Leverage UTM Parameters If you're running paid campaigns or multiple marketing channels, always append UTM parameters to your form URLs. This lets you track which campaigns and channels are driving the most valuable leads.

Monitor Form Performance Regularly check your form's analytics dashboard (Views, Submissions, Conversion Rate) to understand how well the form is performing. If conversion rates are low, consider simplifying the form or testing different messaging.

Frequently Asked Questions

Q: What happens when a visitor submits a form? A: A new lead record is created with all mapped field values, the submission timestamp, and a full JSON capture of all URL query parameters present at the time of submission. The lead status is set to "New."

Q: What happens to UTM parameters when I set a redirect URL? A: All query parameters from the original form URL are automatically appended to the redirect URL. For example, if the form was loaded with ?utm_source=google&gclid=xyz, those parameters will be passed along to your redirect destination, ensuring ad platforms and analytics tools can still read them.

Q: Can I capture data beyond UTM parameters? A: Yes. Any query parameter in the form URL is captured automatically — not just UTM params. Custom parameters like ?ref=partner123&campaign_id=456 are stored and available in submission records and CSV exports.

Q: What field types are available? A: Single Line Text, Multi-Line Text, Dropdown Select, and Checkbox. Each supports a label, required toggle, and placeholder text where applicable. File uploads, date pickers, and multi-select fields are not currently available.

Q: Can I map form fields to custom lead properties? A: Yes. In addition to standard fields (First Name, Last Name, Email, Phone, Company), you can map any form field to a custom lead property you've created — such as Industry, Budget Range, or Product Interest.

Q: Can I use both a thank-you message and a redirect URL on the same form? A: No. A redirect URL and a thank-you message are mutually exclusive — you can only use one per form. Choose the option that best fits your workflow.

Q: Do leads created from forms automatically move through my pipeline? A: No. Leads created from forms start with a status of "New" and do not automatically progress through the pipeline without manual action or automation. You can set up Automation Rules to automatically assign leads, send notifications, or take other actions when new leads are created.

Q: How do I know if my form is working? A: Check the form's analytics dashboard for Views, Submissions, and Conversion Rate. You can also view the full Submissions table to see individual responses and export data to CSV for deeper analysis.

Q: What happens if I deactivate a form? A: An inactive form will not record any data. This is useful if you want to pause a campaign or test changes before going live again. Simply toggle the form back to Active when you're ready to resume collecting submissions.

Q: Can I edit a form after it's been activated? A: Yes. You can edit form fields, styling, submission behavior, and other settings at any time. Changes take effect immediately for new submissions. Existing submissions and leads are not affected by changes to the form configuration.

Was this page helpful?