Apply bootstrap form styles to Marketo form | Community
Skip to main content
Jon_Wright
Jon_Wright
New Participant
December 21, 2021
Solved

Apply bootstrap form styles to Marketo form

  • December 21, 2021
  • 1 reply
  • 3324 views

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

Best answer by SanfordWhiteman

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

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
December 21, 2021

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
Jon_WrightAuthor
New Participant
December 22, 2021

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
SanfordWhitemanAccepted solution
New Participant
December 22, 2021

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

    Terms & ConditionsAccessibility statement

    Loading footer...