How to integrate Marketo with Webflow

Steps to integrate Marketo with Webflow

1. In Marketo, create a new form or choose an existing form that you want to integrate with Webflow.
2. In the form editor, click on the "Embed" tab and then click on the "Web Forms" sub-tab.
3. From the "Web Forms" sub-tab, select the "JavaScript" option and copy the provided code.
4. In Webflow, open the page where you want to add the form and click on the "Add" button.
5. From the "Add" menu, select the "Embed" option and then paste the code for the Marketo form into the provided field.
6. Adjust the settings for the form as needed and then click on the "Save" button to apply the changes.
7. Publish your Webflow website to make the form live on your website.

After following these steps, the Marketo form will be integrated with your Webflow website and available for visitors to use.

Why integrate Marketo with Webflow?

Marketo is a powerful marketing automation platform that allows businesses to streamline their marketing efforts and better target their audience. Webflow, on the other hand, is a website design and development platform that enables users to create stunning, responsive websites without the need for coding.

The integration of Marketo with Webflow can bring significant benefits to businesses. It allows them to combine the power of Marketo's marketing automation capabilities with the design and development capabilities of Webflow, resulting in more effective and efficient marketing campaigns.

One of the primary benefits of integrating Marketo with Webflow is the ability to create personalized, targeted landing pages. With Marketo, businesses can segment their audience based on various criteria such as demographics, behavior, and interests. This allows them to create custom landing pages that are tailored to the specific needs and interests of each segment.

For example, let's say a business is running a campaign to promote a new product. With the integration of Marketo and Webflow, they can create a landing page that is specifically designed for the segment of their audience who are interested in the product. The page can include personalized calls to action, product images, and relevant content that is tailored to the segment's interests. This can result in a higher conversion rate and better engagement with the audience.

Another benefit of integrating Marketo with Webflow is the ability to track and measure the performance of marketing campaigns. Marketo allows businesses to track the effectiveness of their campaigns in real-time, providing valuable insights into which tactics are working and which ones are not. This information can be used to optimize the campaigns and improve their performance.

Additionally, the integration of Marketo with Webflow enables businesses to automate their marketing efforts. Marketo allows users to set up automated campaigns and workflows that can be triggered by specific events or actions. For example, a business can set up an automated email campaign that is triggered when a visitor to their website fills out a form on a landing page. This can save a lot of time and effort and ensure that marketing campaigns are executed consistently and efficiently.

Overall, the integration of Marketo with Webflow offers numerous benefits to businesses. It allows them to create personalized, targeted landing pages, track and measure the performance of their campaigns, and automate their marketing efforts. By combining the power of these two platforms, businesses can improve the effectiveness and efficiency of their marketing campaigns.

Custom JavaScript functionality for Marketo forms inside Webflow

When integrating a Marketo form with Webflow, there are several customizations that you can make to the form submission process. Here are a few examples:

Custom confirmation message

You can customize the message that is displayed to users after they submit the form. This can be a simple message thanking them for their submission, or it can include additional information such as details on the next steps in the process or a confirmation of their submission.

To create a custom confirmation message for a successful Marketo form submission using JavaScript, you can use the following code:

 <script>
// Create a function to handle the form submission event
const handleFormSubmit = (event) => {
  // Check if the form submission was successful
  if (event.success) {
    // Get the element with the class "marketo_custom-confirmation"
    const confirmationElement = document.querySelector('.marketo_custom-confirmation');

    // Set the "display" style property to "block"
    confirmationElement.style.display = 'block';
  }
};

// Add an event listener for the "form submit success" event
MktoForms2.whenReady(form => {
  form.onSuccess(handleFormSubmit);
});
</script>

This code snippet defines a function named handleFormSubmit that is executed when a form submission event is successful. When the function is executed, it gets an element with the class marketo_custom-confirmation from the current document and sets the display style property of that element to block.

Additionally, the code sets up an event listener for the form submit success event, using the whenReady and onSuccess methods from the MktoForms2 object. When the event is triggered, the handleFormSubmit function is called.

Redirect to another page

Instead of displaying a confirmation message, you can also redirect users to another page on your website after they submit the form. This can be useful if you want to provide additional information or take users to a specific page on your site.

To redirect the user to a new page after a successful Marketo form submission using vanilla JavaScript, you can use the following code:

 <script>
// Define the URL of the page you want to redirect to
const redirectUrl = 'https://www.example.com';

// Create a function to handle the form submission event
const handleFormSubmit = (event) => {
  // Check if the form submission was successful
  if (event.success) {
    // Redirect the user to the specified URL
    window.location.href = redirectUrl;
  }
};

// Add an event listener for the "form submit success" event
MktoForms2.whenReady(form => {
  form.onSuccess(handleFormSubmit);
});
</script>

The code first defines a constant named redirectUrl that specifies the URL of the page that the user should be redirected to. It then defines the handleFormSubmit function, which is executed when a form submission event is successful. If the event is successful, the function sets the current page's location to the URL specified by the redirectUrl constant, effectively redirecting the user to a new page.

As before, the code also sets up an event listener for the form submit success event, using the whenReady and onSuccess methods from the MktoForms2 object. When the event is triggered, the handleFormSubmit function is called and the user is redirected to the specified URL.

Show form field if a special condition is met using JavaScript

Show a specific form field in a Marketo form only if a special condition is met using JavaScript.

 <script>
// Define the ID of the field that you want to show
const fieldId = 'id-of-field-to-show';

// Define the condition that must be met to show the field
const showFieldCondition = () => true; // Replace this with your own condition

// Create a function to handle the form rendering event
const handleFormRender = (form) => {
  // Check if the condition is met
  if (showFieldCondition()) {
    // Show the field
    form.getFormElem().find(`#${fieldId}`).show();
  }
};

// Add an event listener for the "form render" event
MktoForms2.whenReady(handleFormRender);
</script>

The code first defines two constants: fieldId and showFieldCondition. The fieldId constant specifies the ID of the field that should be shown when the condition is met. The showFieldCondition constant specifies the condition that must be met in order for the field to be shown. In the current code, the condition is simply set to true, but it could be replaced with any other expression that returns a Boolean value (i.e., true or false).

Next, the code defines the handleFormRender function, which is executed when a form is rendered. This function checks whether the showFieldCondition evaluates to true (i.e., whether the specified condition is met). If the condition is met, the function gets the form element from the current page and uses the find and show methods to show the field with the specified ID.

Finally, the code sets up an event listener for the form render event, using the whenReady method from the MktoForms2 object. When the event is triggered, the handleFormRender function is called and the specified field is shown (if the condition is met).

How to customize CSS of a Marketo form in Webflow

Custom CSS is needed to visually customize Marketo forms because the default styles provided by Marketo may not be suitable for every situation. Using custom CSS allows you to create a unique and consistent look and feel for your forms that matches the overall design of your website.

Custom CSS is an important tool for visually customizing Marketo forms in Webflow and creating forms that meet the specific needs and goals of your business.

Here is an example of a long CSS snippet that could be used to customize a Marketo form in Webflow:

 <style>
/* Form container */
.mktoForm {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Form heading */
.mktoForm .mktoFormTitle {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* Form description */
.mktoForm .mktoFormDesc {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

/* Form fields */
.mktoForm .mktoField {
  margin-bottom: 20px;
}

/* Form labels */
.mktoForm .mktoLabel {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

/* Form inputs */
.mktoForm .mktoFieldWrap input,
.mktoForm .mktoFieldWrap select,
.mktoForm .mktoFieldWrap textarea {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Form buttons */
.mktoForm .mktoButtonRow {
  text-align: right;
}

.mktoForm .mktoButton {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}
</style>

This CSS code customizes various aspects of the form, including the container, heading, description, fields, labels, inputs, and buttons. You should modify this code to suit your specific styling needs and preferences.

Conclusion

Integrating Marketo with Webflow can provide a seamless experience for both marketers and website visitors. With Marketo's powerful marketing automation capabilities and Webflow's user-friendly design platform, teams can easily create and publish personalized, engaging content on their website. This integration can help improve lead generation, conversion rates, and overall customer satisfaction. Overall, the integration of Marketo and Webflow can greatly benefit any business looking to enhance their digital marketing efforts.