Users of Marketo often ask how they can create a Marketo lead form using their own custom HTML and CSS, so they have full control of the appearance of the form. When you place the embed code that Marketo gives you onto a page, it adds all of the form’s HTML to the browser’s Document Object Model (DOM), and while you can certainly override the form’s appearance with CSS overrides and the use of nth-child selectors, you can’t change the HTML that the embed code’s JavaScript outputs.

However, using the Marketo Forms 2.0 API, we can create our own custom HTML form and still submit the data into Marketo.

First, place the embed code on the page as you normally would do, but add a  display: none; statement to the form element:

The above embed code populates the form element with the contents of the Marketo form. Let’s say you created a form with First Name, Last Name, Email, Phone, “How can we help you?”, and “How did you hear about us?” fields. Marketo would then output something like the following HTML to the browser’s DOM:

Assuming you were using Bootstrap 3, you might code a custom version of the above form with HTML such as the following:

Now we just need to populate the form field values from our custom HTML to the hidden Marketo form. We’ll use jQuery for this example, but the same could be done via vanilla JavaScript as well. Populating the text fields is easy enough, you can just set the value of the hidden field with the value of the displayed field whenever it changes. Select dropdowns, checkboxes, radio buttons and other types of form field controls will require a little more work. For select  elements you can check for the value of the option element that has the selected attribute. For checkboxes and radio buttons you can check for the value of the input  element that has the  checked attribute.

The important part to remember is that you need to make sure your id  attributes on your Marketo form differ from those on your custom HTML form.

Lastly, we use the Marketo Forms 2.0 API to submit the hidden Marketo form when the user clicks our custom HTML form’s submit button. Of course, this requires that you don’t need to support users who have JavaScript disabled in their browser, but that’s probably less and less of a requirement these days.