I'll usually add the styles for my forms at the template level using a stylesheet so it's easy to update and global (all pages on the template will have the same set of form styles). Another way you could do this would be to put the CSS in the "Custom CSS" in the form editor to make the styles more form-specific. In this way, they'd "travel with the form" no matter which page it landed on. As a word of caution (and why I prefer the stylesheet approach) - adding local CSS to your forms will clash with any CSS coming from your template or website, etc (wherever the form shows up). Sometimes this is a good thing and other times it's a spaghetti mess of overlapping CSS.   Here's a link to another post with some CSS form stuff in it from a while back - this probably less relevant but it contains some info for context: https://nation.marketo.com/t5/Product-Discussions/Fluid-Responsive-Marketo-Form-CSS/m-p/114059#M73683   In that thread, you'll find a link Courtney posted to some CSS she's shared that's setup for multi-column CSS. Right now it looks like it's setup to handle up-to 3 columns, but this could be extended up to 5 columns (or more) with a little add'l css. Here's the link she posted for reference: https://gist.github.com/cougrimes/5168524fd9365eedea16     ... View more

Nice job w/ the presentation here @Chelsea_Kiko! This'll be a great resource for folks getting started w/ Marketo LPs.  👍 ... View more

What you've got setup in the new screenshot looks correct. There might be an issue with the rest of the code somewhere. Could you post a copy of your HTML here for review. There's an </> (Insert/Edit Code Sample) button in the toolbar above you can use to add code to a post.    From there, I'd be happy to copy/paste the code into a test environment to see if I can help identify what's missing here to get you going with the drag-n-drop modules.      ... View more

Thanks for posting a shot of the code here.    ALL modules must be a direct child (excluding the <tbody> element) of the element with the container class. This is failing b/c there are a few other elements in between the container and the module.    Try moving the "mktoContainer" class and id="container" onto the div a few lines down with the class="content-wrap".   From there, you can add row-after-row of <tr class="mktoModule" ... >, they've just all got to be nested directly inside the container element. There's a few other options for the parent/child element relationship in the docs as well - I usually use a <table> for the container and <tr> for the modules just inside that. ... View more

To get the drag-n-drop to work you've got to slice you email layout into "Modules" using some add'l syntax similar to adding the editable areas. Here's a link to more info: https://docs.marketo.com/display/public/DOCS/Email+Template+Syntax#EmailTemplateSyntax-Modules   As a heads up, there's a specific architectural relationship between the Container and Modules - the modules MUST be a direct child of the parent container, I prefer to use a <table> for the container and <tr> for modules. Once you've got the container and module syntax in play you'll be able to see the modules in the side panel and drag-n-drop those into play.    One awesome part about using the modules is that you can set the variable to be "local" - where they'll apply to just 'this' module when you change them, or "global" where they'll change stuff in every module when you update the module. I usually use the "local" setting [mktoModuleScope="true"] on most of my modules as kind of default and rarely use the "global" scope [mktoModuleScope="false"] - but it really depends on your approach and how flexible you'd like the email to be for the end user.   Let me know if anything else comes up while you're working thru getting this setup, I'd be happy to jump back in and help where I can.   ... View more

It looks like you've got the "External URL" option selected here, but the URL path appears to point to a Marketo folder. Have you tried selecting the "Design Studio" radio button at the top and using the same URL or exploring using the little folder w/ magnifying glass icon to the right of the URL to find the image in your instance and add it that way? The explore icon should show up to the right of the input once you've selected the Design Studio option. ... View more

Here's a link that I bookmarked and referenced a ton when I was learning to do email "the Marketo way": https://docs.marketo.com/display/public/DOCS/Email+Template+Syntax   Here's a few things to think about when going from a custom HTML email into a "Marketo-style" email: 1) There's a container element that's basically the wrapper for all your modules, kind of like the "canvas" or parent element that wraps around all the modules. I usually choose a <table> for this. There's a relationship between the parent element (container) and the modules (children) in that there can only be one container and all of the modules MUST be a child of that container. In my case, I work with the <tr> inside the <table> to use as modules. Check out the "Modules" section in the link (toward the bottom) to get more info on this bit. 2) Think horizontally in rows. It's much easier to code a big table w/ three columns (<td>) and use the left and right column as padding down the entire left/right side of the email. In Marketo, you'll want to include that padding inside EACH module so that you can cut the modules cleanly across the entire "page".  3) I prefer to use a <div> inside a <td> for the "editable area" - ex. <div class="mktoText"> .... </div> - and try to use the <div> for ONLY the editable classes you need for Marketo. If you've already got your content in a <td>, just nest a <div> inside of the <td> instead and move your content into an editable <div>. I think it's easier to keep the styling stuff on the <td> and leave the <div> as vanilla as possible. 4) Make sure to read up on the difference between Global Variables and Local Variables, there's kinda two levels of control for the variables (user controls) in a Marketo email. Let's say you've got a color variable, at a Global scope - changing the color will update ALL modules in the email to use that color instead. Whereas if it has a Module (local) scope, changing the color input in the editor will ONLY change that color in this specific module. I think it's easiest to make everything local unless you've got a reason to make it global b/c then you can change everything in every module to be a little different. A case for a Global scope might be something like a button color that you'd want to be the same for every button in the email (and probably tied to your branding palette). ... View more

Could you share a link to a test page that you're working on with some content inside the pop-up and an idea of how to trigger the pop-up (which button to click, etc)?    Some frameworks like Bootstrap have built-in pop-ups that might work better than this plug-in. I've seen a bunch of bad pop-up stuff in the past and never had any trouble with the Bootstrap pop-ups (they call them "modals"). They pretty easy to make editable so you can include text and forms (any HTML). Here's a link to more on that: https://getbootstrap.com/docs/4.5/components/modal/   If you're not using Bootstrap, it's possible that one of the libraries you're using (if any) on your website might have something like this or at least offer a low entry point to code up something like that. I don't think you should ever have to settle for pop-up or lightbox that doesn't act just like any other regular HTML element on a page - if it's not at least that good, in my opinion anyway, it's not worth using at all. ... View more

The "proper" solution would be to use CSS as Sanford mentioned here, there's a few ways to stick something to the bottom of a page, if you can share a link to that page once you approve it, I'd be happy to test something out in the inspector that you could add in to iron this out.   A more hacky way of going about this would be to set a min-height or add a bunch of line breaks to the page to push the footer down. This isn't ideal b/c it might look good on your desktop, but tablet and mobile will be the same distance from the top so you'd have too much empty space in those devices (ie you can really only set it up ideally for ONE viewport dimension but not the others). ... View more

I see you're already using custom HTML in the label to create the <p> and <h4> tags - could you wrap those in a <div> and assign the background-image and properties inline instead?    Here's the code I see on the page right now for the first checkbox option with the "Opening Address" title line:     <label for="mktoCheckbox_4535_0" id="LblmktoCheckbox_4535_0"> <p class="session-title">Opening Address</p> <p class="session-time">9:30am - 10:15am </p> <h4 class="txt_info sdec">Fujitsu ActivateNow 2020 Keynote <h 4=""> </h></h4> </label>      *note: check out the <h4> - looks like there's a little code error at the end of that line ^^   It looks like you've got some padding (1.2em) set on the labels using CSS, you might need to remove that so you could add it instead to a <div> just inside the label. Take this HTML for example:   <label for="mktoCheckbox_4535_0" id="LblmktoCheckbox_4535_0"> <!-- ::::::: add this <div> with the background and padding inline instead :::::: --> <div style="background-image: https://marketing-oceania.global.fujitsu.com/rs/836-MOZ-238/images/ActivateNow_Agenda_Image-9.jpg; background-size: cover; background-repeat: no-repeat; background-position: top center; padding: 1.2em;"> <p class="session-title">Opening Address</p> <p class="session-time">9:30am - 10:15am </p> <h4 class="txt_info sdec">Fujitsu ActivateNow 2020 Keynote <h 4=""> </h></h4> <!-- ::::::: close the <div> here :::::: --> </div> </label>     ... View more

Hey Dan,   If you've got Bootstrap running in your template, you could start with any of the copy/paste carousel options you get for free with Bootstrap: https://getbootstrap.com/docs/4.5/components/carousel/   It's a little trickier to set them up w/ 3 "columns" showing and then only scroll one "column" at a time, but it's much easier to do a group of 3 and scroll 3 at a time. You'd just need to replace the HTML inside the "carousel-item" with a row and 3-cols that held your speaker cards.    There's also a tabbed interface that you could use for the three orange buttons here: https://getbootstrap.com/docs/4.5/components/navs/#javascript-behavior - you could nest a carousel in each "tab-pane" and then hide/show the different panes using the buttons at the top. You'd need to do a little work to customize the HTML and CSS, but the scripting is all setup and is class-based so it's easy to copy/paste more HTML in there to create or remove cards.   This'll work in the Marketo editor as well, so it's really easy for someone to come in and update. It'll show up (and scroll) in the LP editor, so you can use the built-in nav to scroll thru the different "slides" and click in to edit each of them as needed. ... View more

Would it be possible to share a link to a page with a form using the correct setup and a page with a cloned form that's not working correctly? This would make it possible to dig into the code in the inspector to see if there's anything missing on the front-end side.   Also, after you clone a form, are you able to see the Custom CSS on the new form, or is that reset to be blank w/ just the commented line about adding styles here? If the Custom CSS is coming thru on both forms (the first and the cloned versions) it might have something to do with the context in which the form appears. There's usually a couple of layers of CSS to work thru/around, maybe sharing a link to a few pages would help bring an issue like this to light.   You might also try using a cloned version of the form on the same page as the first version of the form (where you know it's working and showing up as expected) to see if it's the form or the page which might be causing a difference in the display.   Thanks, Dave ... View more

Hey Nick,   If you look at the CSS toward the bottom, there's a section with a /* button */ label just above the responsive styles (copied below for reference).    You'll notice a few CSS comments in there (ex. /* commented text here */ ) to help point out the individual lines of code that are related to the button styles like background color and color (text).    There's two sets here, the top set is for the regular state of the button and the bottom is for the hover state of the button.    To change the colors, you'll just need to replace the existing hex code with your new color code.   form.mktoForm button.mktoButton { display: inline-block !important; background: #1595a3 !important; /* button bg color */ color: #fff !important; /* button text color */ border:2px solid transparent !important; /* button border color */ padding: .5em 2.75em; font-size:1.2em !important; line-height:1.2em !important; } form.mktoForm button.mktoButton:hover { background: #fff !important; /* button bg color on hover */ color: #1595a3 !important; /* button text color on hover */ border-color: #1595a3 !important; /* button border color on hover */ }   Let me know if there's anything else I can help out with as you put this together, and thanks for checking it out, glad it was helpful 🙂 ... View more

What's odd is that everything else in the section that's hidden for large screens (or vice versa) EXCEPT the form works...it's just the Marketo form that has the issue... Technically, it's NOT working - hidden elements are still loaded in the DOM so for example a mobile user who loads your page loads all of the hidden sections as well (consuming more data and delaying the load time of your page all the same), they just do not display once they're loaded on the page b/c of the CSS. Here's a stackOverflow question that has some more info about this: https://stackoverflow.com/questions/15565586/css-displaynone-does-it-still-load-all-content-inside-the-dom#:~:text=To%20your%20question%2C%20yes%2C%20CSS,contents%20should%20not%20be%20loaded.   This is what's making the form load twice, b/c you do actually have it twice in the DOM even tho "hiding" a section appears to remove it, the way WP and these theme plugins works, it's not actually removing that content, you'd need something more sophisticated like AJAX to handle those types of situations. It looks like you've got one form on the page now and Im not seeing the double-form issue, but there is some issue with the form overlapping the element on the right side of the page there. You can adjust your form columns, fieldwraps and inputs to a fluid width (100%) rather than a fixed width with some CSS like this: .mktoForm .mktoFieldWrap, .mktoForm .mktoFormCol, .mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm textarea.mktoField, .mktoForm select.mktoField { width: 100% !important; } This'll adjust the columns, fieldwraps and inputs (except checkbox and radio) to be the same width as the column with the form. You could add this to the form's Custom CSS or somewhere in your CMS that you can add/modify your theme CSS. Otherwise, I think you're on the right track here  - it looks like you're hiding the image in the right column for mobile and showing a different one above the form instead - that might be the better way to work around the forms here by showing/hiding the content elements rather than the form.   ... View more

Sounds like you're running into one of the issues with this approach to web development - simply creating add'l sections (mobile, tablet, desktop) that have different content or styles isn't really a good way to go about making mobile-friendly websites, even though it looks easy on TV.  Even when you "hide" content sections they are still there at the code-level which means your mobile-users are usually getting WAY more than they'd need (from a code perspective) for a good mobile-experience. A more "best-practice" approach is to use a mobile-first code base - which means you code everything for mobile and then use media queries for screen sizes to change things up for tablet and desktop which are generally more "capable" of loading larger files quickly. I think this is just the cost of using a tool like Wordpress or a themed plugin to do the development work for you.   In this case, it looks like you're running into the same issue Sanford mentioned a little earlier in this thread with the 2 + 2 = 4 forms showing. Because the form is on the page twice, it's loading twice in each container.    One idea to kinda work around this in Wordpress might be to only use 1 form on the entire page (including "hidden" sections) and find a way to put the form in it's own section so it would be independent of the content sections switching on/off based on your screen size.   Im not sure if you're able to turn the individual elements inside the row on/off like you can the entire row (section) but if you could, maybe you could build it all into one row and then show/hide different parts of that row around the form "element" (which wouldn't have any on/off stuff)? ... View more

I haven't seen something like this before when it's setup right, but I'd need to see the code you're using for this email to be sure (both in the default case and then in the dynamic content case to compare). Sounds like something is breaking with the buttons to render black-on-blue -- the default "link blue" would appear if it were simply failing to read the button styling. Buttons are kinda tricky to do right in Email and there's a ton of "cheap" solutions out there, so my hunch is that this has something to do with the way it's setup. I've seen these kind of really bold (blue, black, bright green, and pink) colors come thru when ${variables} are used inline in an editable area and/or are not translated from their variable syntax, for example, if you grab the variable-ized Marketo code and tried to pull it up locally to work on it outside of Marketo and those variables weren't getting substituted out.   I think Marketo EM 2.0 itself is different enough than "the other stuff out there" that you'll really want to work with someone who is familiar with Marketo to a degree that they understand things like Dynamic Content. Would it be possible for you to reach out to the vendor and ask them to evaluate the error here - maybe it's something they can learn from and build on for the future, but they might have the best insight into what's not working since they coded it up in the first place.    Alternately, if you can post the code for you email to this thread folks in the community can help look thru it to troubleshoot anything that doesn't get resolved by the vendor.  ... View more

This could have something to do with the container size here - it looks like you've got a 700px wide container for the bg image and then a centered 600px container in the middle of that. When I check out the screenshot you attached, the email is much wider than 700px (looks about 1000px edge-to-edge in Photoshop on my end) and the image piece is also wider than 700px.    This might have something to do with some of the classes you're using in the head - looks like there's a "table600" class in there which doesn't agree with the 700px width on the container in the Hero banner section.    You might take a pass and try to get all of your widths to be consistent - choose 600 or 700 and try to align all the items with that width instead of mixing them. Since it looks like you're coming out a little short on the width of the banner image, I'd try bumping the nested table that's 600px up to 700px first to see if that works out. The Outlook code you've got in there for bg-images looks right to me, normally when something like this happens there's a difference b/t the Outlook VML and the HTML for the rest of the email universe.   It might also be that the email template is setup to display at 640px based on the note on the image, you might want to check the image you're using there and make sure that it's big enough (or not too big) to fill the space EXACTLY.    If none of that works, it might be helpful to post the rest of the HTML from your template here for review, sometimes it's helpful to see how the variables translate and what classes, etc are tucked into the CSS in the head.   Let me know if changing the width of those elements makes any difference to the render, I'd image you'll be able to see some kind of difference by fiddling around with the fixed widths and sending yourself a test email to compare.   Thanks, Dave ... View more

Sure, you wouldn't want to exclude IE users, especially if your target audience is full of IE users, that's pretty straight-forward, but I don't think the 2% (globallly) that are using IE are the issue here, it's more a matter of a fraction of that percent using an OUTDATED version of IE that sounds like an issue here.    Would you recommend optimizing for retired versions of browsers like IE10 and earlier? I've always kinda thought that there's a "cutoff" point in terms of producing backward-compatible code and was under the impression that IE10 and earlier were before that point -- mostly because Microsoft isn't supporting those versions of the browser which means anyone using them is at an ever-increasing risk of security and performance issues as time goes on. I get that you can't "enforce" that orgs use good software, but where do you think the line should be drawn in terms of dealing with antiquated browsers or ESPs?  ... View more

Hey Bec, I don't have a solution for this, but I also have a few reasons that I don't worry about optimizing for IE10 with most stuff.   I did a quick Google search for "IE 10 support" and it looks like support for this browser ended at the beginning of the year. I understand that this doesn't exactly solve the issue of folks using an older browser that's no longer support, but it may not be worth trying to support retired versions of browsers, especially IE.    Here's a link to a short list of 628 reasons not to use IE10 because of security issues that arise (and do not get resolved) because of the lack of support from Microsoft: https://www.cvedetails.com/vulnerability-list/vendor_id-26/product_id-9900/version_id-138705/Microsoft-Internet-Explorer-10.html   As far as I'm aware the "modern standard" for IE got accelerated recently and Edge/11 is really the furthest you should have go "back in time" with MS browsers. It looks like 11 and the 1st version of Edge are already slated to roll out next year, here's a link to an article w/ more info: https://redmondmag.com/articles/2020/08/17/end-of-support-ie11-and-edgehtml.aspx   It might be worth looking into running a more secure browser and updating to something more modern where you wouldn't see these types of display errors or be faced with this caliber of security issues. It looks like in the last year, if you rounded up ALL the versions of IE (which includes 11, but not Edge) you'd end up with about 1.7% of the Global Market (https://gs.statcounter.com/browser-market-share#monthly-201907-202007-bar) -- said another way, not too many folks are using IE at all, let alone an unsupported version, so it's not very likely that you'll encounter this problem in the wild (in my experience anyway). Here's a look at the chart on the link above:     For what it's worth, Marketo also does not support IE11, they've made the cutoff at Edge already: https://docs.marketo.com/display/public/DOCS/Supported+Browsers so this might be something worth looking into getting updated if you're using an older browser internally.   Hope this helps in some ways, Dave ... View more

Hey Maci,   Maybe you could try to remove the inline styles that call out the Raleway font instead? It looks like those are located OUTSIDE the editable area so unfortunately you'll need to edit your template to apply this change. Once the template is approved, the new (updated) module will load in the Module Bar but it does not change anything that's already in an email. You'll need to reapprove the EM asset once the template is changed and approved and then go in and drag-n-drop a new module into the canvas to replace the old one and port the content over. Otherwise you'll be seeing the same thing in the module that you had in there before even though you've updated the template code to fix the issue.   Here's an example in your code for the Headline text:  <td class="center" style="font-family: Raleway,Arial, sans-serif; color: ${headlineFontColorwhite}; font-size: ${headlineFontSize30}px; line-height: 130%; mso-line-height-rule: exactly; text-align: ${aligncontent}; font-weight: 900"> <div class="mktoText" mktoname="Headline" id="banner1-text2164c0dc-ceb8-49e2-915e-edf1d8a355f5"> <span style="font-size: 38px; color: #ffffff;"><span color="#000000">TESTING THE HEADER FONT&nbsp;</span></span> </div> </td>   1. It looks like the parent <td> (which looks like it's on the template and not in the email) has a fixed font-weight of 900 to work with the Raleway font that's assigned at the top of the font-stack. Maybe if you were to remove both the "Raleway" from the font family as well as the font-weight:900 here it might help? Ideally, this would be "Arial, sans-serif" for the font-family and "bold" for the font-weight. 2. It also looks like there are variable setup on the <td> to control the color of the text as well as the size of the font (and text-align). You might try also removing the <span> tags inside the editable <div> and using the variables for this module to set the font-size and color instead of doing that in the Rich Text Editor using the little color popup and the font-size dropdown in the toolbar (FWIW, it's almost always better to use the variables than the RTE if you've got the option). It looks like you've got one span that makes it 38px and white and then another inside that which makes the text black. I dont think the spans would change the font-family, but this'll help clean up the code in any case and should be an easier way to adjust the module's text size/color in the future.   It might be safest to clone your EM template to create a version for testing this stuff out so you don't mess with any of your other live assets. From there you could make a few changes and spin up a new email and add the new module to it and send JUST that module off for testing to see if you can really zero-in on the issue here.   If you can post any updated code you're working with along the way it'd be really helpful to see what's changed to help figure out what might be the issue if you're still not seeing this show up. ... View more

Hey Cecile,   It looks like you're using a "checkbox" field type here and that might be why your label is showing up to the left/above the checkbox rather than to the right of the checkbox. There's another field type, "checkboxes" that has a "Display Value" as well as a field label and the Display Value is what shows up to the right of the input. It seems counter-intuitive to use a "checkboxes" (plural) field type for a single checkbox, but what you actually get is a little different for each field so it's got less to do with "how many" than "do you want the label to the right of the box or above it?".   Once you've got the field changed to a checkboxes field in the form editor, you'll see a link that says "Values" if you scroll down the light blue right column a bit. You'll want to grab the HTML from your label and then click on the Values link to launch a pop-up to edit the values. There's 2 columns for each checkbox, Display Value and Stored Value. The Display Value is where you'll want to paste the stuff you copied from your label, the Display Value is the text that shows up to the right of the input. The Stored Value is what gets sent to back to Marketo.  Once you've got that in place, you can remove the text you have in the label as you should be able to see the text showing up to the right of the checkbox from the Display Value instead.   Let me know if this works the label position out for you, I'd be happy to send along some screenshots or help out more if you get stuck on anything changing the field type and label/display value.   Thanks, Dave   p.s. I thought it'd be worth mentioning that if the idea is to save some vertical space on the form, you can also use some basic CSS to hide the form labels and use the Hint Text input instead of the Label input to add the "label text" as a placeholder in each of the fields. This way you won't have to sacrifice horizontal space for the sake of saving vertical space. ... View more

  It looks like you're using Arial as a font that's declared with an !important tag at the top of your CSS (above the variable declarations).    I also see a bunch of webfonts that are loaded, but it doesn't look like they're called by any of the elements: Merriweather:300,400,700,900| Open+Sans| PT+Sans:400,700| Raleway:300,400,500,600,700,800,900| Roboto:300,400,500,700,900| Source+Sans+Pro:300,400,600,700,900   There's also two versions of Tahoma that are imported but don't look like they're used in either.   If you actually aren't using these fonts, it might be a good idea to remove them from the template to help prevent confusion and excessive (unused) code.   It might be that the issue here is with using the "Black" (900) font-weight of Arial - aka "Arial Bold" (a different font-family from "Arial") - which is not installed by default on all machines the way the "Arial" (bold/700) weight is. Here's some info I found online that might be helpful to check out: https://stackoverflow.com/questions/50365911/html-email-font-weight-bold-in-outlook-is-not-working   I think what I'd try next is to change the "900" weight to "700" and see if that comes thru more similarly -- this would be the most 'failsafe' approach I can see. If that's not an option b/c of branding or whatever, you might include the "Arial Bold" font (import -or- via <link>, like the other webfonts you've already got setup) in your template . This still won't render for all inboxes, some ESPs just don't load custom fonts, so it leaves you in just about the same boat, but it'll work "better" for everything else (that does load custom fonts).   That's a good looking template by the way, I like the icons in the Variable Names - that's a nice touch  😉 ... View more