Create a custom html box to redesign a form

[Anonymous]

Hello! 

Does anyone know how to create a custom html box on a landing page that includes a marketo form? The idea is to be able to edit certain components of the form - for example, we have 6 fields, and we want the first three to have a different font color than the second three. We figure we can do this if we play with the html, but not sure the best way to do that in Marketo. Just wondering if anyone has any ideas here before I pass it along to our web designer. 

Thanks!
Lauren

[Anonymous · Accepted solution]

I think you could build the page with whater HTML style you want as a non-marketo page, then follow this approach  "Using Marketo forms on non-Marketo Pages" 

https://community.marketo.com/MarketoArticle?id=kA050000000KyqgCAC

[Anonymous]

If you need to keep the form on a Marketo page, you could use jQuery to achieve this with the "nth" child selector. 

http://api.jquery.com/nth-child-selector/

[Anonymous]

Thanks Steve and Matt! This info was super helpful. What I ended up doing was creating and approving the landing page with the form as I normally would. I then copied the page source and pasted it into a new landing page template. Inside the template, I altered the style of text for the form fields and customized the line spacing. 

Then in our program, I just created a new landing page with this template and approved - it works perfectly! The only thing is that the landing page summary doesn't record when a form is filled out, so our landing page performance report will be inaccurate. However, we are using a progression status change flow in the program to record when the form is filled out, and that is working just fine to record form conversions.