Issue with No variable with this id declared - Landing page error | Community
Skip to main content
M
MalcolmPr1
Level 1
July 8, 2024
Solved

Issue with No variable with this id declared - Landing page error

  • July 8, 2024
  • 1 reply
  • 5051 views

Hi all,
I have an issue with adding a variable to landing page. 
Currently looking to add a variable to allow a user to add a 3rd party form via adding some 3rd party embed code.
I either have a duplicate ID or No ID variable declared. I have added the module, Class and ID but still get the issue.
Another question would it be best for string or text for user to add the embed code?
Code using below ... 


<meta class="mktoSting" id="WebinarForm" mktoName="Webinar Reg Form" default="unit4.com" />


<div class="Form-holder" style="display: ${WebinarForm};">
<div class="mktoString" id="WebinarForm" mktoName="CventFormReg" default="add Cvent registration embed code"</div>
</div>

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 Disha_Goyal6

Hi @malcolmpr1, Just adding to the @dave_roberts  comment.

 

If you want to add HTML in mktoString variable then you have to define the variable in head like this

 <meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">

1 reply

Dave_Roberts
Dave_Roberts
Level 10
July 8, 2024

For your variable declaration in the <head>, you'll want to use this ID value inside the variable syntax to place the default value into the code for your page. Here's a look at the variable that you've got:

 

<meta class="mktoSting" id="WebinarForm" mktoName="Webinar Reg Form" default="http://www.unit4.com" />

 

 

In your HTML in the <body>, you're using this in the display property of CSS like this:

 

<div class="Form-holder" style="display: ${WebinarForm};">

 

 

Which will render the default value from the variable where the ${WebinarForm} is in the code and look like this:

 

<div class="Form-holder" style="display: http://www.unit4.com;">

 

That's not valid CSS, so that's probably why you're having an issue with the setup here.

If you'd like to show/hide the form container using a variable, I'd suggest a different approach here. Instead of using a string variable to show/hide the form, try a boolean variable. A boolean is better in this situation b/c you want to toggle between two options: Show/Hide the form.

Here's an example of a boolean variable declaration that you could use in conjunction with some CSS to get that piece working:

 

<head> <meta class="mktoBoolean" id="Unit4Image" mktoName="Unit4_Image" default="true" true_value="on" false_value="off" false_value_name="Hide" true_value_name="Show" /> <style> .on {/* does nothing */} .off {display: none !important;} </style> </head> <body> <div class="${Unit4Image}"> <img src="..." alt="Unit4 Logo"> </div> </body>

 

You've got something like this going by using the "block" and "none" in your code, but this is a slightly better method b/c you don't have to force an element to display as a block when the boolean is set to true - you just use the class ".on" which does nothing (so it shows up however it's supposed to by default, even if that's display: grid or flex of block, etc) and use the ".off" class to hide it.

 

In the case of your Marketo String container (editable text), it looks like the HTML there isn't valid:

 

<div class="mktoString" id="WebinarForm" mktoName="CventFormReg" default="add Cvent registration embed code"</div>

 

 

Here, you're missing a ">" just before the closing div. This should instead look like this:

 

<div class="mktoString" id="WebinarForm" mktoName="CventFormReg" default="add Cvent registration embed code"> </div>

 

 

Also, notice that you've given this element the id value of "WebinarForm" which matches your variable ID up above. This is where the duplicate ID error is coming from. I'd recommend leaving the variable ID the way it is and changing this div to have an ID of something like "WebinarFormContainer" instead:

 

<div class="mktoString" id="WebinarFormContainer" mktoName="CventFormReg" default="add Cvent registration embed code"> </div>

 

 

For this piece, it looks like you're also confusing the variable classes (.mktoString) with the editable area classes (.mktoText). You'll only want to use the mktoString class in the <head> of your document to declare a variable. In the body of your template, you'll want to use the ".mktoText" class to create an editable text area.

 

If we fix that piece too, the final HTML for the container in the <body> of your template should look something like this:

 

<div class="mktoText" id="WebinarForm" mktoName="CventFormReg" default="add Cvent registration embed code"></div>

 

 

 This will create an editable text area in the template for the user to paste in the Cvent registration embed code.  I'm not sure how the Cvent code looks but you might run into issues trying to add the embed code (if it's script based) into an editable area (.mktoText) on your landing page. 

If this doesn't work, you might need to refactor your approach here. If you can share the Cvent embed code you'd be working with as an example I might be able to help ya figure out another way of going about this in the event that the editable text container (.mktoText) doesn't work out for you. What I'm thinking is that you could add the embed code to your template without wrapping it in an editable area and then use a variable (kinda like how you have it setup now) to pass a URL to that embed code to update the embeded code to point to a different event. 

 

Let me know if you have any questions about the difference between the .mktoText and .mktoString classes and where those should show up in the template or anything like that. 

Disha_Goyal6
Community Advisor
Disha_Goyal6Community AdvisorAccepted solution
Community Advisor
July 11, 2024

Hi @malcolmpr1, Just adding to the @dave_roberts  comment.

 

If you want to add HTML in mktoString variable then you have to define the variable in head like this

 <meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">

    M
    MalcolmPr1Author
    Level 1
    July 12, 2024

    @disha_goyal6 thanks for that it has allowed for the Var to be created and I have added like so.
    <div data-cvt-embed style="height:100%; width: 100%;">
    <script async src="${var1}"></script>
    </div>


      Terms & ConditionsAccessibility statement

      Loading footer...