Integrating Marketo with Elementor

Marketo admins are able to create sophisticated campaigns that can trigger emails, webhooks, and more – all when a certain event (such as someone filling out a form) occurs.

Whether or not you suspect that you may be bringing dystopian outcomes into our world from using it does not matter, your job is to integrate this product with a wordpress website using Elementor. 

Do what you are told or lose 2 weeks of nutrient cubes, developer!

Marketo Form Configuration

Marketo forms are built in the Marketo back end with a fairly simple WYSIWYG, and they supply an embed code snippet to add into any website. The form configuration options do allow for some styling, but generally you don’t want to have to maintain CSS in multiple places.

Styling the Marketo form with your website CSS is a pain – the embed code essentially downloads a Marketo stylesheet in which you would need to override almost every selector to get your own styles working. You can also use some javascript to remove that stylesheet, but that’s not a great option either.

All of this leads to another problem. What if you have a team of UX experts who are in charge of styling the forms? They do not have the wherewithal or time to deal with such things.

Use Elementor Forms

We have found that using Elementor Forms makes our UX experts happy. They do not have to worry about CSS knowledge or strategy; they simply drag and drop items onto the page and it looks good making it an ideal solution.

By creating an Elementor Form and submitting a hidden Marketo form in the background, you can control the high quality design and look of the form, while allowing your client to retain the ability to harness the power of Marketo. It’s a win-win.

Combining Elementor and Marketo Forms

In order to combine Elementor forms and Marketo forms, complete the following steps:

1. Create an Elementor form to display to users and accept user input
2. Hide a Marketo form on the same page
3. Copy the information from the Elementor form into the Marketo form
4. Submit the Marketo form in the background instead of the Elementor form

Prerequisites

• Set up your LP domain. The LP (landing page) domain is a custom URL you will be using that points to your Marketo files. This can be set up and configured in the Marketo administration area.
• Ensure you have your Marketo form ready to use, have the embed code available and the required form elements in place. All Marketo form fields map to an existing Marketo database field.
• Implement the formXDPath instructions. This will bypass some browser tracking security and ensures this method of submitting forms works correctly (especially for Firefox)
• Have your Munchkin ID available. Munchkin is the tracking feature that Marketo uses to follow users. This may be automatically set up by Marketo as this ID is included in your embed code. However, you may need to have the Munchkin script embedded on your site as well.

Hide the Marketo form in an HTML widget

1. Edit the WordPress page with the Elementor form and add an HTML widget which will contain your embed code plus the formXDPath option from the formXDPath instructions previously mentioned.
2. Insert the embed code and formXDPathoptions into the HTML widget, and use CSS to hide the Marketo form with  style=”display:none;”:

   

   This will create the Marketo form on the page but not display it.

   Now that you have a hidden Marketo form on the page, it’s time to set up your Elementor form – adding it to the same page as your hidden Marketo form.

   Set Up Your Elementor Form

   Your Elementor form fields must match the form fields in your Marketo form. Ensure you add each corresponding field with the same name / ID that the Marketo form uses. For instance, if your Marketo form has 3 fields (UserName, Password, Email) then make sure your Elementor form has those same fields with the same names. In addition, make sure the required fields have the required checkbox checked.

   Now that you have a hidden Marketo form and an Elementor form on the same page, the next step is to submit the Marketo form instead of the Elementor form.

   Submit the Marketo Form

   Elementor forms trigger an event when they are being submitted – the submit_success event.

    

   You’ll need to use javascript to listen for that event, and then take the information from the Elementor form and insert it into the Marketo form via hidden fields and then submit it.

   

    

   This script needs to be available on all pages where you intend to submit Marketo forms.

   This script handles the following:

   • Finds an Elementor form being submitted
   • Copies all the form fields from the Elementor form into the Marketo form as hidden fields
   • Submits the Marketo form

    

   If you have a redirect set in the Marketo form it will work if the form is submitted successfully.

   Final Thoughts

   The advantages of integrating Marketo and Elementor make it a worthwhile endeavor. Designers appreciate the UX and marketers appreciate the tracking abilities. That said, as a final step, to ensure Marketo is tracking the form submissions and user actions, look into the smart campaign associated with the form. If you have everything set up correctly and your forms are being submitted, you’ll be able to view the results and confirm that the integration was a success.