The Marketo Forms extension lets you fetch and display the list of your existing Marketo forms into the field of your content type. As a result, while creating entries, the content managers can view the list of forms, and select the one that they want to use on the landing page. In the Contentstack backend, it saves the ID and the metadata (in JSON format) of the Marketo form that you select.
This step-by-step guide explains how to create a Marketo Forms extension in Contentstack. The steps to be performed are as follows:
- Get your Marketo account details
- Deploy Lambda function
- Add the ‘Marketo Forms’ custom field extension to your stack
- Use your custom field
Step 1 - Get your Marketo account details
In order to set up this extension, you will need the following three pieces of information from your Marketo account:
- Munchkin Account ID
- Client ID
- Client Secret
To retrieve these details, log in with the Admin Marketo account, and follow the steps outlined below.
Retrieve Munchkin Account ID
To get your Munchkin Account ID, perform the steps given below:
- Log in to your Admin Marketo account, and click Admin in the top right corner.
- On the left-hand side navigation, under Integration, click Munchkin. A page opens, where you will find the Munchkin ID.
Retrieve Client ID and Client Secret
To get your Client ID and Client Secret, perform the steps given below.
Step 1: Create a role that has full API access
- Click Admin in the top right corner.
- On the left-hand side navigation panel, under Security, click on Users & Roles. Click on the Roles tab. On the page that opens, and click New Role.
- Enter the Role Name (e.g., API-only User) and Description (optional). Expand the Access API options in Permissions, and select Read-Only Assets.
- Click Create.
You will now need to create a user to whom you can assign this role.
Step 2: Add an API-only user
- Click the Users tab and click Invite New User.
- Fill out the necessary information such as Email, First Name, and Last Name under Step 1: Info. Click NEXT.
- In Step 2: Permissions, check the newly created role under Roles and check the API Only checkbox.
- Click NEXT and Send.
Now, you need to create a service and assign the user to retrieve the Client ID and Client Secret.
Step 3: Create a service in Marketo
- In the left-hand side navigation panel, under Integration, click LaunchPoint. On the page that opens, click New and then New Service from the drop-down.
- In the New Service window, enter a Display Name. Under Service, select Custom. Enter a Description and select the API Only User that you invited. This user will have full API access:
- Once you have created the new service, click View Details to obtain the Client ID and Client Secret.
By the end of this step, you will have the Munchkin ID, Client ID, and Client Secret of your Marketo account.
Step 2 - Deploy Lambda function
To protect sensitive information (such as Marketo Client ID and Client Secret) and to avoid Cross-Origin Resource Sharing (CORS) issues, you can use Lambda function for this extension.
After retrieving the credentials, deploy this code for the lambda function to AWS Lambda.
In the Environment Variables section of AWS Lambda, enter the credentials against the variables as follows:
MUNCHKIN_ID= Your Munchkin Account ID
CLIENT_SECRET= Client Secret that you retrieved
CLIENT_ID= Client ID that you retrieved
Note: Please ensure that the keys i.e., the Environment variables (in upper case) are added exactly as shown above, else your lambda function will not work.
Step 3 - Add the ‘Marketo Forms’ custom field extension to your stack
- Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
- Select Custom Field.
- On the configuration page, enter details in the fields as given below:
- Title - Provide a suitable title. For example, Forms.
- Field data type - Select the data type in which the input data of the field should be saved in Contentstack. Select JSON in this case.
- Multiple: Select this checkbox if you want to enable multiple inputs for the field.
- Hosting method - Select Hosted By Contentstack. As soon as you do this, you will see the Extension Source Code field below.
- Extension source code - Enter the source code for the extension. You can find the source code for the Marketo Forms extension here.
- Config Parameter - Enter the configuration details for the extension. Here, you need to mention the ID of the folder of which you want to fetch the forms (in the ‘folder’ parameter), and the AWS API gateway URL for the lambda function (in the ‘url’ parameter). The ‘folder’ parameter is optional, but the ‘url’ parameter is mandatory.
Note: You can provide different configuration settings for specific instances of your Custom Field Extension when setting up your content type. The configuration that you provide for an instance will only be applicable for that instance and will not affect any other instances of the same custom field extension or any other fields within the same content type. Learn more.
- Click on Save. This creates your custom field.
Now, let’s understand how you can start using this custom field in your content type.
Step 4 - Use your custom field
To use your custom field, you need to follow the steps given below:
- Create a content type by clicking on the + New Content Type. Enter the relevant details for the content type and click on Create and Add fields.
This leads you to the Content Type Builder page where you can add the relevant fields.
- Add the Custom field in your content type.
- Select Marketo Forms from the dropdown and set the other properties of your custom field.
Note: You can provide specific instance-level configuration settings for your Custom Field extension. Learn more.
- After adding other relevant fields in your Content Type, click on Save and Close.
This will create your content type. Now, go to the content type and create a new entry. Enter the relevant details. In the Marketo Forms field, select the Contact Us extension while creating an entry for this content type as shown below: