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.


Lightbox A modal or popup that is centered over the website while the background is greyed out. Has more options for inputs (checkboxes, etc).
Banner A form that fixed to the top or bottom of a website. Due to design constraints, Banner sign up forms allow for fewer input fields, and are limited to subscribing a user to a single list.
Hosted JavaScript generated for the sign up form will be hosted in the cloud (Amazon Web Services) Any changes made to the form through the WhatCounts tool will be automatically reflected on your website. This is the recommended option.
Self-Hosted JavaScript generated for the sign up form will be hosted on your website (helpful for customers who are unable to host the form in the cloud for security or compliance reasons). Any updates to the form will require updating associated forms and webpages on your hosted websites to reflect updates to the forms made in the WhatCounts Form Editor.
Component Any element of the Form, such as images, input fields, or displayed text.


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.


New Sign Up Form Name A name to help you identify this sign up form
New Sign Up Form Description A longer description for the sign up form
Form Type Lightbox (Single List or Multi-List), or Banner
Hosted or Self-Hosted Choose if this form will be cloud hosted or self-hosted


Design the Form Layout

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



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

Header/Title Enlarged, banner text to draw attention to the sign up form
Paragraph Larger text block for providing additional information about the sign up process
Image The ability to embed images hosted on WhatCounts or any HTTP-based URL
Text Field A text entry field to capture additional information
Radio Group Radio buttons allowing for a single item to be selected from a group
Data Checkbox Checkbox allowing customers to select multiple items from a group
Hidden Field A field that allows prefilled data to follow the contact at sign up (i.e. Source to track how a contact opted in)
Hidden Captcha Prevent spambots from potentially adding erroneous addresses to your contact list(s)
Dropdown A dropdown selector allowing contacts to choose a single item from a group



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

Font Font used for field headers
Text Color Change the color of the text used in the field headers
Form Background Color Change the background color of the lightbox
Form Animation Control the animation used to display the lightbox modal on your page
Border Color Change the color of the lightbox modal border
Border Width Change the width (in pixels) of the lightbox modal border
Border Radius Change the radius (in pixels) of the lightbox modal border



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



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.



Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk