Using css from wordpress theme in Mautic Landing Page

General Discussion
1

[h]Background:[/h]

I know it’s possible to embed Mautic forms into wordpress and have that form inherit the CSS of the wordpress page. I’ve seen this discussed in other posts, but I have a similar, but different issue



[h]Overall Goal[/h]

I want to utilise the A/B testing capability of Mautic landing page builder to create landing pages in mautic that look exactly like they are part of our main wordpress site. Our A/B tests would usually involve copywriting variations.



[h]Problem[/h]



When I embed a Mautic form into a Mautic landing page, I don’t know how to get it looking like our wordpress theme’s css.



[h]Question[/h]

I think my issue boils down to two possible questions

  1. How do I configure a standalone Mautic landing page(i.e. one that is not being used in an iframe, but that the user is accessing directly) to utilise css from another site? (That other site is our Wordpress website)


  • I believe that might be an issue because how CSS accumulates inheritance of settings, but my knowledge of CSS doesn’t go beyond that.


  1. How do I get the inherited CSS outcome to apply onto a Mautic landing page that’s been presented in an iframe?


  • Is there a better way I should be thinking about this problem?



    Using:


  • Mautic v2.8.0
  • PHP 7
2

[h]Background:[/h]
I know it’s possible to embed Mautic forms into wordpress and have that form inherit the CSS of the wordpress page. I’ve seen this discussed in other posts, but I have a similar, but different issue

[h]Overall Goal[/h]
I want to utilise the A/B testing capability of Mautic landing page builder to create landing pages in mautic that look exactly like they are part of our main wordpress site. Our A/B tests would usually involve copywriting variations.

[h]Problem[/h]

When I embed a Mautic form into a Mautic landing page, I don’t know how to get it looking like our wordpress theme’s css.

[h]Question[/h]
I think my issue boils down to two possible questions

  1. How do I configure a standalone Mautic landing page(i.e. one that is not being used in an iframe, but that the user is accessing directly) to utilise css from another site? (That other site is our Wordpress website)
  • I believe that might be an issue because how CSS accumulates inheritance of settings, but my knowledge of CSS doesn’t go beyond that.
  1. How do I get the inherited CSS outcome to apply onto a Mautic landing page that’s been presented in an iframe?
  • Is there a better way I should be thinking about this problem?

Using:

  • Mautic v2.8.0
  • PHP 7
3

Ad 1) - maybe you could set up a proxied folder on your mautic’s domain to replicate the WordPress’ assets (/wp-content/themes/) … then, you could probably include (link href …) your site’s CSS (since this is not an AJAX request, I believe there shouldn’t be any CORS issues?). Of course, provided that are CSS links from within the file match /wp-content/something, and that you also separately load e.g. all required fonts you may have from CDNs.

Ad 2) - I wouldn’t mess with iFrames.

Hope this helps,
D.

4

Go to your Mautic Form page and disable default theme option.
With this option the form will try to replicate your WP Theme CSS (works somethings depend of the Theme) otherwise you have to do it manually