Web Form Creation - SFMC

Web Form Creation - SFMC

User Guide

Guide developed for the Marketing Automation and Marketing Technology Teams

November 2017

Version 1.1

Contents Page

Section 1

Form Builder toolPage 3

Accessing the toolPage 3

Form request & creationPage 3

Building your formPage 4

• Visible fields values explainedPage 5
• Hidden fields values explainedPage 5

Saving formPage 6

Formatting codePage 7

Japanese Web FormsPage 8

Section 2

Sales Force Marking Cloud – HTML block creationPage 9

Saving HTML blockPage 10

Attributing Customer KeyPage 11

SFMC data extension Page 11

Adding new recordsPage 13

Get Rules PagePage 13

Create & Update RulesPage 13

DE Fields explainedPage 14

Section 3

Testing Web Form Page 17

Section 4

Troubleshooting formPage 18

Section 5

SFDC Lead test ManagementPage 19

Providing Customer Key to Web Ops Page 21

Section 6

Keeping track of our forms.Page 22

Web Form Master DocPage 22

Section 1

Accessing the Tool

The very first step in the form creation process is to outline the fields requested by using SFMC Form Builder. In order to access the tool please follow this link:

Form Request & Creation

In order to build the forms we need to follow the form requirements document, provided by the requestor (usually Demand Generation team). Below is an example of the required visible fields. Should the form be required to be created in another language, the requestor will provide the localized translations.

In the same document, you will find the hidden fields required.

The tool should have all the fields you need to create all forms. However, there could be times that you need to adapt an existing field in order to create a new field or even a duplicate of the same field.

By default, the tool will show on the left the most common visible and hidden fields we use in our forms, and these are:

1

Visible fields

First name

Last Name

Company name

Email

Work Phone

Country

Hidden fields

Email Permission Source

Enquiry Country

Keyword

Current URL

Referring URL

Campaign ID

Lead Source Details

Lead Source

Line of Business

Product Type

Solution Category

Solution Type

Return URL

1

Building your form

In case you do not need some of these fields, you can remove it by hovering your mouse around the (pencil) top right area of each field.

To build the form as desired, you can select and drag the fields on the right hand side of the screenshot below and drop in the form builder area (left hand-side). Alternatively, you can click on the field required and it will appear at the bottom of your form, you will then need to re-order accordingly as this will appear at the bottom of the form. There is a search functionality available, which makes it easier to find the required field.

Visible Fields values explained

Once inside the fields below are the values displayed and some of these values are editable.In addition, you will be able to define if a field should be mandatory/required.

Label:This is the visible fieldname displayed in the web form

Help Text: please ignore, do not edit

Type: what kind of values can be entered (Text, Number, Dates etc.)

SFDC Name: System field name (do not edit)

Class: CSS Class, do not edit if you’re not 100% certain

Name: Also classified as a system name(do not edit)

Value:The value showed in the code(do not edit)

Max Length:In case you want to determine a character(do not edit)

Hidden Fields values explained

In the hidden field area, there are a couple fields, which is mandatory to populate. These are the enquiry-hidden country, hidden Line of Business and hidden Campaign ID if applicable. In addition, to note, the contact me field should be visible in all forms unless the requestor asks to remove this.

Label: This is the label of your hidden field (no need to populate)

Help Text:same as the visible fields(do not edit

SFDC Name: This field is will be displayed in your code(do not edit)

Class: the attribute of your field, e.g. group, vertical, etc. (do not edit)

Value: Here is where you will allocate the value provided in the ERF. If not provided please leave this blank.

At the bottom of this area, you will be able to close and return to the form builder area.

Below are the options for the Lines of business available. Therefore, you do not have to type in a value. Please only select the ones available.

Once you have built the form as desired, please click on the save button below so you can copy the HTML block. Here you will have a graphical representation of how your form will display.You can always go back to edit the form in the browser.

In order to copy the HTML block from the tool, please click in the button as shown below.

Formatting the code

Now, open Dreamweaver or a similar HTML editor. The only thing we need here is to format the code. The reason behind this is just in case we need to go back to the code to make a change and it will be easier to navigate the code.

If you are using Dreamweaver, please go to the top menu EditCodeApply Source Formatting. This should make the code “cleaner” and easy to understand.

Japanese Web Forms

Japanese forms should follow the same process as explained above. The difference is the additionof a code snippet we need to include due to regulatory reasons and best practice.

Once you have conclude the form build using the tool, transfer your code into a HTML editor in order to include the disclaimer copy at the top of your form as well as the “double submit” script.

The disclaimer text provided by the requestor should be included at top of your form. Please use the comments field and add “readonly” as shown below:

After you add the code, your form will look something like the below picture.

At the bottom of your code you will have to include the script below so customers are able to review the values after submission and confirm.

%%=TreatAsContent(ContentBlockbyKey("jp-ify"))=%%

This will allow customer submitting Japanese forms the option to lock and review all values and confirm or cancel the form submission as shown below. The blue button below will confirm the submission and the pink button will cancel and take you back to the web form where you can edit the input values.

Section 2

Sales Force Marking Cloud – HTML block Creation

Following formatting the code, please login to SFMC under Promotional Business Unit. Now go on to Content Builder in the Navigation Bar andcreate a new folder under the line of business and country where the form should be. Attribute the name to the folder following the naming convention below.

WMJ Number – Country Code – Asset Type – Name – Additional Information (Optional)

For example

17-ECM-01234-US-Form-Ecommerce Study 2017 – Top Vendor

Please note, the form ID and Customer Key will follow the same format as above. This will be cover further down this document.

------

Once inside the folder, go on to create (top right hand-side)Content BlockHTML block.

Save the block with the correct CustomerKey first, then paste the block copied from the HTML software tool and paste in the content area (highlighted in red in the screenshot below).

Saving HTML block

Before you save the content, please attribute a name to the HTML content block (if possible, please follow the example below, NOTE: must be 32 characters or less, no blank spaces) you will need to share the block by clicking in the share button as shown below.

You will be taken to the window below, which you will need to tick Data-int and press next and the share. Now you can save the block.

Attributing Customer Key

Save the block, by giving the same name as the folder name, and attribute a customer key. Normally, this will be the WMJ ticket number.

Customer Key:17-ECM-01234-US

Note: The above key is one of the unique identifiers of your form, this is also what we will use to make the form live in the data extension and AEM pages. Therefore, it is crucial that we use a unique string.

SFMC Data Extension

Now that we have our content block,(web form) created in the Promotional environment. Next step is to create the Data Extension (DE) in the Pitney Bowes Environment.

If available, please log in to SFMC Pitney Bowes Environment using a different web browser, as it is not possible to be in two different Business Units using the same browser – if you normally use Chrome, you can open Mozilla Firefox, Safari, etc. to access SFMC.

In order to find the Data extension, please follow these steps:

Login to the Pitney Bowes Environment, please go to Audience builderContact builderData Extension.

In the left hand side of the screen you will find a set of folders, please go in to SharedItemsShared Data ExtensionForms. You will see Forms Configuration, Please click. In the list on the right hand-side Forms. Please click.

Adding new records

There will be a screen similar to the image below; here is where we will add and configure the form as per requirements. Go to records tab and press add record (highlighted).

Get Rules Page

Before we start adding the values in to our data extension, we will need to create the “Update Lead Rule” & “Create Lead Rule” string. In order to do so, you will need the form customer key, defined previously when creating the HTML block. Using the below URL you will add your form customer key to the end of the Get Rules URL, like the example below:

Please ensure you do NOT have any blank spaces either before or after your customer key, as this could prevent the form not to work. Now we will be able to see the form created. In order to create the string, please change the country field to Germany, and tick all radio buttons fields.

These will normally be the ‘Contact_me’ field and the Email permission field as it shown below. Once selected please submit the form – you can leave all other fields empty – Scroll to the button after submitting the form, and you will find the string need for our DE.

Create & Update Rules

Thislong string it is what the system will use in order to populate the fields in SFDC once someone submits the form. If for instance you do not have the First_Name in this string, this will not update/populate the lead or contact in Salesforce.com. Therefore, please ensure you have all the visible and hidden fields in this long string.

In the box highlighted above is your “Create and Update Lead Rules” string, please copy the string and go back to your Data Extension.

Data Extension fields explained

Back to our DE you will need to fill the fields with the relevant values, again please ensure you do not have blank spaces next to your values (before & after).

A brief explanation of the fields you need to populate in the DE:

IMPORTANT things to note:

If provided, please ensure your campaign ID is 18 digits long.

When typing the Form ID, the first value field, please make it the same value as your customer key, you will find this easier when searching for your form and DE at a later stage in case you need to go back.

The line of business available are:

Show marketing Alerts always set to False, unless you would want to show the alert date in SFDC, then set to True.

If the form is not supposed to sync in to SFDC, please set the Disable Direct Campaign Sync to True.

In order to a lead to sync with SFDC as status NEW, set the ContactMefield to TRUE.

Lastly, please ensure your form Customer Key is an exact match of your customer key in the HTML block.

Now that we specified the values you can click save (top right). The next step will be to test your form and check if the values submitted are appearing in SFDC.

Section 3

Testing Web Form

Now that we have built our DE and In order to test all functionalities of the web form, please use the below URL along with the customer key created.

To test your form you will have to populate the fields you want to test with dummy data, below you can find examples of these values:

It is important that you use a unique email address for every form. For instance, by adding the form customer key to your email address like the following example: Firstname.Lastname+.This will make it easier for you to find your test lead and convert it to ‘Not a Lead’ in SFDC.

In the Company Field,please always use PB Test, similar to the example on the image.

All other fields you can use test data, similar to the example shown (left).

You can now submit the form. After your form submission, there could be three scenarios.

Web Form goes through (Confirmation page is displayed) and all you will need to do is to go in to SFDC and check all the values in the test lead. We will cover this further.

The second possibility could be after the form submission it will land a 404 Error, nothing you need to as this means the confirmation page is not live yet.

The third common scenario is a 500 Error, there are a few things you need to check. Please refer to the next section on a few steps to troubleshoot the form.

Section 4

Troubleshooting form

Every so often, you will experience a 500 Error, below are a few steps and “tricks” to resolve this issue.

Most common fix is to check the long string ‘Create & Update Lead Rules’. Check if there are duplicates in the rules, undefined fields or missing fields and blank spaces. If there is a duplicated field please remove.

Sometimes you will eventually find an undefined field in your long string. One of the workarounds is to define the field by matching the field name to exactly what we have in SFDC (API name). However, before you do this we need to make sure if the field has been mapped.In order to check the API name of the SFDC fieldyou need to add the Salesforce API Fieldnamesextension to Google Chrome).