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.
.png)