Can Ninja Forms Act Like a Marketo Form?

[bjohnson]

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!

[Dave_Roberts]

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]

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]

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.

[bjohnson]

That would be awesome. Thanks so much for your help with this.

[Dave_Roberts]

Let's start w/ an apples-to-apples visual comparison of what I'm seeing on my end when I add the included CSS into the inspector tools in my Chrome console. On the left is the Marketo Form on a Marketo LP and on the right is the website Form from NinjaForms.

Above: the hover state for the button on the Marketo LP

Note: I've added some styles to do the fancy arrow animation thing on the button (see green checkmarks) when you hover the button. You'll want to remove the ">" from the end of the button text (see red X) and let the CSS do the arrow piece so it can be animate 🙂

Here's a copy/paste of the code I used in the inspector to style this up:

@media screen and (min-width: 1px){
    /* form rows */
    form.mktoForm .mktoFormRow {
        margin-bottom: 0px !important; /* css override */
    }
    /* form columns */
    form.mktoForm .mktoFormCol {
        margin-bottom: 0px !important; /* mkto override */
    }

    /* field wrappers */
    form.mktoForm .mktoFieldWrap {
        margin-bottom: 35px !important; /* space below fields */
    }
    
    /* field labels */
    form.mktoForm label.mktoLabel {
        display: flex;
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
        line-height: 18px !important;
        margin-bottom: 5px !important;
    }
    /* asterix: required field labels */
    form.mktoForm label.mktoLabel .mktoAsterix {
        order:1;
        color: #e80000 !important;
        padding-right: 0px !important;
        padding-left: 5px !important;
    }
    /* all fields */
    form.mktoForm input[type=text], 
    form.mktoForm input[type=url], 
    form.mktoForm input[type=email], 
    form.mktoForm input[type=tel], 
    form.mktoForm input[type=number], 
    form.mktoForm input[type=date], 
    form.mktoForm select.mktoField, 
    form.mktoForm textarea.mktoField {
        padding: 12px 15px !important;
        height: unset !important;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0;
        color: #58595b !important;
        font-family: "proxima-nova", sans-serif !important;
        font-size: 16px !important;
        letter-spacing: 0.25px !important;
        line-height: 20px !important;
    }

    /* form button arrow animation (static state) */
    form.mktoForm button.mktoButton[class]::after {
        width: 15px;
        -webkit-animation-name: magic-button-out;
        animation-name: magic-button-out;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        color: #ffffff;
        content: "\f105";
        display: inline-block;
        font-family: "Font Awesome 5 Free", sans-serif;
        font-size: 18px;
        z-index:1;
        font-weight: 700;
        padding-left: 6px;
        position: relative;
        top: -1px;
        -webkit-transition: 0.3s padding-left ease;
        transition: 0.3s padding-left ease;
        vertical-align: middle;
    }
    /* form button arrow animation (hover state) */
    form.mktoForm button.mktoButton[class]:hover::after {
        -webkit-animation-name: magic-button-in;
        animation-name: magic-button-in;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        content: "\f061";
        font-size: 15px;
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
        padding-left: 11px;

    }
}

So now, let's talk about the best way to get this into play for ya...

STEP ONE: Back that thang' up!

To make sure you're not taking random advice from a stranger on the internet that's going to ruin your Landing Pages, make a clone of your page in Marketo. Let's work with that cloned version to do some testing and make sure everything is looking right and tight before we implement this into your template and make a few upgrades there.

STEP TWO: Create a new stylesheet (.css document)
I'd have done this for you but I can't attach (or at least can't figure out how to attach) a stylesheet file to this post in the community. To create a new .css document, you'll need some kind of code-editing tool. If you've got a favorite, use that, otherwise something super simple like Notepad++ will do the trick here. 
You'll want to copy the CSS code I've attached here and open your code editor and paste it into a new document. Let's save that document and name it "mktoForm-theme-BankSouth.css" for now. You can really name it whatever you'd like, but I'll use this filename for the rest of this example.

STEP THREE: Upload new stylesheet into Design Studio

Next you'll want to load your new stylesheet into Design Studio. If you've got a folder for this, that's great (it doesn't really matter functionally where it ends up). I like to create a folder called "css" in the Images/Assets folder to store stuff like this so that it's easy to find (but again, whatever is going to work for you is fine here, it can go anywhere in Design Studio).
Once you've uploaded this into your Marketo Design Studio, you'll be able to reference it using this path:
>> https://go.banksouth.com/rs/566-EGP-122/images/mktoForm-theme-BankSouth.css

Note: if you changed the file name (bold text) also change it here

STEP FOUR: Put your new CSS file into play

Next you'll want to open up the cloned version of the Landing Page your created in Step One and cruise up to the top left corner and click on the "Landing Page Actions" dropdown menu. From there, select "Edit Head HTML" and that'll pop up a dialog box with a few inputs. Where you see the Custom HEAD HTML input, we'll want to add a <link> element to include the new stylesheet. In that input, use this code to attach the new stylesheet in your Design Studio to this page:

<!-- Marketo Form Styling -->
<link rel="stylesheet" href="https://go.banksouth.com/rs/566-EGP-122/images/mktoForm-theme-BankSouth.css">

Functionally, this'll add the stylesheet to the end of <head> element so that it'll come after the CSS you've got on your template already. Once we've got everything tested and looking good, we can migrate the <style> elements that are on your template onto this stylesheet and then plug this stylesheet (with all the styles) into the template to make for a better future.

STEP FIVE: High Five!

If you've made it this far (and I didn't miss anything in the walk-thru here) you should be able to approve your cloned LP and see the styles come thru in the Approved Version of the page in your browser. Ideally they'll look similar to the left-side of the screenshot I posted at the top here.

If not, I either missed something here or there's something missing along the way -- in this case, shoot me a link to the cloned version of your LP so I can have a look at that in the browser and troubleshoot. You can find the Approved Version link in blue text (there's a blue button next to it to copy the link) when you're in the file tree view. Shoot me that link and I'll hop in and see if I can figure out what's not lined up.

To be continued....
Once we've got this looking like you'd want it to, we can start the process to migrate all the CSS in your template to an external stylesheet to make your template a bit more future-proof. This'll be a similar process where we add all the CSS on the template to a .css document and then attach that to the template (rather then to a page) to replace the <style> tags on your template now. That way you can just edit the .css document and upload the updated version into Marketo to replace the older version and you'll never have to draft your template to make a change to the CSS again (which also means no more need to mass-approve the LPs b/c you drafted and approved the template). You can spend all that time doing something fun instead 🙂

Hit me here with an @ tag if you run into any issues working thru this or once you've got it all setup and are ready to move on to updating the template -- or if you've got any questions about this along the way. Long-distance high-five! -Dave