Follow

Sign-Up Form Builder

  • Updated: June 30, 2017
  • Audience: WhatCounts' User
  • Version: 1.01

 

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 subscriber 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.

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 subscriber be added to?
  • What subscriber data do we want to capture during sign up? If there are any segmentation rules you use frequently what data would help this subscriber 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 subscribers to.

Terminology

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 Subscribers menu in the Navigation Bar
  • Click the Add button in the upper-right corner to create a new sign-up form.

Create_Form.gif 

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. 

form_builder.png  

   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

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 pre-filled data to follow the subscriber at sign up (i.e. Source to track how a subscriber opted in)
Hidden Captcha Prevent spambots from potentially adding erroneous addresses to your subscriber list(s)
Dropdown A dropdown selector allowing subscribers to choose a single item from a group

 

   Style

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

 

   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

Add_Logo.gif

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

Edit_Headline.gif

Third, we will add an additional field to capture the subscriber’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

Add_Zip.gif

 

We are not limited to freeform text-entry boxes, let's look at how to add a dropdown menu to provide a subscriber 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 subscriber 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)

Dropdown_mto.gif 

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 subscriber 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 Sub-Heading, 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 subscriber, 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.

Deploy_Form.gif

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

Comments

Powered by Zendesk