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
.png)