[Also applies to v8]{class="badge positive" title="Also applies to Campaign v8"}

Create a landing page creating-a-landing-page

About landing pages creation about-landing-pages-creation

This use case shows the use of the Digital Editor to create a Landing Page from the Adobe Campaign console.

Before you start configuring the Landing Page in Adobe Campaign, make sure you have one or more templates to represent the HTML page(s).

The main aim of this use case is to make the Landing Page form fields correspond with the internal fields in Adobe Campaign using the functions in the DCE.

Creating the landing page creating-the-landing-page

To create a new Landing Page type Web application, use the following steps:

  1. Go to the Campaigns tab and click the Web application link, then click the Create button.

  2. Select the New landing page template and enter a label, then click Save.

  3. Click the Edit tab.

  4. Delete the End activity.

  5. Add a Page activity after the Storage activity.

  6. Edit the Page 2 activity then uncheck the Activate outbound transitions option in the Properties tab.

  7. Save changes.

You will then get the following sequencing:

For more on creating a Web application, refer to this section.

Step 1 - Selecting and loading templates step-1---selecting-and-loading-templates

In this section, we are going to look at how to import HTML content for each page of the Web application.

A template must contain:

  • an HTML file (mandatory)
  • one or more CSS files (optional)
  • one or more images (optional)

To load the template on the first page, apply the following steps:

  1. Open the first Page activity of the Web application.

  2. Select From a file to fetch your content template.

  3. Select the HTML file to use.

  4. Click Open to start the import.

    During loading, the list of shared files is displayed. The import system checks that all files linked to the selected HTML are there (CSS, images, etc.).

    Click the Close button once the import has finished.

    note caution
    You must wait until you get the following message before closing: The external resources have been successfully published .
  5. Click the Properties tab.

  6. Enter a label for each page (for example: Page 1= Collect, Page 2=Thank you).

Apply these steps for each page inserted in the Web application.

The DCE executes the JavaScript code for the loaded HTML page. JavaScript errors in the HTML template which may appear in the Adobe Campaign interface. These errors are not related to the editor. To check that there are no errors in the imported files, it is recommended you test them in a web browser before importing the files into the DCE.

Step 2 - Configuring the content step-2---configuring-the-content

In this section, we are going to adjust imported content and link the fields of the database to the form of the web page. The Web application created previously is:

Modifying content modifying-content

Let’s start by changing the colors of the page. To do this:

  1. Open the Collection page.

  2. Click the background.

  3. Click Background color on the right-hand side.

  4. Select a new background color.

  5. Click OK to confirm the change.

  6. Apply these same processes to change the color of the button

Linking form fields linking-form-fields

We are going to link the fields in the page to those in the database, in order to save the information provided.

  1. Select a form field.

  2. Edit the Field section on right-hand side of the editor.

  3. Select the database field that you want to link to the selected field.

  4. Repeat this process for each field on the page.

You can make a field mandatory: for example, click the Email field then enable the Mandatory option.

This step is mandatory because it will allow the Web application to determine the sequence of the next steps: Saving the collected data in the database then displaying the next page (Thank you page).

  1. Select the Send it! button of the Collection page.

  2. Click the Action drop-down menu.

  3. Select the Next page action.

Inserting a personalization field inserting-a-personalization-field

This step lets you personalize the Thank you page. To do this:

  1. Open the Thank you page.

  2. Place the cursor in a text area, where you wish to insert the recipient’s first name.

  3. Select Personalization field in the Insert menu of the toolbar.

  4. Select the first name.

The personalization field has a yellow background in the editor.

Step 3 - Publishing content step-3---publishing-content

Content is published from the Web application dashboard. Click the Publish button to run it.

During publication, a log is displayed. The publishing system analyzes all the content found in the Web application

In the publication log, warnings and errors are sorted by activity.

The form is now available: its URL is accessible in the application dashboard and can be sent to recipients.