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 Processing Form Data CMS 10.6 Processing Email Forms

CMS 10.6 Processing Email Forms by Example

Prerequisites:
  • Administrators must complete the prerequisites to enable user access to the Design tab. See Page Builder Prerequisites for details.
    Tip
    Users can alternatively configure forms outside of Page Builder. To build forms manually, users can access the pages that contain form builder components and then complete the necessary component element fields in the Edit tab. This alternative doesn't require administrators to complete the Page Builder prerequisites.
  • A working visual form with form fields must exist in the presentation. See CMS 10.6 Forms in Page Builder for details.
  • Administrators must configure SMTP for email. See Email Configuration for details.
  • A page must exist with a Page Builder template to contain the email form. See CMS 10.6 Setting Up Form Templates for details.
    • For demonstration purposes, name the page Email Form Example. This test email form contains only a text form field and a button form field. The form within the page will reference the Form Processor page.

    Simple Page Builder Email Form

  • If you plan to construct a production email form, then form field validation must be configured. See CMS 10.6 Validating User Input in Visual Form Builder for details.
    Note
    In this example, validation is not included. Only complete this step to suit your needs.
  • A page schema must exist, and this schema must contain a component element (this component element will reference the emailer component). See Creating Page Schemas for details to create the schema.
    • For demonstration purposes, name this page schema Feedback.

Users can create email form processing samples for test purposes.

For this demonstration of email form processing, the following three content containers will be created:

  • Per prerequisite, page containing our test email form named Email Form Example.
  • Page containing form processing page named Form Processor.
  • DEX - SMTP Emailer Component named Emailer.
To configure an example email form for processing:
  1. Navigate to Site > Site Tree.
  2. Complete the following steps to create the Form Processor page.
    1. Right-click an area in the Site Tree, and select New > Page. For this demonstration, make this page a child of Email Form Example.
      The Create New Page dialog displays.
    2. Provide the following values for the following fields.
      FieldValue
      NameLet's enter Form Processor for demonstration purposes.
      Select TypeSelect the Feedback schema option (per prerequisite).
    3. Select Create.
    The Form Processor page displays in the Site Tree.
  3. Check out the Email Form Example page in the Site Tree.
    Tip
    Per prerequisite, you created a form in a page named Email Form Example.
  4. Navigate to the Visual Form Builder - Form component field element view the Edit tab or Design tab, and complete the following nested field elements.
    1. Expand the Method drop-down field element, and select the get or post method list option to set the form HTTP method.
    2. Expand the Action URL text field element, and enter the file name of Form Processor in the field.
      Note
      The file name consists of the page ID and the .xml extension (e.g., x671.xml). Enter the ID and .xml extension for your Form Processor.

      Insert Processor file name in Action URL

  5. Save the Email Form Example page.
  6. Complete the following steps to create the Emailer component.
    1. Right-click an area in the Site Tree, and select New > Component.
      Tip
      Emailer can reside as a child of Form Processor in the Site Tree.
      The Create New Component dialog displays.
    2. Provide the following values for the following fields.
      FieldValue
      NameEnter Emailer as the name for demonstration purposes.
      Select TypeSelect the DEX - SMTP Emailer Component schema option.
    3. Select Create.
    The Emailer component displays in the Site Tree.
  7. Complete the following field elements in the Edit tab of the Emailer component.
    1. Expand the SMTP Server Host Name or IP Address text field element, and enter 127.0.0.1 as the value for this test example.
      Note
      We use 127.0.0.1, as we run a local SMTP test application later in this guide. See Testing Email Forms for details.
    2. Expand the Sender's Email Address text field element, and add a test email to serve as the sender's address.
    3. Expand the Receiver's Email Address text field element, and add a test email to serve as the receiver's address.
      Tip
      For multiple email addresses, separate them with semicolons.
    4. Expand the Subject and Body text field elements, and choose one of the following steps to complete the fields.
      • Add test text to the fields.
      • Depending on the example form's HTTP method, you can use syntax to insert values without manually typing them.

        Use the following syntax to pull and insert information as a value directly within the field.

        Important
        The following examples are case-sensitive.
        SyntaxDescriptionExample
        <QueryString>For GET, use this syntax to pull and insert a value from a CMS query string.<QueryString>FirstName</QueryString> <QueryString>LastName</QueryString> submitted the <QueryString>FormName</QueryString> form.
        <Form>For POST, use this syntax to pull and insert a value from the form.<Form>FirstName</Form><Form>LastName</Form> submitted the <Form>FormName</Form> form.
  8. Save the Emailer component.
  9. Check out the Form Processor page, and complete the following steps in the component field element that you added in the Feedback schema via Prerequisites.

    Select Component in Form Processor

    1. Click Select in the Component field.
      The Select a Component dialog displays.
    2. Search for the DEX - SMTP Emailer Component named Emailer via the Name field.

      Select a Component

    3. Select the appropriate component from the list, and select OK to save your component choice.
  10. Save the Form Processor page.

Next Steps: Test the email form to ensure the form processes properly.