DocumentationJourney Optimizer B2BJourney Optimizer B2B Edition Documentation

[Beta]{class="badge informative" title="This feature is currently in a limited beta release"}

Form design

Last update: Tue Jun 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User

After you create a form, the visual design space opens a draft with a default basic form definition. In the Summary panel on the right, click Edit form and use the visual design space to define the form styling and field components.

Access the forms library {width="700" modal="regular"}

Fields

Form fields are used to capture person profile data that can be used to target people and associate them with accounts and buying groups. All new forms start with the following fields in a single column layout:

  • First name
  • Last name
  • Email address

Use the field design tools to construct the set of fields and layout that you need for gathering the data that you need for your account-based marketing activities.

Add a field add-field

  1. In the Components panel on the left, drag the Field content component and drop it onto the canvas.

    Add a field component to the form {width="700" modal="regular"}

  2. Click Select field attribute.

  3. In the Select field attribute dialog, select the checkbox for the person profile attribute that you want to use for the field and click Select.

    The XDM business schemas determine the available attributes. Any custom fields that are defined for your Journey Optimizer B2B Edition instance are also available. Use the Search text box to filter the list by name, or click the Filter icon to filter the list by schema/data type.

    Add a field component to the form {width="700" modal="regular"}

    On the canvas, the default field label for the selected attribute is populated on the canvas. The Field details are displayed in the panel on the right.

  4. If needed, change the Label text.

    This text is displayed next to the field in the form. The default text is populated from the field attribute.

  5. Set Field type according to the type of data for the field:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3
    Field type Usage Example
    Checkbox Use this type so that visitors can select a true (checked) or false (unchecked) value.
    Checkbox Group Use this type so that visitors can select a true (checked) or false (unchecked) value for multiple items.
    Currency Use this type to allow a float field that represents the default currency type selected for the Journey Optimizer B2B Edition instance.
    Date Use this type to restrict entry to a date format and provide a calendar selector in the field.
    Double
    Email Use this type to restrict entry to an email address format.
    Number Use this type to restrict the field to a numerical value.
    Radio Group Use this type to allow visitors to select one of a set of options.
    Select Use this type to allow visitors to select one of a set of options using a drop-down list.
    Slider Use this type to allow visitors to set a numeric value using a slider.
    Telephone Use this type for a telephone number entry field.
    Text Use this type for a standard text (string) entry field.
    Textarea Use this type to support longer text entry.
    URL Use this type to restrict text input to a URL, including the standard URL protocol.

  6. Depending on the selected field type, set the other options for the field entry and validation:

    Set options for the field according to the selected field type {width="400" modal="regular"}

    • Placeholder - The placeholder value for the field that gives the visitor an example of what is expected for the field.

    • Instructions - Instructive text that helps the visitor to complete the field. Enter the text that you want to display as hover text for the field.

      note tip
      TIP
      Instructions vs. placeholder text
      Use these two properties to guide visitors for filling out the field. Instruction text appears as a tool tip/popup text when hovering the pointer over the field. Placeholder text appears dimmed inside the field and disappears as the visitor engers their text into the field. You can use both methods, or just one.

    • Default value - Use this option to specify a default value for the field.

    • Validation message - Use this option to specify a validation message for the field. This message is displayed if the visitor enters an invalid value for the field. The Standard message is set by default. Choose Custom and enter your own message.

    • Max length - Enter the maximum number of characters that can be entered into the field.

  7. Set the Field behaviors as needed:

    • Required - Select the checkbox to make the field input required for submitting the form.

    • Enable input mask - Select the checkbox to restrict input from your visitor using an input mask. For example, you may want visitors to enter phone numbers in a specific format. In the dialog, enter the mask using 9 for any number, a for any letter, and * for either. Click Save to enable the specified input mask.

      Define an input mask for the field {width="500" modal="regular"}

Change field styling field-styling

Select the Styles tab in the right panel to change the styling for the selected field.

  • Background - Select the checkbox to apply a background color for the field. White is the default color. Click the Background color square to open the popup color picker and choose a color for the field background.

    Set the background styles for the form field {width="600" modal="regular"}

  • Label - The label styling controls the visual characteristics for the text displayed next to the field. Choose a top or a side label display relative to the field. You can set the font size, line height, text style, and text alignment. Click the Font color square to open the popup color picker and choose a color for the label text.

    Set the label styles for the form field {width="600" modal="regular"}

  • Border - Click the Border color square to open the popup color picker and choose a color for the border. You can define a border for the field, including the color and line width. Clear the checkbox to remove the displayed field border. You can also change the border size (pixel width), style, and radius setting for the corners.

    Set the border styles for the form field {width="600" modal="regular"}

  • Size - Select a size setting to determine the display width for the field. Choose Full width, Half width, or Auto.

  • Margin - Set margins (in pixels) around the field. You can set the same margin on all four sides, or select the Different margin for each side checkbox to set the horizontal and vertical margins separately.

  • Padding - Set padding (in pixels) around the field. You can set the same margin on all four sides, or select the Different padding for each side checkbox to set the horizontal and vertical margins separately.

    Set the size, margin, and padding styles for the form field {width="600" modal="regular"}

Reorder fields field-reorder

You can move form fields directly in the visual workspace. Click the Move tool on the right edge of the selected field and drag it to a new location.

Add structural components to the form and move fields into columns to group them and change the layout. Click the Move tool on the left edge of the selected column component and drag it to a new location within the form.

Move fields in the form and use structural components for grouping and layput {width="500"}

Delete or duplicate a field field-delete-duplicate

Click the Delete icon ( Delete icon ) in the toolbar or the right panel to delete a selected field. In the confirmation dialog, click Delete.

Click the Duplicate icon ( Duplicate icon ) in the toolbar or the right panel to duplicate a selected field. The new field is displayed just below the original field. Click Select field attribute to set the attribute for the field. Set the field type, details, and styles as needed.

Delete and duplicate icons for form fields {width="600" modal="regular"}

Submit button

The submit button (footer field) is part of the form by default and cannot be removed. Select the butto/footer component in the form to change the text and styling for the button.

Edit the button content button-content

Withe the Content tab displayed in the right panel, change the text in the Button text field. The button sizing adjusts to accommodate the length of the text.

Change the button text in the form {width="600" modal="regular"}

Style the submit button button-styles

Select the Styles tab in the right panel to change the styling for the selected button/footer component.

  • Background - Select the checkbox to apply a background color for the button. Blue is the default color. Click the Background color square to open the popup color picker and choose a color for the button background.

    Set the background styles for the form button {width="600" modal="regular"}

  • Label - The label styling controls the visual characteristics for the text inside the button. You can set the font size, line height, text style, and text alignment. Click the Font color square to open the popup color picker and choose a color for the label text.

  • Border - Click the Border color square to open the popup color picker and choose a color for the border. You can define a border for the button, including the color and line width. Clear the checkbox to remove the displayed button border. You can also change the border size (pixel width), style, and radius setting for rounded corners.

  • Size - Select a size setting to determine the display width for the button. Choose Full width, Half width, or Auto. The padding adjusts according to the size and alignment settings.

    Set the label, border, and size styles for the form button {width="600" modal="regular"}

  • Button Alignment - When you choose a Half width or Auto size for the button, set the alignment at left, right, or center. The padding adjusts according to the size and alignment settings.

  • Margin - Set margins (in pixels) around the field. You can set the same margin on all four sides, or select the Different margin for each side checkbox to set the horizontal and vertical margins separately.

  • Padding - Set padding (in pixels) around the field. You can set the same margin on all four sides, or select the Different padding for each side checkbox to set the horizontal and vertical margins separately. The padding adjusts if you change the size and alignment settings.

    Set the alignment, margin, and padding styles for the form button {width="600" modal="regular"}

Form styling form-styling

You can change styles for the form area when you click outside of the structural or form components. The form components (fields and button) inherit the Body styles defined the top-level styles, unless other styles are defined at the field or button/footer level.

Set the top-level styles for the form body {width="600" modal="regular"}

CSS styles

New forms use the default CSS for styling. If you want to change the styles by modifying the CSS, you can copy it and then use it to define a custom CSS for the form.

To define a custom CSS for the form:

  1. Click View CSS in the right panel to review the CSS code.

    Set the background colors for the form {width="450" modal="regular"}

  2. Select the CSS code in the scrolling window and copy it to your clipboard.

  3. Click Close.

  4. (Optional) Paste the copied code into your favorite CSS tool and edit the CSS to reflect the styling that you want.

  5. Click Add custom CSS in the right panel.

  6. Paste the CSS code into the window.

    Set the background colors for the form {width="450" modal="regular"}

    You can edit the pasted text in this window.

  7. Click Save.

Manual styling

Change the settings in the right panel to define the display for the whole form.

  • Background color - Select the checkbox to apply a background color around the form area. White is the default color. Click the color square to open the popup color picker and choose a color for the form background.

  • Viewport background - Select the checkbox to apply a background color to all form components. The default is no color (inherit from the outer background). Click the color square to open the popup color picker and choose a color for the form structural components.

    Set the background colors for the form {width="600" modal="regular"}

  • Text - Choose a Font family for the form, which affects the labels, hint, and placeholder text for form fields. It also affects the default submit button text.

  • Size - Change the size (width) for the form in pixels.

  • Margin - Set margins (in pixels) around the form components. You can set the same margin on all four sides, or select the Different margin for each side checkbox to set the horizontal and vertical margins separately.

    Set the text, size, and margins for the form {width="600" modal="regular"}

recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0