Apply bootstrap form styles to Marketo form

[Jon_Wright]

Hi

I'm using Sanford's code to destyle a Marketo form:

https://codepen.io/figureone/pen/MbPOdj?editors=0110

But I'm looking for an easy way to then apply the css styling I have from a Bootstrap form to the destyled form, does anybody any pointers on best ways/tools to do this?

Thanks

[SanfordWhiteman]

Jon, do you mean you want to add HTML attributes to the standard Marketo form DOM?

Or literally rearrange elements to match another HTML “shape”?

[Jon_Wright]

Good question. Originally what I thought I wanted to do is add additional classes to the Marketo form elements. 

For example my Bootstrap form gives the following code for the button:

<button class="btn btn-action-1 w-100 mb-6 aos-init aos-animate" data-aos="fade-down" data-aos-delay="750">
Sign Up
</button>

So I was thinking if I could add those classes and attributes to the Marketo button, but doesn't seem there's an easy way to do this.

I did see your FormsPlus::Tag code which I thought might help but don't think it allows user-defined classes/attributes to be added. 

I have the all of the SCSS files so I was going to explore creating a 'Marketo form SCSS file' and recompiling the CSS so it includes the Marketo form classes with relevant Bootstrap styles, not sure how feasible that is.

But any pointers welcome.

[SanfordWhiteman · Accepted solution]

It’s not too hard, but whether you want to spend time on this is questionable:

MktoForms2.whenReady(function(mktoForm){
   let formEl = mktoForm.getFormElem()[0];
   
   let buttonEl = formEl.querySelector("button");
   buttonEl.classList.add("btn", "btn-action-1", "w-100", "mb-6", "aos-init", "aos-animate");   
   buttonEl.dataset.aos = "fade-down";
   buttonEl.dataset.aosDelay = "750";
   
})

IMO if you want a Bootstrap form, you should build that form separately and then use a hidden Marketo form post to submit it (i.e. Forms JS submit())