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
Solved! Go to 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())
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”?
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.
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())