Capture More Information from Qualified Leads

Converting a user from unknown to known is a key part of many marketing journeys. You can use Lytics web Experiences to capture user information. While email is a great starting point, you may want to collect a bit more information from your user when they subscribe to your brand.

In this guide, you will learn how to create a widget with a custom form component. The example will offer users to subscribe to an newsletter email, and will include an email input field as well as list of checkboxes that can be used to select which topics to subscribe to.

You can download the complete JavaScript configuration, CSS, and API override command for this example from the Github examples repository.

Currently in the Lytics UI, you may only choose to include the following fields in your capture leads form:

• Email (Email input)
• Name (Text input)
• Job Title (Text input)
• Company (Text input)
• Phone Number (Text input)
• Message (Text area)
• Country (Select box)

However, with the Pathfora SDK, or using API overrides, you can include any custom field of the following types:

• Text input
• Email input
• Text area
• Select box
• Checkboxes
• Radio buttons

JavaScript Configuration

Begin with a configuration for a form widget. Without defining any field customizations, Pathfora will default to using legacy form elements. However, you will be using custom form elements in this guide.

var customFormWidget = window.pathfora.Form({
  id: "custom-form-widget",
  layout: "slideout",
  position: "bottom-left",
  className: "custom-form-widget",
  headline: "Sign up for our Newsletter",
  okMessage: "Subscribe"
});

window.pathfora.initializeWidgets([customFormWidget]);

This config will generate a simple slideout with a form containing some default fields.

Once you have an idea of what form elements you want to include in your widget, you may use the form builder drag and drop UI provided in the Pathfora documentation to construct the form you wish to display. Each field can be marked as required and may have a label and name (used for as the primary key for tracking the field in Lytics and other external systems). Text fields may also include placeholder text, and for fields with multiple options you may define the display text and value of each option.

Once you click Save, the builder will output the formElements field that you can simply copy and paste into your widget config. This UI is intended to help you save time when constructing configurations with custom forms.

var customFormWidget = window.pathfora.Form({
  // widget configuration
  formElements: [
    {
      "type": "text",
      "required": true,
      "label": "Email Address",
      "name": "email"
    },
    {
      "type": "checkbox-group",
      "required": true,
      "label": "Which feeds would you like to subscribe to?",
      "name": "subscription_feeds",
      "values": [
        {
          "label": "Beauty & Perfumes",
          "value": "beauty"
        },
        {
          "label": "Electronics",
          "value": "electronics"
        },
        {
          "label": "Fashion",
          "value": "fashion"
        }
      ]
    }
  ]
});

Styling Tweaks

You may style the form using custom CSS. The example in this guide applies some small CSS changes to adjust the size and spacing of elements within the widget.

Remember you can download the code for this example to get the complete JavaScript, CSS, and API override. This can act as a starting point for your own custom form widget

Once you've tested and are happy with the look and feel of your form slideout, it's time for the most important step: defining the Lytics audience that should receive this experience.

Defining the Lytics Audience

The example widget in this guide will be targeted at an audience of anonymous users with a high intensity. Remember to update your config with the audience slug you wish to serve the widget to.

Alternatively, you may build your widget as a web personalize Experience with the Capture Leads tactic in the Lytics UI and apply the formElements setting with an API override.