Re: Custom CSS - Marketo form embedded in Wistia video

Anonymous · ‎12-29-2017

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.

SanfordWhiteman · ‎12-30-2017

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.

Anonymous · ‎01-02-2018

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!

SanfordWhiteman · ‎01-02-2018

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.

Anonymous · ‎01-02-2018

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.

SanfordWhiteman · ‎01-02-2018

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.

Anonymous · ‎01-02-2018

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!

Yoav_Guttman1 · ‎03-27-2018

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

Anonymous · ‎03-28-2018

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.

Matjaž_Jaušove2 · ‎12-30-2017

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