Change CTA Text on Form | Community
Skip to main content
K
kenmckown
New Participant
May 15, 2024
Solved

Change CTA Text on Form

  • May 15, 2024
  • 2 replies
  • 2208 views

We are looking to move to global forms and want to be able to use the same form, but change the CTA text regardless if we are using Marketo LPs or embedding the form on outside pages. I assume there is some script that can be written to modify it, but not sure how to go about implementing or creating that. 

 

Any help would be great.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman
{ const ctaText = "Page-specific CTA"; /* -- NO NEED TO TOUCH BELOW HERE -- */ MktoForms2.whenReady(function(readyForm){ const formEl = readyForm.getFormElem()[0], buttonEl = formEl.querySelector(".mktoButton[type='submit']"); buttonEl.textContent = ctaText; }); }

2 replies

Dave_Roberts
Dave_Roberts
New Participant
May 17, 2024

On a Marketo LP you can use a token -- that's probably the most user-friendly way to set this up. When you embed the form on a webpage outside of Marketo however, that token will not render and you'll need a script similar to what Sanford posted here. In terms of implementation, for pages using the script, you'll need to include the script on each page where you'd like the button text to be updated and then change the bit at the top to match your desired button text. 

You'll want to be sure the script comes after the form script on any page where it is used. For a non-Marketo LP, you should be able to add a <script> tag below the form embed code wherever you're including the HTML for the form. On a Marketo LP, I'd recommend using a token for the button text or even creating a variable in the LP syntax to replace the button text piece of the script so that you can easily update that using the LP Elements panel w/o needing to maintain a script-per-page.

 

The most straight-forward solution would be to use the script as-is everywhere you'd want this to work but that could mean a bunch of individual scripts to maintain depending on how many forms and pages you're looking at in total. 

 

Depending on the CMS you are using and how easy it is to add <meta> tags to the <head> of the document, I've seen this setup just a little differently where you'd update the meta tag and then the script just pulls the button text from a meta tag. The difference in this approach is that rather than needing to update the script for each page with different button text, you'd use the same script on every page and update the meta tag instead. This solution is sometimes easier for folks that need to update the button text but aren't comfortable editing a script file and loading/reloading it onto a webpage. It doesn't save work in terms of steps and adds another component to the mix but it can be helpful to reduce the barrier to entry depending upon the editor's skill set. Another minor advantage of going this route for Marketo LPs is that b/c the form script needs to follow the form in the document, you can't use the Landing Page Actions > Edit Page Metatags menu to add it to the <head> of your document like you could a <meta> tag. This allows you to place a "global" script toward the end of your document and still use the Marketo UI to easily update the button text (though I'd still recommend using a token or variable in Marketo for the sake of simplicity).

    K
    kenmckownAuthor
    New Participant
    May 21, 2024

    This is very helpful, yeah I will be using tokens on Marketo LPs, but some of these are in external pages, so the script can be used for that. Appreciate the info!

    SanfordWhiteman
    SanfordWhitemanAccepted solution
    New Participant
    May 15, 2024
    { const ctaText = "Page-specific CTA"; /* -- NO NEED TO TOUCH BELOW HERE -- */ MktoForms2.whenReady(function(readyForm){ const formEl = readyForm.getFormElem()[0], buttonEl = formEl.querySelector(".mktoButton[type='submit']"); buttonEl.textContent = ctaText; }); }
      Terms & ConditionsAccessibility statement

      Loading footer...