SOLVED

Landing Page Insert Elements Problem

Go to solution
Anonymous
Not applicable

Landing Page Insert Elements Problem

I have a landing page template with the code:
<div id="mktContentWrapper" class="mktEditable">
      <!-- Base of Landing Page Content -->
</div>

Inserted Elements end up in innerWrapDiv though and not mktContentWrapper.

How do I get elements to go into the mktContentWrapper div?
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Landing Page Insert Elements Problem

Move the line:

<?php echo $mContext['bodyElements']; ?>

after:

<div id="mktContentWrapper" class="mktEditable">

That should fix it. That tag initializes Marketo's rendering engine, so you have to have it within the element you wish to use as the container.

View solution in original post

5 REPLIES 5
Anonymous
Not applicable

Re: Landing Page Insert Elements Problem

where is your "bodyelements" php tag located? Care to share the code?
Anonymous
Not applicable

Re: Landing Page Insert Elements Problem

Hi Jason,

$mContext['bodyElements']; appears on line 173 just after innerWrapDiv.

Below is the complete code from my template. Dragging any element into #mktContentWrapper.mktEditable, then previewing the page and viewing the resulting html source code, shows the element has been placed within innerWrapDiv and outside of mktContentWrapper.

Since innerWrapDiv is not editable, I don't understand why it is accepts edits and mktContentWrapper does not accept edits.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<!-- SYSTEM CSS - DO NOT EDIT -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/mktLPSupport.css" />
<style type="text/css">
#bodyId {
  background: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
 
div#outerWrapDiv {
  position: relative;
  height: 100%;
  width: 100%;
}
 
div#innerWrapDiv {
  position: relative;
  background: #ffffff;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 0px;
  text-align: left;
}
 
</style>
 
<!-- START TEMPLATE CSS - EDIT THIS SECTION -->
 
<style>
/* Note: You can also change these in the specific Landing Pages*/
 
/* Width of Full Page */
div#innerWrapDiv {
    background: red;
    width: 100%;
  }
 
/* Main Content Area - Controls height of page */
div#mktContent {
  background: pink;
  position: relative;
  width: 100%; }
 
div#mktContentWrapper {
    background: green;
    margin: 0 auto;
    height: 650px;
    width: 960px;
    outline: 1px solid red;
}
 
 
 
/* Start fancy button */
 
div.buttonSubmit {
  position:relative;
  float:left;
}
 
 
div.buttonSubmit input, div.buttonSubmit span {
  background-image:url(https://www.marketo.com/buttons/button-submit10.gif); /* change button and path to correct customer partition */
  background-position:right 0px;
  background-repeat:no-repeat;
  border:0px none;
  color:#FFFFFF;
  cursor:pointer;
  float:left;
  font-weight:bold;
  height:36px;
  margin:0px;
  padding:0px 15px 2px;
  position:relative;
  z-index:5;
}
div.buttonSubmit span {
  background-position:left -36px;
  left:0px;
  padding:0px;
  position:absolute;
  top:0px;
  width:4px;
  z-index:10;
}
div.buttonSubmit input {
  width:auto;
  padding-left: 10px !important;
  padding-right: 10px !important;
 
}
 
#mktFrmSubmit{
    color: #FFFFFF !important;
}
 
div.buttonSubmit:hover input {  background-position: right -72px;}
div.buttonSubmit:hover span {  background-position: left -108px;}
 
#mktFrmReset {
  display:none;
}
 
/* end fancy button */
 
 
</style>
 
<!-- END TEMPLATE CSS -->
 
 
 
 
 
<!-- SYSTEM JAVASCRIPT - DO NOT EDIT -->
<script type="text/javascript">
function fieldValidate(field) {
  /* call Mkto.setError(field, message) and return false to mark a field value invalid */
  /* return 'skip' to bypass the built-in validations */
  return true;
}
function getRequiredFieldMessage(domElement, label) {
  return "This field is required";
}
function getTelephoneInvalidMessage(domElement, label) {
  return "Please enter a valid telephone number";
}
function getEmailInvalidMessage(domElement, label) {
  return "Please enter a valid email address";
}
</script>
 
 
<!-- Jquery for fancy things!-->
 
<script language="JavaScript" src="https://app.marketo.com/js/public/jquery-latest.min.js" type="text/javascript"></script>
   <script>
    // to make fancy buttons.  Uses noConflict just in case
     var $jQ = jQuery.noConflict();
 
     // Use jQuery via $j(...)
     $jQ(document).ready(function(){
 
       $jQ("#mktFrmSubmit").wrap("<div class='buttonSubmit'></div>");
       $jQ(".buttonSubmit").prepend("<span></span>");
 
     });
   </script>
 
 
 
 
 
 
<!-- SYSTEM INCLUDES - DO NOT EDIT -->
<?php echo $mContext['headElements']; ?>
</head>
<body id="bodyId" class="mktEditable" align="center" <?php echo $mContext['bodyAttributes'] ?>>
<div id="outerWrapDiv" class="mktEditable">
<div id="innerWrapDiv">
<?php echo $mContext['bodyElements']; ?>
 
 
 
 
<!-- START TEMPLATE HTML - EDIT THIS SECTION -->
 
<div id="mktContent">
<div id="mktContentWrapper" class="mktEditable">
      <!-- Base of Landing Page Content -->
</div>
</div>
 
 
<!-- END TEMPLATE HTML -->
 
 
 
 
<!-- SYSTEM FOOTER - DO NOT EDIT -->
</div>
</div>
<?php echo $mContext['endElements']; ?>
 
 
 
<!-- GOOGLE ANALYTICS.  ENTER YOUR CODE and UNCOMMENT block -->
<!--
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "YOURCODE";
urchinTracker();
</script>
-->
 
</body>
</html>
Anonymous
Not applicable

Re: Landing Page Insert Elements Problem

Move the line:

<?php echo $mContext['bodyElements']; ?>

after:

<div id="mktContentWrapper" class="mktEditable">

That should fix it. That tag initializes Marketo's rendering engine, so you have to have it within the element you wish to use as the container.
Anonymous
Not applicable

Re: Landing Page Insert Elements Problem

Thanks Jason!
Anonymous
Not applicable

Re: Landing Page Insert Elements Problem

How is this possible when you can't include PHP in your templates?

I've tried adding <?php echo $mContext['bodyElements']; ?> in the template editor, but it throws errors saying PHP is not allowed.