- 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.
- If you have Customer Key enabled in your realm, this feature is not available.
- Preparing to use the Sign Up Form Builder
- Accessing the Sign Up Form Wizard
- Design the Sign Up Form Layout
- Map The Form Fields to your WhatCounts Data Fields
- Choose Deployment Options
- 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.|
|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:
- Drag The Logo Component from the menu on the left to the form canvas on the right
- Edit the URL to point to the path of your image, this can be hosted on the Media Manager or on your website
- 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:
- Click to edit the Headline Component on the form canvas
- 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:
- Drag the Text Field Component from the menu to the form canvas
- 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.
- Drag the Dropdown Component from the menu to the form canvas
- Map the dropdown field to the corresponding field in your account
- 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
- Drag the Hidden Field Component from the menu to the form canvas
- 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.