Login
Home CMS Documentation Home CMS 10 Editing Basics Page Builder CMS 10.6 Page Builder CMS 10.6 Forms in Page Builder CMS 10.6 Setting Up Form Templates

CMS 10.6 Setting Up Form Templates

Prerequisites:
  • Administrators must complete prerequisites to enable user access to the Design tab.
  • Developers must create the appropriate Page Builder views before the content unit styling displays properly. See Page Builder Prerequisites for details.

With Page Builder's visual tools, build templates by dragging form content units into a layout. A common user scenario is to add content units to a page that already has editable fields.

Task 1: Select the Container, Create the Presentation, and Add the Layout

To set up a presentation and layout for the Page Builder form template:
  1. See Creating Presentations for details to choose a container within the page view and to create the presentation within that container.
  2. See CMS 10.6 Adding Row Layouts for details to add row layouts with columns to the presentation.

Task 2: Add the Visual Form Builder and Form Fields

To add a Visual Form Builder - Form component unit:
  1. Expand the Design accordion menu option, and select the Content section in the Design tab.
    Additional Information

    Content units come in two types: 1) field and 2) component. Field content units only represent a single field, whereas component content units represent a group of fields and components.

    Component units enforce the order and type of the contained content units. See CMS 10.6 Adding Content Unitsfor details.

    Content Units List

    A content units list displays.
  2. Press and drag the Visual Form Builder - Form component content unit from the Content section to the presentation canvas grid within the Design tab workspace.
    Note
    This Visual Form Builder - Form component content unit block will contain the rest of the form content units.
    Bars (blue) display to indicate where you can move the content unit in the canvas grid.
  3. Drag and hover the component unit over the appropriate bar in the canvas grid, and drop the unit when the bar displays the following text.
    Drop content unit here
    The Visual Form Builder - Form component content unit block displays in the presentation canvas grid.
  4. Complete the following substeps to add content.
    1. Select Add Content.

      Add Content

      The Add Content to Component dialog displays.

      See CMS 10.6 Add Tray Dialog for details about tools to search for and filter existing component items and component content units in the dialog.

    2. Choose the content to add, and select OK.
      A dialog displays, prompting you to provide a component name.
  5. Edit the form content by completing the following steps.
    1. Enter the Component Name for the content, and select Continue.
      The component name displays in the component content unit block header.
    2. Select Save in the Design tab toolbar to save your Page Builder changes before editing the content.
    3. Select the Edit in field icon Edit in Field Icon.

      The Edit this field In-Context dialog displays.

      Edit This Field In-Context

    4. Provide values for the following required field elements.
      Note
      See Completing Page and Component Elements for details about completing element fields.
      FieldDescription
      Form NameEnter the name of the form.
      Method drop-down listSelect the HTTP method (either GET or POST) by which the form submits data.
      Action URLEnter the URL of the page that processes form data. This is usually an internal page written in a server-side language like PHP or ASP.
    5. Optional: Provide values for advanced fields that suit your needs.
      FieldDescription
      Target drop-down listSelect the HTML attribute that determines where to display the form.
      AJAX Request checkboxSelect or clear the checkbox option. When selected, the form submits through AJAX. Because the page's URL doesn't change, the value of the target field has no effect.
      Hidden Fields component pickerUse the component picker to select Visual Form Builder - Form Field - Hidden component content units.
      Form ClassEnter a custom CSS class to add to the form.
      Form DescriptionEnter a short description about the form for internal use.
    6. Select Apply changes.
      The new content displays in the Page Builder presentation content unit block.
  6. Save Page Builder presentation changes by selecting Save in the Design tab toolbar.
    Warning
    Always save after making Page Builder presentation changes. Otherwise, the system will not preserve your new changes.

Next Steps: Add child layouts to build out the form.