Global forms - show custom CTA button for Known people | Community
Skip to main content
Y
Yavor_Todorov
Level 2
July 25, 2023
Solved

Global forms - show custom CTA button for Known people

  • July 25, 2023
  • 1 reply
  • 1967 views

Hello,

we use global forms and we have this form CTA "{{my.FormCTA}}". This way, once we create new event program, we can easily change the form CTA from Register to Watch on-demand via program token "FormCTA".

But this seems to work only with the all-fields form.  It doesn't work with the Known Visitors form, as below:

 

<p>Welcome back, {{lead.FirstName}}!</p> <p>{{form.Button:default={{my.FormCTA}}}}</p> <p class="notYou">{{form.NotYou:default=Not you?}}</p>

 

I know we cannot use custom tokens in KV forms, but I know there is a way to bypass this with a JS code, I just don't know how to imlement it for the CTA button.

 

Thanks,

Yavor

 

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

It’s not safe to use {{my.tokens}} anywhere in Form Editor, even where they seem to be supported, because they aren’t encoded correctly, i.e. for JSON. It’s very easy to break the whole form descriptor with an otherwise legit token value.

 

What you should always do — and I have a blog post about this coming up — is put the tokens in a <datalist> where they’re correctly encoded, then read them out using JS and pop them into the form.

 

For your example:

<datalist id="marketo-tokens"> <option label="my.CTA Text">{{my.CTA Text}}</option> </datalist> <script> MktoForms2.whenReady(function(readyForm){ const formEl = readyForm.getFormElem()[0]; const tokenList = document.querySelector("datalist#marketo-tokens"); const kvHTML = formEl.querySelector(".mktoTemplateBox"); if(tokenList && kvHTML){ const ctaText = tokenList.querySelector("option[label='my.CTA Text']"); const kvHTMLButton = kvHTML.querySelector("button[type='submit']"); kvHTMLButton.innerHTML = ctaText.innerHTML; } }); </script>

 

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
July 25, 2023

It’s not safe to use {{my.tokens}} anywhere in Form Editor, even where they seem to be supported, because they aren’t encoded correctly, i.e. for JSON. It’s very easy to break the whole form descriptor with an otherwise legit token value.

 

What you should always do — and I have a blog post about this coming up — is put the tokens in a <datalist> where they’re correctly encoded, then read them out using JS and pop them into the form.

 

For your example:

<datalist id="marketo-tokens"> <option label="my.CTA Text">{{my.CTA Text}}</option> </datalist> <script> MktoForms2.whenReady(function(readyForm){ const formEl = readyForm.getFormElem()[0]; const tokenList = document.querySelector("datalist#marketo-tokens"); const kvHTML = formEl.querySelector(".mktoTemplateBox"); if(tokenList && kvHTML){ const ctaText = tokenList.querySelector("option[label='my.CTA Text']"); const kvHTMLButton = kvHTML.querySelector("button[type='submit']"); kvHTMLButton.innerHTML = ctaText.innerHTML; } }); </script>

 

    Y
    Yavor_TodorovAuthor
    Level 2
    July 31, 2023

    Thanks for the reply, @sanfordwhiteman.

    The code seems to work. I wanted to add the same functionality to the Full form CTA button as below:

    <datalist id="marketo-tokens"> <option label="my.Form CTA Full">{{my.Form CTA Full}}</option> <option label="my.Form CTA Known">{{my.Form CTA Known}}</option> </datalist> <script type="text/javascript"> MktoForms2.whenReady(function(readyForm){ const formEl = readyForm.getFormElem()[0]; const tokenList = document.querySelector("datalist#marketo-tokens"); const kvHTML = formEl.querySelector(".mktoTemplateBox"); const fullForm = formEl; if(tokenList && fullForm){ const ctaTextFullForm = tokenList.querySelector("option[label='my.Form CTA Full']"); const kvHTMLButtonFullForm = fullForm.querySelector("button[type='submit']"); kvHTMLButtonFullForm.innerHTML = ctaTextFullForm.innerHTML; } if(tokenList && kvHTML){ const ctaText = tokenList.querySelector("option[label='my.Form CTA Known']"); const kvHTMLButton = kvHTML.querySelector("button[type='submit']"); kvHTMLButton.innerHTML = ctaText.innerHTML; } }); </script>

     

    This works on the KV form, but if I click "Not you?" and go to the full form, I usually see some old token value, not the latest one I've inserted in Marketo. And I have to refresh in order to see the latest one. Is there a fix for this? If we can combine the 2 tokens into 1 and use only one "if" statement, it would be perfect.

     

    Thanks,

    Yavor

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    July 31, 2023

    Your code is incorrect. There’s always a <form> element. The existence of the element doesn’t mean you’re seeing the full form, so this line is totally misleading:

    const fullForm = formEl;

     

    If you want to switch behavior based on whether the kvHTML variable is truthy or falsy, do that. Don’t try to reuse unrelated variables.

     

    I usually see some old token value, not the latest one I've inserted in Marketo.

    I don’t understand what you mean but the {{my.token}} is the {{my.token}}. It only has one value at a given point in time. Maybe you have some old cached version of the page.

     

    Terms & ConditionsAccessibility statement

    Loading footer...