SOLVED

Apply bootstrap form styles to Marketo form

Go to solution
Jon_Wright
Level 4

Apply bootstrap form styles to Marketo form

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

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Apply bootstrap form styles to Marketo form

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())

View solution in original post

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Apply bootstrap form styles to Marketo form

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
Level 4

Re: Apply bootstrap form styles to Marketo form

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
Level 10 - Community Moderator

Re: Apply bootstrap form styles to Marketo form

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())