Change the text on the submit button

[Anonymous]

I have a master form that I use for multiple landing pages. Is there a way to change the submit button's text just for that specific landing page? Is there a script or code that I can drop onto the landing page that will do this?

[Justin_Cooperm2]

If you don't want to use a token, you can use Forms JS in an even simpler way to achieve this (either on external page or in a Marketo landing page):

<script>

MktoForms2.whenRendered(function (form){

  form.getFormElem()

  .find('button.mktoButton')

  .html('New button text');

});

</script>

[Anonymous]

So I get the program token, what token do I use in the form for the submit button label?  Is there a default value I can add as well?

[SanfordWhiteman]

It's the same token... not sure if I understand your question. In Kristin Carideo​'s answer she uses {{my.FormCTA}}. 

Also note you can pass the submit button text in the URL, like in this old chestnut: CodePen - MktoForms2 :: Language

[Anonymous]

Hey all -- Does this work with embedded forms? Trying to figure out how it would and not having much luck. 

[Anonymous]

FYI we ended up adding this script to embedded forms and are able to change the submit button text easily on a per page basis, regardless of if the form is the same on every page or not.

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

<form id="mktoForm_1674"></form>

<script>

    MktoForms2.onFormRender(

    function(form) {

        var loc = document.createElement('a'); // new Location object for easier parsing

        loc.href = document.referrer;

        document.querySelector('.mktoButton').innerText = "Download"

            decodeURIComponent( loc.search.substring(1) ); // use the whole query string as button label, this is just a demo

    });

    MktoForms2.loadForm("//app-sj01.marketo.com", "142-FNO-891", 1674);

</script>

[Anonymous]

Thank you! Works great!!

[Kristin_Carideo · Accepted solution]

You can certainly use a token, and then put the tokens in the individual programs containing your landing pages. I use {{my.FormCTA}} as my form submit button token and then just add that token to the program so I can make the button say "Learn More!" or "Sign Up!" or whatever.

[freeza]

Can we add more than one token to the Form CTA in the form level? I have 2 LPs in the same program and they both are using the same form but the CTA has to be different. How can I execute this properly?

[Darshil_Shah1]

A thought - Instead of making changes in the global form to accomodate this case, wouldn't it make more sense to hard-code/overwrite the submit button lable using JS in both the LPs for this program?

[freeza]

How can I overwrite this? I tried over writing in so many ways but nothing worked.

[Darshil_Shah1]

Try adding the below script on LPs -

<script>
MktoForms2.whenReady(function (form){
  form.getFormElem()
  .find('button.mktoButton')
  .html('BUTTON TEXT'); //Change the text as per the need
});
</script>

[freeza]

Where exactly do I have to add this script? I tried adding inside the Meta tag section, but nothing is happening there.

[Darshil_Shah1]

You should add the JS in the body of the page, in the HTML element or the HTML section within one of the Rich-text area's (WYSIWYG) element in the LP.

[freeza]

I did that too. But nothing changed.

[Darshil_Shah1]

Can you please share the LP URL so that we can have a look? Thanks!