Custom CSS - Marketo form embedded in Wistia video

Highlighted
Anonymous
Not applicable

Custom CSS - Marketo form embedded in Wistia video

Can anyone share tips for styling a Marketo form for embedding in a Wistia video? I've got a form styled just so and it embeds no problem on our external landing page. However, when I choose that form (or really any of our forms for that matter), the styling goes out the window and I'm unable to override some of the (I believe) Wistia default settings.

Tags (2)
12 REPLIES 12
Highlighted
Level 10 - Community Moderator

Re: Custom CSS - Marketo form embedded in Wistia video

Can you move this post to Products​ please? (Move link is at the right.)

And please provide a URL with your video w/form gate.

Highlighted
Anonymous
Not applicable

Re: Custom CSS - Marketo form embedded in Wistia video

Done (moved)!

Here's a URL to (A) one of our site pages with a form embedded (not in a Wistia video) and happily styled: How Benefits Data Becomes Actionable

Here's the URL to (B) a demo page with the same form embedded on a Wistia video: Watch Demo Variation

I know the CSS of the form container in A is different than a responsive video container in B and B doesn't reflect some things I've been able to override styling on. Just wanted to show an apples to apples comparison.

Appreciate any tips or suggestions!

Level 10 - Community Moderator

Re: Custom CSS - Marketo form embedded in Wistia video

Emily, the form in the Wistia embed is your #1487.  The one on the standalone page is #1213. Only #1213 has the custom local styles.

Highlighted
Anonymous
Not applicable

Re: Custom CSS - Marketo form embedded in Wistia video

So much for apples to apples. Appreciate you taking a look, Sanford. Turns out Wistia was indeed resetting many of them and my detailed targeting wasn't granular enough. By getting really specific (div.wistiaMarketoFormWrapper...), we have been able to override most of the styles. Thanks again for being willing to help out.

Highlighted
Level 10 - Community Moderator

Re: Custom CSS - Marketo form embedded in Wistia video

Turns out Wistia was indeed resetting many of them and my detailed targeting wasn't granular enough.

It's true that Wistia has its own styles, but the primary cause was that your local custom CSS literally was not injected into the <head> because you were using a different form ID.

Look in the last <style> element inside the <head> of the generated page and you will see the difference.

Highlighted
Anonymous
Not applicable

Re: Custom CSS - Marketo form embedded in Wistia video

Oh yes, totally get it! That was just a mistake that my apples-to-apples example was sloppy. I'm cruising now with custom CSS targeted at very specific Wistia then Marketo selectors. Again, I appreciate your willingness to be helpful!

Highlighted

Re: Custom CSS - Marketo form embedded in Wistia video

so where exactly are you adding the custom CSS? on the marketo form?

Highlighted
Anonymous
Not applicable

Re: Custom CSS - Marketo form embedded in Wistia video

Hi Yoav,

Got it sorted out. I ended up adding the custom CSS on the page the Wistia video+embedded Marketo form is embedded on. It's styling it like I want (and like I think it wasn't when I was trying to embed the styling in the form as Custom CSS), the only downside is a quick hop in the render.

Highlighted

Re: Custom CSS - Marketo form embedded in Wistia video

Hi Emily,

difficult to comment without an example, but in general, we don't experience any special styling issues with Marketo forms on Wistia videos.

Regards;m