Sign Up Form Builder

• Updated: November 15, 2017
• Audience: WhatCounts' User
• Version: 1.02

Sign Up Forms are used to subscribe new email addresses to WhatCounts and collect any other user (demographic) data as a part of list subscription. They are valuable as they provide visitors to your website a way to stay engaged with your email program; additionally, it allows the marketer to collect contact information to make sure you are sending relevant and targeted messages. The following guide is designed to help you through the process of building and deploying sign up forms on your hosted webpages.

Here are a few things you should know:

• The Sign Up Form Builder will create a pop-up / lightbox on your website to capture new email addresses.
• You will need the ability to add snippets of HTML and/or JavaScript code to your self-hosted website.
• If you have Customer Key enabled in your realm, this feature is not available.

Task Roadmap

1. Preparing to use the Sign Up Form Builder
2. Accessing the Sign Up Form Wizard
3. Design the Sign Up Form Layout
4. Map The Form Fields to your WhatCounts Data Fields
5. Preview
6. Choose Deployment Options
7. Add Code to your self-hosted website 

Preparing To Use The Feature

• What list(s) will the new contact be added to?
• What contact data do we want to capture during sign up? If there are any segmentation rules you use frequently what data would help this contact receive targeted emails quickly?
  • Name (First/Last)
  • Location (City/Zip)
  • Custom Data Field

Before you begin, make sure you have at least one List created inside your WhatCounts account for the form to add new contacts to.

Terminology

Accessing the Sign Up Form Wizard

• Select Sign Up Form from the Contacts menu in the Navigation Bar
• Click the Add button in the upper-right corner to create a new sign up form.

Design the Form Layout

After submitting you'll be directed to a new form canvas. 

   Components:

There are many options for customizing and branding the elements of the sign up form, by default your new form will have fields for First Name, Email Address, and list selection if you are using a multi-list sign up form

   Style

Change the appearance of the sign up form by having full control over the font, and other style elements of the form

   Extra

Make changes to the sign up confirmation message and edit the Autoclose time (in seconds).

   Deploy

Control how the lightbox modal is launched from your page and Deploy.

  Edit Form Components

It is easy to edit and add additional elements to your sign up form using the components annotated above.

Let's walk through a few examples together:

• Add Your Logo
• Change Headline
• Add Additional Field

 Our first step will be adding a logo to the sign up form:

1. Drag The Logo Component from the menu on the left to the form canvas on the right
2. Edit the URL to point to the path of your image, this can be hosted on the Media Manager or on your website
3. Make any desired changes to size and alignment

Next, we will add a headline to the form to add context to the sign up process:

1. Click to edit the Headline Component on the form canvas
2. Change the text to your desired headline, and optionally change any formatting options

Third, we will add an additional field to capture the contact’s Zip Code:

1. Drag the Text Field Component from the menu to the form canvas
2. Make any edits to how the form is displayed and select the field to map the data entry field

We are not limited to freeform text entry boxes, let's look at how to add a dropdown menu to provide a contact with a set group of options to select from. In the example of Spirit Footwear, they allow for new email sign ups to specify if the prefer Tennis or Running shoes. This quick addition to the sign up form allows for sending targeted emails to the new contact earlier, and with minimal friction to the sign up process.

1. Drag the Dropdown Component from the menu to the form canvas
2. Map the dropdown field to the corresponding field in your account
3. Add or Edit the values selectable by the person filling out the form (in this example, Tennis and Running)

Optionally, we can add a hidden field to note these customers came from our web sign up form

1. Drag the Hidden Field Component from the menu to the form canvas
2. Map the form field to a custom field and define the associated value to be stored in the contact record.

With the form completed, you now have the ability to preview the lightbox modal, save your changes, and deploy the changes to the cloud so any updates are automatically reflected on any webpages where you placed the form code.

Adding Form Snippet To Your Webpage

From the Deploy Subheading, select if you want the form to deploy from a button press, or after a specified period of time visiting the page.

If launching from a button press you will need to provide the ID of the associated HTML element on your site.

If launching after a delay you will specify the delay (in seconds) before the form appears to the contact, the cookie expiration date allows you to define a period of time where the visitor will no longer see the form (in days)

After clicking Deploy, a snippet of HTML will appear. Copy and paste this text into the HTML of the page(s) you want the modal to appear.

Copy and Paste the provided snippet into the HTML of any page where you want the form to display. It is recommended to place the <script> tag after the </head> tag, and at the end of any already existing <script> tags that may appear in your HTML. If you have additional questions reach out to your Technical Account Manager and additionally any web teams available internal to your organization to assist with this process.