Can Ninja Forms Act Like a Marketo Form? | Community
Skip to main content
bjohnson-5
bjohnson-5
Level 3
July 2, 2024
Question

Can Ninja Forms Act Like a Marketo Form?

  • July 2, 2024
  • 1 reply
  • 2303 views

Hi all!

 

I've had issues formatting our Marketo forms to match our website styles, so I've continued to use Ninja Forms. As you know, this does not track their website activity after form submission since it's not a Marketo form. Is there a way to start tracking website activity after someone submits a Ninja Form? Perhaps adding the Munchkin code to the Ninja Form?

 

Looking forward to your thoughts!

1 reply

Dave_Roberts
Dave_Roberts
Level 10
July 2, 2024

I'm sure there's a way to track non-Marketo forms but maybe a more elegant solution would be to try and style the Marketo forms to match your website instead of adding more "in-between" solutions to troubleshoot down the road?

The Marketo Form CSS isn't the most straight-forward to work with compared to what you're probably used to with other form styling. There's an issue w/ load-order -- where the forms2.css stylesheet gets added after your page's stylesheet when the form loads -- and to be honest the selectors on the forms2.css document aren't the most user-friend (or mobile-first).

 

If you're able to provide a reference URL to a form on your website that has the aesthetic you're after as well as maybe setup a Marketo Form on a similar testing page and provide that URL I'd be happy to work on putting together some CSS to help match the two and support any questions you might have about what's working and not working with the setup. 

Generally for styling forms, i'd recommend that they are styled on the web property (website, LP template, etc) where the form will appear rather than adding the CSS into the form itself. In this way you can use a single form in multiple locations without having to worry about conflicting stylesheet rules and that kinda thing. To get started on something like this, I'll usually spin up a form and add all the field types that I'd be expecting to use across all of my forms (so I can be sure to see them and style them) and then I'll setup that form on each web property. For example, I'll build a Marketo LP and add the form there and then build a test page on the website and add the form there as well. From there, it's just a matter of putting together a few .css documents (one for the LP template, one for the website) and including those on the respective web properties. This will add a layer of styling for any Marketo forms that are used on that property in the future and save you a lot of hassle with needing to styling forms every time you set one up and/or trying to manage the CSS at the form-level in Marketo (or worse, maintaining redundant copies of forms for the sake of different styling).

bjohnson-5
bjohnson-5Author
Level 3
July 2, 2024

Thanks Dave! This make a whole lot of sense.

 

Here is a Marketo LP with the form (we had our implementation team build this LP template and form): https://go.banksouth.com/gen-construction-contact-lender.html

 

Here is a form on our website: https://banksouth.com/lake-oconee-home-financing/#form 

Dave_Roberts
Dave_Roberts
Level 10
July 2, 2024

Thanks for sharing some links. I'll work on getting together a CSS update for you to help the form fields match on this one. 
I don't see the radio buttons on the Marketo Form so I'll work with the rest of the fields, but if you wanted to setup a test page in Marketo and add the same form as you've got on the website I'd be happy to get the radio button display dialed in as well.

 

I noticed in a quick look that all the CSS for your template lives on the template itself rather than in a stylesheet which makes updating your styles a pain b/c you've got to draft the template to get at that code rather than just replacing a stylesheet (.css file in your Design Studio). Because there's a bunch of CSS on the template, it gets truncated in the inspector and I'm not able to unfurl the full contents of the <style> tag to see what's going on there. Instead, I'll work on getting you something that you can tack on to the end of that <style> element in the template to work this out. This'll mean that the new CSS might override the current CSS which isn't the most elegant solution compared to editing the existing code, but it'll work in the interim until you get this setup in a best-practice kinda way.

 

This should work fine in terms of performance (<style> on the template) but I'd recommend thinking about taking all of those styles and migrating them to an external stylesheet (.css file) and uploading that to Marketo and then using a <link rel="stylesheet"> element to link the stylesheet on your template. It'll make updates like this in the future much easier to handle for ya without needing to draft the template. The only CSS that NEEDS to live at the template level are rules that use the Marketo Variable Syntax ${MyVariable} b/c those won't render in an external document. If you're interested in something like this, I'd be happy to work with ya thru the process once we've got some code that's working to display the forms as you'd expect.

Terms & ConditionsAccessibility statement

Loading footer...