Content > Webforms

Creating a webform involves picking a type of webform, adding content (Form Pieces, HTML, or text) to the content blocks that make up the webform, and then adding additional styling to customize the look and feel of the webform. Each of these steps is described in detail below.

Webforms

Webforms provide you with a powerful way to sign-up new contacts, collect information from existing/future contacts, and allow your contacts to easily manage their preferences.

Webforms

Creating A Webform

Creating a webform involves picking a type of webform, adding layout blocks, and then adding content blocks. Each of these steps is described in detail below.

Choosing A Type Of Webform

The first thing you need to do when creating a webform is choose the type of webform you want to create.

To choose the type of webform:

  1. Go to Content->Webforms.
  2. Click the Create Webform on the top right of the page 
  3. Give the webform a name in the Webform Name text box.
  4. Give the webform a title in the Title text box.

Note - The Title (aka Window Title) text box is used to add the title that is displayed in the window when the webform is viewed publicly.

     5. Choose the type of webform you want to create from the Webform Type pull-down menu.  
     6. Click Next.


Leagacy Webforms

Choosing a Type of Webform

The first thing you need to do when creating a webform is choose the type of webform you want to create.

To choose the the type of webform:

  1. Go to Content->Webforms.
  2. Click the Create New Webform link on the top right of the page.
  3. Give the webform a name in the Webform Name text box.
  4. Choose the type of webform you want to create from the Webform Type pull-down.
  5. Click Create.


The All Webforms Page

The All Webforms page lets you view all of the webforms that have been created in your account.

There are seven different types of webforms. Each type of webform is displayed on the All Webforms page. If you want to view all of the webforms of a specific type, you can click the type of webform you want to view on the Filter Webforms By side bar.

 

What Is An Add Contacts Webform?

The Add Contacts webform allows you to collect email addresses and contact information from your website.


  Note - If a person who is on the suppression list attempts to sign-up to receive message from you via an Add Contacts webform or via direct add, they will not be added as a contact in your account and they will not be able to receive messages from you as long as they appear on the suppression list.

What Is A Subscription Confirmation Webform?

To comply with best practices, we recommend that your new contacts double opt-in (aka confirm their subscription twice) to receiving emails from you. As part of this process, new contacts will first ask to receive messages from you via an Add Contacts webform. They will then be sent an email containing a link that they can click to confirm their subscription and begin receiving emails from you. After they confirm their subscription, they will be shown the Subscription Confirmation webform. The Subscription Confirmation webform will also be sent if you choose to send an automatic confirmation message during the list import process. You can also add a link to this webform in your email by adding the %%!confirm_url%% special tag.

 

New contacts that receive the confirmation message, but DO NOT click the link to confirm their subscription will remain inactive contacts and be categorized as pending confirmation. These contacts will be suppressed from receiving mail from you until they activate their subscription by clicking the confirmation link.

Like other webforms, you have the ability to embed your logo, customize the CSS, add additional text, and more. New contacts that receive the message and click the link will become active contacts that can receive your messages from you in the future.

What Is A Manage Preferences Webform?

The Manage Preferences webform lets your contacts update their profile information and subscribe/unsubscribe from your lists on the same webform.


Like the other webforms, you have ability to embed your logo, customize the CSS, add additional text, and more. Unlike other webforms, the Manage Preferences webform allows you to choose lists and fields that you wish to make visible on the page. In doing so, you enable the contacts that visit the page to update their profile data and list preferences. Once you have customized the page, you can make it available to your contacts by adding a link to it in either the body of your message, or in the footer(s) of your message. To do this, add the "%%!manage_url%% special tag to the body or footer of your message. This will provide a personalized link to the Manage Preferences webform.

What Is A Unsubscribe Webform?

The Unsubscribe webform enables you to provide your contacts with a simple, direct mechanism to unsubscribe from your account. Unlike the Manage Preferences webform, the Unsubscribe webform does not include profile information. Instead, contacts can use this page to completely unsubscribe from your account and choose which lists they want to receive emails from.


Tip - We suggest that you consider providing both the Unsubscribe and Manage Preferences webforms in your messages. By offering both options, you clarify the purpose of each link and provide a more simple experience for the contact.

Like other webforms, you have the ability to embed your logo, customize the CSS, add additional text, and more. To add an Unsubscribe link to your message, you can add the %%!unsubscribe_url%% special tag to the body or footer of your message. This will provide a link to the Unsubscribe page. After clicking the link to unsubscribe, the contact must confirm their desire to unsubscribe. After the contact clicks to unsubscribe, they will land on a page that confirms their action and provides a mechanism to submit an unsolicited email complaint.

Some key things to remember regarding the Unsubscribe webform are:

  • The Manage Preferences webform contains a link to the Unsubscribe webform by default.
  • If you send a message that does not contain a Manage Preferences or Unsubscribe link, we will automatically append an Unsubscribe link in your message.
  • We strongly recommend that you use footers to take advantage of this functionality. Much like a signature in your personal email, you can customize your footer(s) with an Unsubscribe link and any other relevant information, such as your postal address. Once you've set up a footer, you can re-use it with numerous messages.

What Is A Forward To A Friend Webform?

The Forward to a Friend webform allows existing contacts to forward messages to their friends and associates via the application. Forward to a Friend is preferred to a simple forward through an email client because it allows the application to track who forwarded the message, who they forwarded it too, and help ensure consistent message formatting. The forwarded message includes a customizable note at the top in order to introduce the email to the recipient. We recommend adding a link to a sing-up page in the note to help acquire new contacts.



What Is A Thank You Webform?

Note - If the contact is asking to receive emails from you, then they will need to confirm their subscription via an email that will be sent to them after completing your Contact Add webform.

Note - If the contact is asking to receive emails from you, then they will need to confirm their subscription via an email that will be sent to them after completing your Contact Add webform.

What Is A Lookup Contact Webform?

The Lookup Contacts webform allows existing contacts to update their profile information via your website. After submitting their email address through a Lookup Contacts webform, the contact will receive an email with a link to their profile in the Manage Preference page.


Building a Webform (Legacy Webforms)

Once you have chosen the type of webform you want to create, you can begin building that webform by adding Form Pieces, HTML, or Text to the content blocks that make up the webform. Content blocks are the individual sections that comprise a webform. You can adjust the CSS and Layout used in the webform and individual content blocks. Depending on the type of webform you choose to create, certain content blocks will already be populated with Form Pieces, HTML, or text. If you want to add lists or fields to your webform, then you will need to use Form Pieces. Form Pieces are literally "pieces of a webform" containing lists and fields that are added to the content blocks used to build a webform. To begin editing a content block, click the Edit link in the top left corner of a content block.

Tip - You can use the handle handle to move content blocks to different locations on a webform.

Choosing A Layout For Your Webform (Legacy Webforms)

To choose a layout for your webform:

  1. Go to the Edit Webform page by editing an existing webform or by creating a new webform.
  2. On the Content Layout tab, choose the type of layout you want for your webform. You can chose between:
    • No Split Rows
    • 1 Split Row
    • 2 Split Rows
    • 3 Split Rows

Editing HTML Or Text On A Webform Using The WYSIWYG Editor (Legacy Webforms)

To edit HTML or text on a webform using the WYSIWYG editor:

  1. Click on the Edit link on a content block.
  2. A pop-up window will appear that contains the WYSIWYG editor.
  3. Use the WYSIWYG editor to add text, images, or links to the content block.
  4. Click Save Changes.
Tip - For more information on using the WYSIWYG editor, see the Creating Messages Using The WYSIWYG Editor help topic linked to at the bottom of this page.

Adding A Form Piece To A Webform (Legacy Webforms)

To add a Form Piece to a webform:

  1. Go to the Edit Webform page by editing an existing webform or by creating a new webform.
  2. Click the Edit link on a content block that does not already contain a Form Piece.
  3. Click the Form Piece check box in the pop-up window.
  4. Choose the Form Piece you want to add from the Choose Form Piece pull-down.
  5. If you want to make edits to the Form Piece you are going to add, click the Edit This Form Piece link.
  6. Click Save Changes.

Editing An Existing Form Piece On A Webform (Legacy Webforms)

To edit an existing Form Piece on a webform:

  1. Go to the Edit Webform page by editing an existing webform or by creating a new webform.
  2. Click the Edit link on a content block that already contains a Form Piece.
  3. A pop-up window will appear. The name of the Form Piece you selected will appear in the Choose Form Piece pull-down. Click the Edit This Form link to edit the Form Piece.
  4. You will be taken to the Edit Form Piece page for that Form Piece. From here, you can make changes to the Form Piece.
Tip - For more information on editing a Form Piece, see the Managing and Creating Form Pieces help topic linked to at the bottom of this page.

Customizing The Default CSS On A Webform (Legacy Webforms)

To customize the default CSS on a webform:

  1. Go to the Edit Webform page by editing an existing webform or by creating a new webform.
  2. Click the CSS Layout button to edit the existing CSS, or add your own CSS. The Style Properties and CSS pop-up window will appear.
  3. You can now change any of the default CSS properties, link to an external CSS file, or paste in your own CSS. Each of the default CSS parameters are described below:
    • Webform Name - You can use the Webform Name text box to change the name of the webform.
    • Background Image URL - In the Background Image URL text box, you can add a URL that points to the image you want to use as the background for your webform.
    • Image Repeat - The Image Repeat pull-down lets you choose if and how the background image will repeat.
    • Image Position - The Image Position pull-down lets you choose the position of the background image.
    • Background Color - The Background Color text box lets you pick the color of the background used in your webform.
    • Font Family - The Font Family pull-down lets you pick the font that will be used on the webform.
    • Text Align - The Text Align pull-down lets you set how the text will be aligned on the webform.
    • Top Padding - The Top Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the start of the webform and the edge of the browser window.
    • Bottom Padding - The Bottom Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the bottom of the webform and the edge of the browser window.
    • Right Padding - The Right Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the right side of the webform and the edge of the browser window.
    • Left Padding - The Left Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the left side of the webform and the edge of the browser window.
  4. Click Save Style Changes when you are done.

Adding Custom CSS to Your Webform (Legacy Webforms)

You can leverage CSS to customize the "look and feel" of your webforms to maintain consistency on your website. CSS can be some complicated stuff, beyond the purview of a simple help document. However, if you have experience with web design, you can customize the style of your webform by pasting CSS code into the CSS style box. If you are going to write your own CSS for a webform, then you will need to pay attention to the class attribute values displayed in the top right corner of each content block content block class attribute       value.

Tip - You can use custom CSS to override the default CSS settings for the whole page, or for specific content blocks. In the top right corner of each content block are class attribute values that you can use to style each content block used in a webform.

Customizing Webform Settings (Legacy Webforms)

Customizing the settings for a webform allows you to modify the internal notifications, page submission settings, associated welcome messages, and/or subscription confirmation messages belonging to the webform. The process for changing webform settings and each setting that you can change is described below.

To customize webform settings:

  1. Go to the Edit Webform page by editing an existing webform or by creating a new webform.
  2. Click the Form Setting button. The Form Settings pop-up window will appear.
  3. From here, you can change webform settings, internal notifications, page submissions settings, welcome messages, and subscription confirmation messages.
    • Webform Settings (All Webform types) - In the Form Settings section, you can choose to make the webform you are currently viewing the default for that particular type of webform. For example, if you are viewing a Manage Preferences webform, you can click this checkbox, and then that webform will become the default Manage Preferences webform. You can also choose to use legacy div IDs for CSS Compatibility.
    • Internal Notifications (Only available for Add Contacts, Manage Preferences, Unsubscribe, Forward to a Friend, and Lookup Contacts) - In the Internal Notifications section, you can choose to send an email to specified addresses when the webform is used. You can also choose to have the data collected from the webform included in the email. To specify email addresses to be notified when the webform is used, add the email addresses in the Notify these email addresses text box. Separate each email address by a comma.
    • Page Submissions Settings (Only available for Add Contacts, Manage Preferences, and Unsubscribe) - The Page Submission Settings let you adjust the responses that are displayed when a contact succeeds or fails to submit an Add Contacts, Unsubscribe, or Manage Preferences webform. The text that you enter in the box used for successfully submitted forms will be used to populate the locked content block on your default Thank-You webform. Your default Thank-You webform will automatically be displayed when an Add Contacts, Unsubscribe, or Manage Preferences webform is successfully submitted. You can also choose to direct them to a URL of your choosing when they submit the webform.
    • Welcome Messages and Subscription Confirmation (Only available for Add Contacts) - The Welcome Messages and Subscription Confirmation settings let you send a welcome message and/or display a subscription confirmation page when an Add-Contacts webform is successfully submitted. If you choose the Yes radio button, then a welcome message will be sent to contacts who successfully submit the Add-Contact webform. You will need to choose the welcome message you want to send from the pull-down box that appears, as well as specify a from name and address for the welcome message. If you choose the Yes, and require a subscription confirmation radio button, you will need to specify a welcome message to be sent. Additionally, your default Subscription Confirmation webform will be displayed when the Add Contacts webform is successfully submitted. If you click the No radio button, then no welcome message will be sent and your Subscription Confirmation webform will not be displayed.
    • Forward to a Friend Note (Only available for Forward to a Friend) - This setting allows you to include a note that is sent to the recipient when the Forward to a Friend webform is submitted. In this note, you can include the %%!from_name%% tag, which will add the name of the recipient to the note, and/or the %%!from_address%% tag, which will add the senders email address.
  4. Click Save Settings.

 

Was this documentation helpful?

Current rating: 3 (1 ratings)