[Form] Marketo Embed

[klcodanr]

Feature Request

Is your feature request related to a problem? Please describe. It would be a nice feature to be able to easily embed Marketo forms into AEM pages.

Describe the solution you'd like The solution would leverage the Marketo Forms JavaScript API to embed forms. Ideally, it would not require the author to use JavaScript directly, but instead, allow the user to select from a list of forms. Additional helpful hooks include the ability to set field values, add hidden fields and provide custom JS code.

Are there alternatives? Using the HTML block in the embed component. Creating a separate Marketo Forms Component.

Documentation

Purpose

Easily add Marketo forms into Adobe Experience Manager pages.

Setup

Configure the AEM Marketo Form feature via a Cloud Service Configuration.

1. Navigate to Tools > Cloud Services and Select Marketo
2. Add a new cloud service configuration or click on an existing one to open the configuration editor screen . Ensure the cloud configuration is created in your site's Conf root
3. Fill out and save the cloud configuration with the account details, including:
   • REST Endpoint Host - found in Marketo under Admin >> Integration >> Web Services, do not include the protocol (e.g. https) or the path e.g. (/rest)
   • Marketo Server Instance - The URL you use to access Marketo, starting with // and without a path
   • Munchkin Account ID - Found in Marketo under Admin >> Integration >> Munchkin, three sets of characters separated by dashes
   • Client ID - Found in Marketo under Admin >> Integration >> LaunchPoint, a UUID
   • Client Secret - Found in Marketo under Admin >> Integration >> LaunchPoint, another UUID
4. Enable the Marketo Form embed as an embeddable

Using the Component

Once the component is available for use, simply add an embed to the page, select the "Marketo" option and configure the component to your needs.

See the Marketo JavaScript Forms API for more details on how to configure the Marketo Forms component.

There are three tabs of configuration for the Marketo Form component:

General

The general tab has the most basic settings.

• Form - this is the only required field and allows you to select the form to show from a filterable list of Forms
• Success URL - a URL or path within AEM to redirect the user to upon Success

Values

Allows for setting the form values dynamically

• Set Value - set the value of an existing field on the form

• Add Hidden Fields - add a new hidden to the field to the form

  Each field is configured with:

• Field Name - select from the list of valid field names, note that not all fields may be available in the form

• Value Source - one of:

  • Static - the value you enter in the value field below
  • ContextHub - load the value from the AEM ContextHub
  • JavaScript Variable - load the value from any valid JavaScript expression
  • Request Parameter - load the value from a request parameter / query string

• Value - usage depends on the selection of Value Source. For Static this should be the value of the field. For ContextHub, this should be the item path, ex: profile/familyName. For JavaScript Variable, this would be a valid JavaScript expression. For Request Parameter, this would be the name of the request parameter to use.

Advanced

Allows you to write custom JavaScript to configure the form behavior, will have access to a variable 'form'

[msagolj]

See comment in PR #809 :

@klcodanr this pull request includes the same files/depends on PR #807 (New Feature: Cloud Config Template / Framework) which was closed as its outside of the scope of this project. So i will close this one as well.

Your proposed PR's look like a proper Marketo Integration into AEM, which happens to have a dependency to core components because its using its embed component feature.

To me this merits to be either:

1. added as a product feature to AEM or
2. should be provided as a separate open source project that customers can download an install to set up a Marketo integration.

[gabrielwalt]

Hi @klcodanr, I'm reopening this as we are planning to create a contrib repository for such contributions to the Core Components. We still need to define how that will work exactly, stay tuned.

[vladbailescu]

This was merged in https://github.com/Adobe-Consulting-Services/acs-aem-commons/pull/2064