Edit Form HTML and Add Custom Javascript without Using the API

[Jessica_Biblis]

Hi Marketo Community,

We are developing a new email preference center and we want style the form so it is consistent with our brand standard. We also want to have it behave a little differently than the typical out-of-the-box form. The form will be used on a Marketo landing page.

Specifically, we want to be able to style the checkboxes a certain way. And we also want to clear all checkboxes and change the Unsubscribed datavalue to true if someone clicks an "Unsubscribe from all" link.

So far, we haven't been able to find a way to edit the form HTML and add custom Javascript without using the API. We are already using a ton of API calls from our website to Marketo and are concerned about our limits.

Does anyone know if it is possible to accomplish this? Any help would be very much appreciated.

[Grégoire_Miche2]

Hi Jessica,

You could start by editing the CSS of a form theme: Edit the CSS of a Form Theme - Marketo Docs - Product Docs

But if you really want to use some JS, you will have to use the forms 2.0 API, which IS client side JS. This is pretty well documented in here: http://developers.marketo.com/javascript-api/forms/

The forms 2.0 API will enable you to do whatever you want on the form, change it's behaviour, etc...

Also, search the community for Sanford Whiteman​'s code that enables you to remove Marketo styles from the form and add some handlers so that you can style the form with some CSS on the LP.

-Greg

[Jessica_Biblis]

Thank you very much!

[Lucho_Soto]

Hi Greg,

Does the Forms 2.0 API allow us to overwrite what the "on click" behavior looks like visually? More specifically, we want to change the color and styling of the "submit" button on click. I didn't see that in the documentation.

[SanfordWhiteman]

The API form#onSubmit event fires, well, on submit. You can style the .mktoButton any way you want at that point.

[Lucho_Soto]

Thanks for your help. I am a novice at JavaScript and didn't get very far. Can you tell me what additional code I would have to enter to change the border color of the button onSubmit? I should be able to figure out how to change the other values from there.

<script src="//app-sj04.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1611"></form>

<script>MktoForms2.loadForm("//app-sj04.marketo.com", "###-###-###", 1611);</script>

// Add an onSubmit handler

form.onsubmit (function () {

[SanfordWhiteman]

For something that simple, with an otherwise uncustomized form, you don't even need JS.  Just CSS:

.mktoForm BUTTON[type="submit"][disabled] {
  border-color: red !important;
}

[Lucho_Soto]

Even better, thank you for your help!

[Anonymous]

The Forms 2.0 JS API does not count against your API calls, so that should not be a concern.

We are rolling this out for a client right now where we pull the values from the Marketo prepopulated form into our markup, and then when the user submits the changes to our form, we prevent the submit, push the values into the hidden Marketo form, and then submit it using the Forms 2.0 API.

[Jessica_Biblis]

Thanks, Jason. That is super helpful to know.