Click the Apply Change button to see the results

Editing Global Form Properties

After you have added all of your form fields, you may want to make some global changes to the form using the Whole Form configuration n options.

The Whole Form menu fields are defined as follows:

 Name - The name of the form.

 Description - The description for the form.

 Progressive Profiling - If enabled, allows you to use forms in Marketo to gather information over time during repeat visits by a user. Since Marketo remembers when a visitor has completed a Marketo form, it will present only those fields the user did not fill out and the ones you specify you always want to show.

 Layout - Allows you to put the field labels above or left of the fields. The center option allows you to center the fields and the label on the form

 Label Width - Defines how wide a label can be for a field.

 Field Width (px) - Defines how how wide a field can be.

 Gutter Width (px) - Distance between the label and the field on the form.

 Show Reset Button - Adds or removes the Clear button from the form.

 Submit Button Label - Allows you to change the name of the Submit button on the form.

 Reset Button Label - Allows you to change the name of the Reset button on the form.

 Font Family - Sets font family for the labels on the form.

 Font Size - Sets font size for the labels on the form.

 Font Color - Sets font color for the labels on the form.

 Extra Line Space - Sets the line space between fields.

Caution: Make sure you click the Apply Change button to save and apply your changes.

MAKING A FIELD HIDDEN ON A FORM

Hidden form fields let you collect information in a form but keep it invisible from the submitter.

The hidden information can come from:

 set to default value

 passed from a URL parameter

 read from a cookie

This example uses the Lead Source field, which is a best practice to capture and is why it is used in this example; however, you can hide any field that you would like.

Adding a hidden field to a form

Create a new form or open an existing form for editing. Drag the Lead Source into the form (if it's not already in the form).

Click the Lead Source field in the form. Then go to the Form Properties menu on the right and scroll down to the Field Specific section.

Change the Input Type setting to "hidden." Click Apply changes change when you're done. The page will refresh.

After the page reloads, go back to the Field Specific section for the Lead Source field and click the Edit Settings... link under Field Value.

Now you need to tell Marketo what value to pass into that field:

 a default value,

 a URL parameter, or

 a cookie value

Set a hidden field to a default value

In the top field of the form, enter or use the pull-down to pick the Default Value for the field.

The Get Dynamic Value option should be set to Use Default Value by default.

Click Save when you're done.

The field in the form will update with the new default value.

Set a hidden field from a URL parameter

You can capture values passed as URL parameters to your landing page such as:

http://pages.yoursite.com/page.html?paramName=value

Set the Get Dynamic Value field to Get Value from URL Parameter. In the Parameter Name field, enter the name of the URL parameter to read -- just the parameter, no equals sign (=) or question mark (?).

Make sure to set a default value in the Default Value field. This value will be used if the URL parameter isn't found on the URL.

Click Save when you're done.

The field in the form will update to let you know that it's reading from an URL parameter.

Set a hidden field from a Cookie

You can also retrieve a value from a cookie and use that as your hidden form field value. A couple of caveats first:

 The cookie's domain must be ".yourdomain.com" and not on any subdomain (otherwise it cannot be read)

 The cookie must be set before the user hits the landing page. If you set or change the cookie after the landing page loads, you'll need to use JavaScript to set the form field value.

Change the Get Dynamic Value field to Get Value from Cookie. In the Parameter Name box, type the name of the cookie to read.

Make sure to set a default value in the Default Value field. This value will be used if the cookie isn't found.

Click Save when you're done.

The field in the form will show you what cookie value it's reading.

PROGRESSIVE PROFILING

Progressive profiling allows you ask new questions each time a lead fills out a form.

Best Practice: To increase conversions, keep your form lengths to a minimum. If a field is optional, leave it out or capture it with progressive profiling.

When you use progressive profiling, a lead may fill out a form like this:

Then at a later time on another landing page, he's presented a slightly different form:

In Marketo, the same form is being used on two landing pages. Some fields appear on every form, like his name and email address. Other form fields display only when they're blank so you can get new information on subsequent form completions.

This is the benefit of using Progressive Profiling -- you can get more information from your leads while keeping your forms short.

Building a progressive profiling form

Here's how to create your own progressive profiling form.

Go to the Design Studio and open a form for editing. You can create a new form or edit an existing one.

Drag in all the fields you want your leads to complete. Set the required flags as you see fit.

In Form Properties in the right column, click the link next to Progressive Profiling link --

"disabled..." by default

In the popup, set Progressive Profiling to enabled.

Next, pick the Always Show fields. (Skip the Blank Fields for now.) These fields will always appear in a form whether or not the lead has completed them.

Now set the Number of Blank Fields. This is the maximum number of additional blank fields that will be added to each form. For example, if you have 3 Always Show fields selected and 3 Blank Fields, a lead will see up to 6 fields on the form.

The actual number of fields a lead sees in a form depends on the number of remaining blank fields. If it's set to 3 but a lead has only 2 remaining, then only 2 Blank Fields will appear on the form. If all the Blank Fields are filled out, then only the Always Show fields will appear in the form.

Click Save when you're done.

Note: Required fields set to Always Show must always be filled out by a lead. All other required fields are only required when visible to a lead filling out the form.

Close the form.

Finally, publish a landing page with that form. If it's a new form, create a landing page with the form. If the form is already in use, re-approve the landing pages which use it.

Best Practice: When using a progressive profiling form on your landing page, remember that the form length will vary depending on the Number of Blank Fields. Make sure your landing page looks good with all form lengths.

ADDING A DATE PICKER TO A FORM

Follow these steps to add a graphical date picker to your form date fields. When you're done, it will look something like this:

First, you need a form with at least one date field. In the Form Editor, date fields appear with a date icon in the Template Form Fields list. Drag one into your form if you haven't already.

Next, edit a landing page that uses the form (or create a new one and add the form). Click the form and make sure the box around it has some padding, shown below. If the padding is too small, the calendar icon next to your date field will wrap onto the next line.

Now add this custom JavaScript to your webpage as a Custom HTML element:

Finally, preview your page and click the calendar icon next to the date field. The graphical calendar will appear below the field.

ADVANCED FORM FIELD OPTIONS Input Types

You can change the input type of your form fields in the Form Designer. Start by opening an existing form or creating a new form.

Click the form field you want to change. Open the Form Properties tab on the right and scroll down to the Field specific section. You'll notice an Input Type field; that's where you can change how the field displays.

The Input Type options are described below. Depending on the type of the field, not all Input Type options may be available:

Input Type When you want Sample

hidden hidden from

users

checkbox true/false Subscribe to our newsletter?

text small text Email:

textarea lots of text

Comments?

ADDING OR CHANGING VALUES IN SELECT BOXES AND RADIO BUTTONS

You can add or change the values displayed in a select box or set of radio buttons. These values will display in the form; when the form is submitted, the selected value will be put in that field.

If you want to map the display values to different submit values (for instance, display "$1 million" and submit "1000000"), see the next section.

First, select the field in your form and go to the Field settings on the right. Look for the Value list option in the Field specific section.

The values are separated by commas. To remove an option, delete the option. To add a row, add a comma and the option. For example, if you wanted to add "value 4" to this list:

value 1,value 2,value 3

You would put it right after "value 3" like so:

value 1,value 2,value 3,value 4

It should look like the image below when you're done. Click the Apply Change button to save the new values.

MAPPING SELECT BOXES AND VALUES

Let's say you want your Annual Revenue field to appear like this:

Annual revenue: Less than $1 million

However, the Annual Revenue field takes integers, not text. You need to tell Marketo how to map the pull-down options to numbers. If you don't, that field won't get saved.

In the Form Designer, select the field and go to the Value List in the Field specific settings.

Separate the display text from the submit value with "::" and separate each pair with a comma:

Text that should display::Value sent to Marketo,Next option::Next Value

For the example above, let's set Annual Revenue to 0 when it's less than $1mm, 1000000 for

$1-2mm, and so on. Set the Value List to this. Your change should take effect immediately:

Less than $1 million::0,$1-2 million::1000000,$2-5 million::2000000,more than $5 million::5000000

SELECT BOXES AND MULTIPLE VALUES

A select box is the only input that supports sending multiple values for a single field. You can change the single/multiple behavior with these two Field specific parameters:

 Allow multiple selections: toggle between single or multiple values for this field

 Visible lines: display this many rows in the field

Tip: If you want users to pick only one field, leave Allow multiple selections unchecked and Visible lines set to 1. If you want them to pick several, set Allow multiple selections to true and Visible lines to 5 or more. This allows the user to pick multiple selections from a pull-down menu.

DESIGN STUDIO: LANDING PAGES

CREATING LANDING PAGES Create a New Landing Page

From the Design Studio tab, click the Create New Landing Page button.

Enter the name of your landing page.

Select a template for your landing page.

Click Create.

About the Landing Page Editor

On the right tree of the landing page are drag and drop elements which you can use to add the following to the landing page:

 Rich Text - Add and format text for your landing page

 Images - Select images from your image library

 Forms - Add forms you created using the Design Studio

 Rectangle - Add a shape and color around your landing page

 Custom HTML - Add custom HTML to your landing page

Each of these drag and drop elements has its own property sheet, which allows you to manipulate the element.

The Actions button in the Landing Page Editor allows you to:

 Grab images from a web page

 Edit your landing pages meta tags

 Upload images you want to add to your image library to use on your landing page

We will show you how to add each of these components to a landing page.

ADDING RICH TEXT

Drag the Rich Text Element to the landing page canvas. A rich text editor dialog will appear.

Put any text you want in the box, then click Save. Your text will appear on the landing page.

UPLOADING AN IMAGE

Click the Actions button in the upper right of the editor and select Upload image file... in the menu.

In the dialog that appears, click Browse and pick an image on your computer.

Click the Upload button when you're done.

You'll see a confirmation dialog to let you know that the image has been added to your Marketo images database.

To add images to the landing page, drag the Image element into the page.

Select an image from your image database. Click Insert. The image will appear in the page.

Note: You can use the filter to quickly find an image if you know its name.

To resize the image or any other page element, click and drag the squares at the sides and corners of the element.

To move a page element, click in the middle of the image and drag it around.

If you want to delete the element, click the red X next to it.

If you want to grab images from your web page, see our article on uploading files and images.

ADDING A RECTANGLE SHAPE

To add a rectangle shape to the landing page, drag the rectangle to the landing page canvas.

Resize the rectangle by dragging the boxes on the top, bottom, sides, or corners.

You can change its color in the Property Sheet in the right column when it's selected.

ADDING FORMS TO THE LANDING PAGE

Drag the Forms Element to the landing page canvas.

In the dialog that appears, select the form you want to insert.

Also, pick the follow up page where users go after submitting the form. The pull-down has Marketo landing pages; to use a non-Marketo page, click the Use non-Marketo Landing Page link and type in the URL.

Click Insert when you're done.

Your form will appear on the page.

CHANGING THE FOLLOW UP PAGE FOR A LANDING PAGE FORM

Each form has the ability to take users to a follow up page when they are done completing the form. This follow up page can be another Marketo landing page or any other web page.

First, open the landing page in the Landing Page Editor. Drag a form onto the landing page if there isn't one already.

Click the form, then click the pencil and paper icon on the top right of the form.

In the dialog that appears, you can pick one of three options for the Follow up page:

 Pick a Marketo landing page in the pull-down

 Pick "Stay on this page" in the pull-down

 Click "Use non-Marketo landing page" to enter an arbitrary URL Click Save when you're done.

Best Practice: Follow up pages should have navigation to show customers more about your company and keep the ball rolling. They should also inform the leads if they will receive an email or other contact.

USING THE RICH TEXT EDITOR

The Rich Text Editor is what you use to edit text in an HTML Element of a Landing Page or in an editable DIV of an Email. Here's the skinny on how to use it.

Editing text

The text editor works just like your favorite word processor application. Select the text you want to format, and then click the toolbar button to change the text.

The formatting buttons are in the first two rows of the toolbar. If you don't know what a button does, hold the mouse over the button to view a description of the button's function.

When you're done making changes to the text, click OK at the bottom of the dialog.

Managing links

To add a link in your text, first highlight the text with your mouse. Then click the Insert/Edit Link button in the toolbar.

In the box that appears, enter the Link URL of the link. Click Insert when you're done.

The text will appear linked in the editor. If you want to edit the link, select the linked text and click the Insert/Edit Link button. To remove the link select the linked text and click the Unlink button.

Adding images

To add an image in the HTML editor, you need the image's URL. If you want to use an image that you've added to Marketo, select the image from the Images and Files section of the Design Studio and copy the URL to your clipboard.

In the Rich Text Editor, put the cursor where you want to add the image, then click the Insert/Edit Image button.

When the dialog appears, add the Image URL and an Image Description. Click Insert to add it to the page.

If you want to change how the image is laid out with the text, go to the Appearance tab and

In document Marketo Lead Management. User Guide Version 1.0 (Page 93-121)