Dave_Roberts

Hey Laura,   It looks like the href="" in the VML code is set to:  href="{{lead.Brand Phone MX - Nationals CallTo}}" rather than  tel:+{{lead.Brand CallTo}}   That might be the issue here -- maybe that token isn't set with a value or something? You might also try dropping the "+" and seeing if that makes any difference for you? ... View more

I've seen some pretty long emails put together in Marketo, I don't think there's a reasonable limit on how much you can stuff into an email based on "how much Marketo allows".  As Sanford mentioned, and depending upon how your template is built, there might be some slowing down in the editor as you add more and more modules/content to an email. Beyond this however, there's a more precise limit that some inboxes enforce before they clip an email -- likely in an effort to avoid exactly this type of thing (emails that are forever long).    Here's an article with some more info on where Gmail clips an email in the inbox: https://help.drip.com/hc/en-us/articles/4424710412941-Avoid-Email-Clipping-In-Gmail#:~:text=Gmail%20has%20a%20size%20limit,to%20view%20the%20entire%20message.   Gmail has a size limit of 102KB for each email message. Once that limit is reached, the remaining content is clipped and becomes hidden behind a link to view the entire message. Every element making up the email, from the HTML to the written text and images, has an impact on file size. Each letter or character you type takes up approximately 1-2 bytes. This starts to add up quickly with longer email messages.   From what I've seen, this is a reasonable threshold for the size of what you'd expect an email to be -- something that people are going to spend the time reading. If you're running into issues with thinking about the total length/size of an email I'd recommend you find a way to break it down if possible if the intent is to get a human reader to commit to your message.  If you've got a ton of content to feature, it might be more savvy to set that up on a landing page (which can handle much more content and has much more flexibility in terms of presentation) rather than chunk it all into an email. For something like a longer newsletter-style email, you might think about trying to segment your audience by interest and send them a shorter email with content that's curated to their interest and then provide options to click-thru to an LP with more detailed info. ... View more

Good morning Denise, and happy Tuesday 🙂   I was able to work thru this one pretty quickly by taking the last set of code we worked on and just adding a little bit to it. Thanks for clearing out the Custom CSS on the form to get this setup in a good place for me to review. You should be able to copy the attached CSS and paste it into the Custom CSS panel inside the form editor to get the results show in the image attached below:   A view with the attached CSS added into the inspector to preview the update /* make form, rich text and checkboxes full-width */ form.mktoForm, form.mktoForm .mktoHtmlText, form.mktoForm .mktoCheckboxList { width: 100% !important; } /* remove padding on right of form fields */ .vrtvMktoForm .mktoFormRow .mktoFieldDescriptor { padding-right: 0px !important; } /* restore native checkbox display */ .mktoForm input[type=checkbox] { opacity: 1; margin: 0px !important; float: left !important; margin-right: 10px !important; } /* hide fake checkbox element */ .mktoForm input[type=checkbox] + label:before { display: none !important; } /* get rid of negative top margin */ .mktoForm .mktoRadioList, .mktoForm .mktoCheckboxList { margin-top: 0px !important; padding: 0px !important; } /* indent checkbox label */ .vrtvMktoForm .mktoLogicalField label.mktoVrtvLabel { margin-left: 20px !important; width: calc(100% - 20px) !important; } .vrtvMktoForm .mktoLogicalField label.mktoVrtvLabel p { font-size: 1rem !important; } /* fix mobile label width issue */ .vrtvMktoForm label.mktoVrtvLabel { width: 100% !important; padding-bottom: 5px !important; margin-bottom: 0px !important; }   There's a few comments above each chunk of code to help explain what each bit is doing, but do let me know if you've got any specific questions about what's going on with any of this and/or if you run into any issues getting this to work on your end.   Thanks again, Dave  ... View more

It'd be pretty difficult to update the HTML to "redraw" the shapes inside the <svg> element without a tool like Adobe Illustrator. Normally to include an <svg> via HTML the way you've got it here you'd open up the file in a browser and copy the <svg> element which has all the path stuff already declared. The numbers in there are kind of like coordinates where you'd put a "dot" on a graph and then connect the dots to draw the shape.    If you've got an .svg file of your new image, could you load it into Marketo and post the URL here? I could help you get the HTML from that. Otherwise, you can link to the svg using an image tag instead a little differently like this: <div class="pb-3 pb-md-0 col-md-1 mktoText text-center text-md-left" id="FooterLogo" mktoName="Footer Logo"> <img src="__file_URL_goes_here__" /> </div>   If you include an <svg> inside an image tag (as above) you lose all "path" and shape stuff that's in the HTML which makes it easier to style (color) the image using CSS. If that's not important to you, you can load the <svg> into Marketo and grab the URL for the image once you've got it loaded and just replace the "__file_URL_goes_here__" in the code above with the URL to your <svg> instead.         ... View more

To specifically remove the "theme" styling layer from a page you can add a stylesheet with id="mktoForms2ThemeStyle" to your template to omit the theme stylesheet from loading. You can also do the same thing with the base stylesheet by adding a stylesheet with id="mktoForms2BaseStyle" to your template. These can be blank stylesheets or you can load them up with CSS you'd rather have load in place of the default Marketo stylesheets.   Stylesheets that get added to the <head> of the document when the forms load You can grab the HTML for these links from any page with a form on it and just replace the URL with a link to your own stylesheet instead. Here's a look at the markup you'd use on your template to omit the stylesheet(s) -- just replace the href="..." with the URL to your stylesheets instead (these can even be blank files).   <!-- omit native base form CSS --> <link id="mktoForms2BaseStyle" rel="stylesheet" type="text/css" href="__LINK_TO_YOUR_STYLESHEET_HERE__"> <!-- omit native form theme CSS --> <link id="mktoForms2ThemeStyle" rel="stylesheet" type="text/css" href="__LINK_TO_YOUR_STYLESHEET_HERE__">   I think this works b/c Marketo is looking to see if there's already a set of form styling rendered on the page each time it unfolds a form via forms2.js to avoid putting multiple copies of this on the page. If it sees the <link> with either id value listed above it'll skip over loading the native stylesheets and load yours instead.   This won't completely get rid of the styles the same as Sanford's solution but it will allow you to basically omit the add'l stylesheets from getting added into the mix. The balance of things to work around at this point then would be the inline styles on each of the form elements, for example <div class="mktoFormCol" style="padding-bottom: 10px;">...</div> -- but this can be worked around on a stylesheet by using an important tag like this:   form.mktoForm .mktoFormCol {padding-bottom: 20px !important;}       ... View more

You might be running into an issue with the load order of the CSS when you fiddle around with it and it can definitely be frustrating. Most times you're able to accomplish things by copying the selector you see in the inspector and adding an "!important" tag to the end of each rule inside that selector. The reason this works is because the Custom CSS and Marketo forms2.css get loaded after (further down the document) your theme stylesheets in the <head> -- they get tacked onto the end of the <head> and inside the <form> element once the forms2.js runs on the page to unfold the form which means they come after your other CSS and typically override it.   I borrowed a little bit of a multi-column boilerplate CSS, courtesy of @Courtney_Grimes which can be found here:  https://gist.github.com/cougrimes/5168524fd9365eedea16 and added a few bits in there to dial it for your form and your breakpoints (600px).   Here's a look at what Im seeing in the tablet view when I resize the browser window:   New CSS applied in the browser console   and here's a look at the CSS I'm using:   .mktoForm .mktoGutter {height:5px;} /* adjust space between field and label */ .mktoForm .mktoOffset {height:5px;} /* adjust space between field rows */ .mktoForm, .mktoForm .mktoFieldWrap, .mktoForm .mktoHtmlText, label.mktoLabel, .mktoForm input, .mktoForm select, .mktoForm textarea .mktoLogicalField .mktoCheckboxList {width:100% !important;} @media only screen and (min-width:600px) { .mktoFormCol:first-child:nth-last-child(2), .mktoFormCol:first-child:nth-last-child(2) ~ .mktoFormCol {width: 100% !important;} .mktoFormCol:first-child:nth-last-child(3), .mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {width: 50% !important;} .mktoFormCol:first-child:nth-last-child(4), .mktoFormCol:first-child:nth-last-child(4) ~ .mktoFormCol {width: 33.3333% !important;} .mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {padding-left: 30px !important;} } @media only screen and (max-width:600px) {.mktoFormCol {width:100% !important;}}   You should be able to put this code into the Custom CSS on your form or even include it on the template or an external stylesheet (which would be the preferred method) to get it into play.   Let me know if this works out for you - the fields should just stack up on mobile the way you'd expect and then do the 2-column thing at 600px+.   Thanks, Dave ... View more

Hey Jasbir,   As far as I know this is not possible using the native <select> field in a Marketo Form -- you'd need to create a custom HTML/CSS element that was a "pseudo-select" element to get something like this to work. It might be worth noting that this'll show up differently depending on which browser you're looking at as well.   Here's an article from stackoverflow with some details for reference: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element   The only ideas I've got to work around this would be to expand the width of the form itself to give the select a bit more room to match up with the longer options or to make the font-size of the fields smaller maybe? ... View more

It's been a few years, but I've used Litmus extensively and liked it a lot. As a developer it had all the tools I needed to test things out and the only downside I found was the cost. We use Email on Acid now and Im just not as big a fan -- it seems a bit less capable and inconsistent and I'm not a fan of the UI.   If you can swing it, I'd say you'll be further ahead going with Litmus but Email on Acid is "good enough" that you can get work done. ... View more

The form's unsubscribe field has an id of " axcoUnsubscribe". (Image 1) It looks like the script is looking for a field with the id of "Unsubscribed" the way you've got it setup. (Image 2)   If you edit the script to change "Unsubscribed" to "axcoUnsubscribe" it might work out the issue here.      This id="" value of the field on the form is "axcoUnsubscribe"   =================================================================================================   The script is looking for a field with id="Unsubscribed" ... View more