Marketo Engage ranks among the top five marketing automation tools in the Lead Generation category, offering more than just that. Marketo Engage empowers marketing professionals to attract, segment, and nurture customers, tracking every step of the journey that led them there.

Integrating Marketo into your Drupal site, recognized as one of the most robust headless CMS in the industry, allows for a seamless integration of user experiences. This not only meets the expectations of each visitor and customer but also enhances the Developer Experience for your team and providers, ensuring maximum productivity and efficiency in your operations.

In this article, we'll explore how to integrate a Marketo Engage form into Drupal using React, one of the most popular modern frontend frameworks in 2024.

Why Use React To Integrate A Marketo Engage Form In Drupal

When using Marketo Engage, we have several options for form customization, such as rendering the form in a Twig template and using CSS to style it. But what if we want to employ a more modern frontend framework to add more complex behaviors and customizations?

In our particular case, we chose to use React for this purpose. The main reason is its popularity, which provides access to a wide range of libraries, and its compatibility with some frontend libraries we use to create headless sites. This means that this kind of implementation works well if you plan to gradually migrate your Drupal frontend to a headless one.

In this scenario, we have three key players: Drupal, React, and Marketo. How are we going to set these three up together?

To achieve this, we essentially need two things:

• First: Show a Marketo form using React.
• Second: Use that React code in Drupal.

Sounds pretty straightforward, right? Now, let’s dive into more specific steps.

How To Render a Marketo Engage Form Using React

The first thing we need to do is to render a Marketo Engage form using React, so we can customize it as we need. Doing this is relatively simple:

• We need to load the script that Marketo provides for us forms2.min.js
• We need to add a form element and use the Marketo form id as the ID field in the element<form id=”marketo_id”/>

This will load the script and render the form in the form element we declared, but in our case we want to customize the form. 

In our experience, creating a new form with our own elements is easier than trying to use those provided by Marketo Engage and overriding them. To achieve this, we'll hide the form that Marketo renders and render a new custom one:

We use the MktoForms2.loadForm function to wait for the Marketo form to load and then fetch the fields to create the custom ones in the new form:

Then we can render our form:

After mapping all of our fields, we need to handle the submit:

• First, we set the values from the original Marketo Engage form and save that in a constant to use some functions here: const mkt_form = form.setValues(data)
• Then we validate that the data is correct according to the original fields with mkt_form.validate() 
• If the fields are ok we can submit mkt_form.submit()

And, well, that was a super quick summary of how to render a Marketo Engage form in React, but after that, what do we do?

How To Render A React App in Drupal

Now that we have our form in React, we need to render it in Drupal. In other words, we should host the React code within Drupal and render the form, but how can we achieve this?

There are numerous ways to accomplish this. We opted to create a custom module that would contain the React code and provide a means to render it.

Here's what we need to do for it to work:

1. Create a custom module.
2. Host the React code in Drupal.
3. Render the form in Drupal.

Let's start by creating a custom module.

In this case, we only need the .info.yml and .libraries.yml files for the module.

We are going to build the React application inside the Drupal module and use that output as a library.

Let’s add that behavior in the .libraries.yml file:

Here, we are assuming that the output of the build is located inside our module at react/build/static/js/ and the entry point is the file app.bounde.js 

Now, let’s add the React code. We are adding a react directory for that, and the module structure looks something like this:

Now that we have our library declared, we can use it. Let’s render the form in Drupal. We are not going to get into too many details about the backend, but we have a paragraph that renders custom Twig templates. 

So, we are going to add this to one of those custom templates:

This will render an empty div that we are going to use to render our React app:

Need Help With Drupal Integrations?

This is a basic example of how to connect these three technologies together. Of course, a lot more code is involved, but these are the most relevant parts of the integration. 

Using Drupal provides the robustness of a well-established CMS and the freedom to use any popular frontend framework or library, in this case, React, which can help improve the Developer Experience (DX). Additionally, using technologies like React gives us the flexibility to move this functionality to a separate frontend headless site without any effort, thereby avoiding the need to create a custom module.

If you have any questions or need help with Drupal and headless integrations, feel free to reach out to us. We would be more than happy to assist with our over 10 years of expertise.

Also, learn more about the benefits of using Drupal as a headless CMS in our article here.