Adoption of style (CSS) on embedded marketing forms in external CMS

(0) Share

Report

Posted on by MaSc4Crm

Hi guys,

we have embedded a few marketing forms on external CMS - works great!

We want to use the CSS of external CMS in our forms. Of course, we can set a link style in the form HTML header, but the controls looks different within the external CMS.

E.g.

My approach would be:

Reference the external CMS in our form HTML
Set "class" of each control to the correct CSS from CMS

This approach isn not very efficient. Furthermore we have a lot of forms, which we have integrated in external CMS.

Any suggestions?

Regards,

Martin

I have the same question (0)

All responses (3)

Answers (1)

Sort by

Verified answer

cloflyMao 25,210 on at

Like (1)

Report
Copy link

Link copied!
Hi Martin,

You could use javascript to inject CSS of external CMS to marketing form, and copy the code to other pages.

We will run custom function after form is loaded:

https://docs.microsoft.com/en-us/dynamics365/marketing/developer/marketing-form-client-side-extensibility#form-events

Please refer to my steps:

1. Marketing form with default CSS.

2. Add following code to external page.

MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function (event) { var fieldCollection = document.getElementsByClassName("lp-form-field"); for (var i = 0; i < fieldCollection.length; i ) { for (var j = 0; j < fieldCollection[i].childNodes.length; j ) { if (fieldCollection[i].childNodes[j].className == "lp-form-fieldInput") { fieldCollection[i].childNodes[j].classList.add("custom-field-control"); } } } })

lp-form-field element is the container of label and input field, lp-form-fieldInput is class name of input field.

(lp-form-fieldInput element is child of lp-form-field element)

We add custom CSS "class" to input field elements.

3. Result

Style of form field is overwritten by custom CSS "class".

Regards,

Clofly

Was this reply helpful? Yes No
MaSc4Crm 6 on at

Like (1)

Report
Copy link

Link copied!

Hi Clofy,

thanks a lot your your example.

Regards,

Martin

Was this reply helpful? Yes No
mgudlin 5 on at

Like (0)

Report
Copy link

Link copied!

Hi, I was able to add custom class name on input fields with you solution. Now I'd like to take control over submit button that has class "lp-form-button" and my approach was this

MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function (event) {

var customBtn = document.getElementsByClassName("lp-form-button"); customBtn.className += "custom-btn-class";

}) I had no luck with it, class was not added. Can you please advise how to add class to submit button?

Was this reply helpful? Yes No