This is a quick introduction to embedding Marketo Forms in your website. We also cover a couple of gotchas that you will be glad to know.

Creating a Form in Marketo

Navigate to the Marketo Design studio and click on New → New Form

On the form properties, you can create the form along with all the relevant fields and associated validations.

 

 

Applying Default Styling

In the Form Settings tab,  you can apply a theme to your form. By default, seven themes are provided and you can select from among them.



Applying Custom Styling

Typically though you will want to customize the forms to your brand look-feel. To do this, click on the “Edit Custom Css” option and put in your custom CSS.



Embedding the form in your site

Finally, we are ready to embed the form in your site. You can generate an embed code by clicking on  Form Actions → Embed code.



You can now copy/paste this code into your CMS template file or type it into your content editor.


Testing Submissions

Now that the forms are showing up on your site, you can test them with some dummy submissions and observe them showing up in the Marketo database.


Sending Form Submissions to Google Analytics

One final step. It is quite common to want to track form submissions as critical events in Google Analytics. To do this, you can embed the following code into the page. The line in bold is the one that posts to Google Analytics.

<script src="//app-ab32.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1033"></form>

<script>MktoForms2.loadForm("//app-ab32.marketo.com", "765-TZP-943", 1033);</script>

A Few Tips

It is best to avoid multiple Marketo forms on the same page. This causes confusion when tracking submissions.

We have shown you how to apply custom styling at a form level.  If you are looking for more centralized control, then you can apply the base styling in the main mkto-form.css present in the images and files folder and extend this css at the form level.  Creating entirely custom css at the form level is not recommended.

Get in Touch

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Related Articles

Drupal 7 to 8 Migration

Drupal 7 vs. Drupal 8 : What difference does it make?

Drupal 8 has been an architectural sea-change from Drupal 7 and had been five years in the making. Comparatively, Drupal 9 is a much more incremental change over Drupal 8. In this article, we explore the question “What difference does it make to a project manager, if the site is built in Drupal 7 vs. Drupal 8?”

Read More »

Yoast vs. Rank Math : SEO comparison

SEO is essential for attracting customers to your website. Although good content is fundamental to this, there are several technical optimizations to your website that will go a long way to improving your SEO scores. If you run your site on WordPress, it is quite important to use good plugins to assist with your SEO. In this post, we explore Rank Math — a newcomer to the WordPress SEO world and also contrast it with Yoast, a leader in this space.

Read More »

Strattic vs. WPEngine : Who is Faster?

Strattic is an innovative WordPress WebOps platform that is also a static site generator. We compare its capabilities with WPEngine in this post. We also migrate a website from WPEngine to Strattic and compare site performance between these platforms.

Read More »

Start A Quote

Let us know what you are looking to build and we will be in touch right away.
Fields marked with an * are required
What is your preferred CMS Platform?