Dave_Roberts

Dave_Roberts · ‎10-13-2022

Are you able to share a link to a page that's got a form with one of the quizzes from tF? I'd be curious if you could accomplish this natively in Marketo w/o using the form builder there and a bit of JS/CSS to get a similar result w/o the 3rd party or API piece.

Dave_Roberts · ‎10-11-2022

I think it's still early in the adoption curve to be thinking about dark-mode specific builds. From what I understand there's still very little access to be able to write supported cross-client code. There's a ton of info, tips and tricks in the "The Ultimate Guide to Dark Mode for Email Marketers" that Litmus put out here: https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers Personally, Im hoping this is just a fad and either goes away or gets some sort of standard support, but from my POV that day is a long way away. Typically "safe email code" seems like it is somewhere around 5-8yr behind "safe web code" b/c of all the differences between inbox clients in terms of universally supporting anything, so I'm not holding my breath on this one.

Dave_Roberts · ‎10-11-2022

You might try and rename the files to NOT include the "@" symbol (@2x) -- it looks like this is getting translated to "%40" in the URL you get from Design Studio. I've run into issues with this kind of thing before and normally strip that part out before I load anything into Marketo. In my experience, you can use "-" and "_" (dash and low dash) in a file name, but try to avoid any other special characters such as "@" or " " (spaces).

Dave_Roberts · ‎10-11-2022

I'm not sure which icons you're looking for in Marketo, but if you can share an image and where you've seen it in Marketo before I can try and help look around for it or something that'll come pretty close using FontAwesome. One of the advantages of using an svg is that you can use CSS to style the individual elements so maybe it'd be possible to add a gradient or something similar if we're not able to find exactly what you're looking for. From what I've seen in the past, most of the icons in Marketo are loaded as .png files, but that might be different in the new interface or something like that?

Dave_Roberts · ‎09-23-2022

You might try using style="width:200px;" in place of the padding there. I'm pretty sure Outlook only supports padding on table cells (<td>), so it's probably failing when added to the link (<a>) element. Here's a link to a support chart for reference: https://www.caniemail.com/features/css-padding/

Dave_Roberts · ‎09-23-2022

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?

Dave_Roberts · ‎09-15-2022

I've also noticed that the new search bar is far less capable than the previous version and had to find new ways to filter things out via search as a result. If you explore thru the Images/Files folder are those files still showing up in the new experience, just not via the search bar or are they missing entirely?

Dave_Roberts · ‎09-14-2022

Yeah, I'd agree that the <p> tags are probably what's causing the different spacing here. If you're not adding those in there intentionally it might be that your system is setup to add a <p> around text elements in Email -- it's the default setting for whatever reason. Changing the root block elements to "None" instead of "<p>" might help to shore up the issues here moving forward but you'd still need to go back in and delete any <p> tags in the editor. Here's a link to an idea in the Community which has some more info on where to find this setting and what to adjust it to: https://nation.marketo.com/t5/ideas/acceptable-defaults-root-block-elements-none/idi-p/310510 You can find the Root Block Elements panel under the Admin > Email > Edit Text Editor Settings (see image in thread above)

Dave_Roberts · ‎08-31-2022

Maybe check the "Root Block Elements' in the Admin settings to make sure that you've got it set to "None" instead of "<p>" (paragraph). There's usually some margin or padding assigned to the paragraph element <p> that would get added in the editor when you changed the text if the setting were not set to "None". I see a paragraph tag <p> in there surrounding the link element <a> and you probably don't need that at all -- more likely this should just be a link inside a <td>. Here's a link to an thread with some more info on the where to find the settings and a picture of the Root Block Elements popup for reference: https://nation.marketo.com/t5/ideas/acceptable-defaults-root-block-elements-none/idi-p/310510 You can find this by navigating to Admin > Email > Edit Text Editor Settings.

Dave_Roberts · ‎08-25-2022

If you can add the form to a page and post a link I'd be happy to look into the styling to see what might be causing the scrolling issue so that you don't have to go the iframe route - that'll probably work but it's sort of a "down and dirty" way of going about it. It might save you some headaches down the line to resolve the styling issues at the form/page level.

Dave_Roberts · ‎08-22-2022

One of the reasons you may be seeing a difference here is that in the preview mode, you're using the browser to render the code and in general browsers are more capable of supporting different HTML and CSS than an Email Service Provider (inbox). Once you send the code to an inbox, you're relying on Outlook or Gmail (or whatever) to render that code and each inbox has it's own rules and preferences that are generally archaic compared to a modern browser. There's a really handy website that'll help you figure out what you can and cannot use in email that might be of help to you here: https://www.caniemail.com/ If you're able to post the code and more specific information about the errors you're seeing here that would help the folks in the community look into this one.

Dave_Roberts · ‎08-22-2022

Would you mind sharing a link to the approved version of the LP so I can check out the code and see what's going on there?

Dave_Roberts · ‎08-14-2022

Thanks for the explanation here, appreciate it. Any idea when/if this bug is going to get addressed?

Dave_Roberts · ‎08-13-2022

Just use the "checkboxes" field type, even if you only need it for one field in the set. Then you can set it up just like you've got the other checkboxes field on the form and don't need any fancy CSS or JS. Out of curiosity, what is the reason you're changing it to a "checkbox" field type instead of a "checkboxes" field type?

Dave_Roberts · ‎08-08-2022

Is there a specific "stars and flames" icon that you're after here? If so, can you post an example of the white one you found in this thread? You might be able to colorize the svg's html attributes to add some color or something like that if you're not able to find the same thing in color. If you're just looking for svg icons, you can try something like Font Awesome: https://fontawesome.com/search?p=1&q=stars&s=solid%2Cbrands You can search for different icons and then click into any that you like and use the "</>" icon in the top right (circled) to copy the svg code for that icon. Click the </> icon to copy the svg code for this icon

Dave_Roberts · ‎08-03-2022

Yeah, that's one of the features that took me from zero-to-hero -- once you've got the code in the Litmus builder you can make one change at a time and run a render on whatever platforms they've got available (which is plenty) so you can see if that specific change did something across a bunch of platforms at the same time. This was super helpful in working out some of the nuanced things with Outlook along the way.

Dave_Roberts · ‎08-02-2022

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.

Dave_Roberts · ‎08-02-2022

Dave_Roberts · ‎08-02-2022

It depends on how your template is built to be honest. I'm certain this is possible (I do it all the time in demos) if you've got a flexible template to start with. Would it be possible for you to share a link to view the LP you're working on so the folks in the community here could have a look at it to make suggestions to help you out here? I'm thinking if I could see how the code is setup on the page we might be able to help you figure out a way to add in some more speakers, but again, it all depends on how your LP template is built out in the first place. Thanks, Dave

Dave_Roberts · ‎08-02-2022

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

Dave_Roberts · ‎08-01-2022

Hey Denise, I'd be happy to take a look and see if I can get something working for ya. I'll jump into this tomorrow and get back in the thread here once Im able to get something put together.

Dave_Roberts · ‎08-01-2022

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.

Dave_Roberts · ‎07-28-2022

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).  <link id="mktoForms2BaseStyle" rel="stylesheet" type="text/css" href="__LINK_TO_YOUR_STYLESHEET_HERE__">  <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;}

Dave_Roberts · ‎07-27-2022

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

Dave_Roberts · ‎07-25-2022

When I used it, I didn't have the connector part hooked up so the HTML has to be a little different. I kept two copies of the code: One had the Marketo syntax for variables built in (the Marketo code) and the other was the rendered code (no variables) that I'd load into Litmus. I'd grab the HTML from a rendered email by previewing the email in the editor and then paste that into Litmus to test it. Basically you've got to work around the tokens and variables (anything Marketo would substitute) to test the code in Litmus. In Litmus you can use their builder tool to paste in the HTML and run a render test. The thing I really liked about Litmus vs. Email on Acid was being able to dump the code into their builder tool and make some changes there for testing and test that before bringing anything back into Marketo. I got a ton of use from the builder tool and was able to learn a lot in a little time by having an environment like that where I could make incremental changes and render that code to test/review the changes.

Dave_Roberts · ‎07-22-2022

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?

Dave_Roberts · ‎07-21-2022

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.

Dave_Roberts · ‎07-21-2022

Thanks for the updates and for digging in to build this up from the start and get it working, good stuff here! ::long-distance-high-five:: For what it's worth, I tell everyone I can to that it's a good idea to use the checkboxes field type (even one checkbox input) b/c it comes paired with the text to the right of the input while the checkbox field type does not. What happens in a lot of situations that I've seen is that some CSS/JS gets written to make a "checkbox" field type act like a "checkboxes" field type (eg. display the label to the right of the input rather than above it) and then that ends up messing something up down the line. Using the native "checkboxes" field type is just a better solution all the way around and doesn't require anything special from CSS or JS to look right on the page. Reach out again if you run into any other issues with other forms -- I suspect that piece of JS that's changing the classes of the Marketo Form elements is going to be problematic in the future (or at least something to work around) and I'd be happy to help again if/when something comes up.

Dave_Roberts · ‎07-20-2022

Here's some CSS that'll hide paragraphs inside of a label. You might look at the form and see if the paragraph is actually inside the label and remove it that way, but this'll hide the whole thing to get you to a quick solution here: .mktoForm label > p { display: none; } Hide the paragraph inside of the label

Dave_Roberts · ‎07-20-2022

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"

Online Status	Offline
Date Last Visited	Saturday

Date Registered	‎04-04-2016 05:33 PM
Date Last Visited	Saturday
Total Messages Posted	461
Likes Received	319

Top Badges Earned

Re: Typeform Integration

Re: Suggestion/Improvisation for Dark Mode clients

Re: Images not displaying in Marketo in Google Chr...

Re: SVG images of stars and flames?

Re: (Part I) Weird Outlook issues with VML button

Re: (Part II) Weird Outlook issues with VML button

Re: Missing Files in Design Studio 'New Experience...

Re: Spacing issues in Marketo and Outlook

Re: Button changing sizes when I ed

Re: landing page won't scroll embed-code powered f...

Re: Custom email template is not displaying correc...

Re: Form Field Label Positioning Issue

Re: Marketo form checkbox styling issue

Re: Marketo form checkbox styling issue

Re: SVG images of stars and flames?

Re: Is Litmus the best email client/device tester?...

Re: Length of email

Re: Speaker Limit on Landing Page

Re: Speaker Limit on Landing Page

Re: Help with Form Formatting - Custom CSS on Land...

Re: Help with Form Formatting - Custom CSS on Land...

Re: Landing Page Template: Help with updating CSS

Re: What is the best approach to overriding the CS...

Re: Marketo form issue - non responsive

Re: Is Litmus the best email client/device tester?...

Re: Can we control the option area for the select ...

Re: Is Litmus the best email client/device tester?...

Re: Help with Custom CSS on a Form and Landing Pag...

Re: Help with Custom CSS on a Form and Landing Pag...

Re: Help fixing 'Uncheck all' code on preference c...