Marketo Guided Landing Page Template How-To’s #2: Add Modal Form Box

Marketo Guided Landing Page Template How-To’s #2: Add Modal Form Box

Part 2: Using Bootstrap to create “Hide-Away” (Modal) Form Boxes

If you’re just tuning in, it’s not too late – we’ve only just begun. You can catch the full article here: http://digitalpi.com/2016/02/marketo-guided-landing-page-template-how-tos – or- just grab the code below and dive right in! In this tutorial, we’ll be leveraging Bootstrap.js to add a Modal Form & Trigger to a Marketo Guided Landing Page template we created in the last session.

You can check out a LIVE DEMO here: http://info.digitalpi.com/Demo-Template.html

[toggle_content title=”View Starter Template Source Code”][code language=”html”]

<em>*Usage: In your Marketo Template Page, first erase all existing code. Copy and paste the code below into your page and click the Preview Draft button to view your template.*</em>

========== [ Copy Code Below This Line until the End Break ] ==========

<!DOCTYPE html>

<html>
<head>
<meta charset=”utf-8″>
<meta class=”mktoString” mktoName=”Variable 1″ id=”var1″ default=”This is a variable”>
<title></title>
<!– Bootstrap Quick-Start Stylesheet // Attribution: Hosted Bootstrap @ https://www.bootstrapcdn.com/ –>
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”>

<style>
body {background:#fff;}

#HeaderRow {
background-color:#ededed;
}

#Banner {
/* Set ‘Cut-Off’ Height of Banner Image */
max-height:400px;
/* Hide everything over ^ set height ^ */
overflow:hidden;
}
#BannerImg {
max-width:100%;
height:auto;
margin-top:15px;
}

#ContentBox {
background-color:#ededed;
margin-bottom:10px;
}

#FormContainer {
background-color:#dedede;
padding:10px;
}
#FooterRow {
background-color:#ededed;
padding-top:10px;
margin-top:15px;
}

</style>
</head>

<body>
<div class=”container-fluid”>
<!– Header –>
<div class=”row” id=”HeaderRow”>
<div class=”container”>
<div class=”col-xs-12″>
<div class=”mktoText” id=”Logo” mktoName=”Logo”>
<img src=”http://services.digital-pi.net/images/digital-pi-logo-no-margin.png” alt=”Digital-Pi Logo” />
</div>
</div>
</div>
</div>

<!– Banner –>
<div class=”row” id=”BannerRow”>
<div class=”container”>
<div class=”col-xs-12″ id=”Banner”>
<a href=”https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template”><img class=”mktoImg” id=”BannerImg” mktoName=”Banner Image” src=”http://info.digitalpi.com/rs/496-ECU-350/images/hero-image.png” alt=”Banner Image” /></a>
</div>
</div>
</div>

<!– Body –>
<div class=”row” id=”BodyRow”>
<div class=”container”>

<!– Left Column –>
<div class=”col-md-8″ id=”LeftCol”>
<div class=”mktoText” id=”LeftColumnTop” mktoName=”Left Column Top”>
<h3>Headline Row: Left Column</h3>
<p>Praesent porttitor malesuada ornare. Etiam pellentesque vitae risus in elementum. Vivamus ex sem, maximus in ligula vitae, dictum luctus felis. Etiam et rutrum mauris, congue hendrerit nisi. Aenean lorem sem, consequat sit amet diam ut, pellentesque aliquet ante. Ut egestas massa mi, nec condimentum ipsum suscipit non. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>

<!– Featured Content Box –>
<div class=”col-xs-12 mktoText” id=”ContentBox” mktoName=”Left Column Feature Box”>
<h4>Helpful Links – Marketo Docs</h4>
<p>Editing Mode – under Landing Pages in Design Studio (Guided vs Free-form) sample templates: <a href=”https://docs.marketo.com/display/DOCS/Guided+Landing+Page+Templates” target=”_blank”>https://docs.marketo.com/display/DOCS/Guided+Landing+Page+Templates</a> </p>
<p>For variables and code samples: <a href=”https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template” target=”_blank”>https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template</a> </p>
</div>
<div class=”mktoText” id=”LeftColumnBottom” mktoName=”Left Column Bottom”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse turpis justo, venenatis non diam ut, lobortis bibendum dui. Donec a eleifend justo. Suspendisse egestas elit urna, quis cursus sapien molestie id. Quisque molestie quam vel ex porta, eget pulvinar turpis cursus. Sed faucibus odio at euismod tempor. Nunc lacinia at risus at hendrerit. Quisque hendrerit vel nisi eget auctor. Nam eu dolor porttitor, vulputate neque non, pretium ipsum. Phasellus sed odio suscipit, semper nulla vel, luctus tellus.</p>
<p>Nunc vehicula diam nulla, sit amet viverra orci aliquet sodales. Nunc condimentum ligula pellentesque nunc tempus, eget finibus lectus tempus. Vivamus vel odio at ligula porta lacinia eget dapibus nunc. Quisque nec feugiat nibh, at euismod turpis. Praesent finibus risus mi, ut consequat ligula lacinia quis. Aenean pulvinar purus et justo eleifend, at convallis nulla iaculis. Pellentesque dapibus justo nisi, non fermentum erat condimentum in.</p>
</div>
</div>

<!– Right Column –>
<div class=”col-md-4″ id=”RightCol”>
<div class=”mktoText” id=”FormHeader” mktoName=”Form Header”>
<h3>Form Headline / Title:</h3>
</div>
<div class=”col-xs-12″ id=”FormContainer”>
<div class=”mktoForm” id=”Form” mktoName=”Form”>
<!– Insert Marketo Form into this div thru Page Editor –>
</div>
</div>
</div>

</div>
</div>

 

<!– Footer –>
<div class=”row” id=”FooterRow”>
<div class=”container”>
<div class=”col-xs-12 mktoText” id=”FooterContent” mktoName=”Footer Content”>
<p>&copy; Copyright 2016. Company Name.</p>
</div>
</div>
</div>
</div>

 

<!– Bootstrap Quick-Start js // Attribution: Hosted Bootstrap @ https://www.bootstrapcdn.com/ –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>

 

</body>
</html>

========== [ Copy Code Above This Line until the Top Break ] ==========

[/code]

[/toggle_content]

Here we’ll have a look via step-by-step tutorial at how to: Create a New Marketo Form; Add a Bootstrap Modal Box; Add Marketo Guided Tags to Bootstrap Resource Code

Getting Started:

1. Create a New Marketo Form to use in your Landing Page & Modal:

Log into your Marketo instance and navigate to the Design Studio. In the right column (top) click “New” and in the dropdown menu, select “New Form” (see below). You’ll be prompted with a pop-up window to add a folder, name and description (optional) for your form. I’ve named my form: * Demo Form (the * makes it appear at the top of my list) but you can choose any name you’d like. Once you’ve named your Form and chosen a folder to house it, click “CREATE” to get started.

ScreenShots-Marketo-1-AddForm

For now, you don’t need to do anything special with the form, so you can click “FINISH” then “APPROVE AND CLOSE” in the top right to skip thru the setup steps for now. We’ll come back to editing & styling a form later for now, we’ll just need something to test with.

 

2. Add a Bootstrap Modal Box to House a “Hide-Away” Marketo Form:

Find the template you created in the last tutorial and click the “Edit Draft” tab to open the HTML Editor for your template. If you’re just getting started, here’s some more info on the setup. We’re going to grab-and-add some default code for a modal then tailor that into our Marketo Page.

To begin:

Open a new tab / window. We’ll start by adding some jQuery to our page (that’s right YOU are gonna use jQuery!) – but we’ll keep it simple as the good folks at Bootstrap have made this tremendously easy for us. You can find starter files, etc. for the Bootstrap framework and more, but for now, we’re looking for the jQuery script that’s going to make our Modal “work”.
Navigate to: http://getbootstrap.com/getting-started/#template – it’ll jump you to the Basic Template section which contains the jquery link we’ll want to be working with. Look toward the bottom of the code box and highlight > copy the first comment and script below the ‘Hello, world!’ line.

ScreenShots-Marketo-2c-Code

Next, go back to your Template Page Editor (code view) and in the copied code just after the last
<div> and before the Bootstrap Quick-Start js. **NOTE: It is important to put this before (above) the bootstrap.min.js file in the code **

ScreenShots-Marketo-2d-Code

And just like that – you’ve added jQuery to your Landing Page. High Five! Now, we’ll add an HTML structure to leverage this new script on our page.

Open a new tab / window. We’ll be using some resource code which can be found at: http://getbootstrap.com/javascript/#live-demo. On the right side of the Live Demo EXAMPLE box (code section), click the “Copy” button to copy the HTML code for your modal.

ScreenShots-Marketo-2-AddModal

Next, go back to your Template Page Editor (code view) and paste in the copied code just after the Right Column’s opening tag:</div>

[toggle_content title=”View Code”]

<!– Right Column –>
<div class=”col-md-4″ id=”RightCol”>
{{ Insert Copied Modal HTML Here }}
[/toggle_content]

To get the styles to line-up with our template, we’ll add an “h1” class to the button (which gives it similar positioning properties as our headline in the left column and keeps them ‘even’). You could alternately add: style=”margin-top:20px;” inline to accomplish the same purpose.

ScreenShots-Marketo-2b-Code

 

Checkpoint!

Once you’ve got the button class updated, click “Preview Draft” in the top right corner (Marketo Template HTML-view) to see your progress. If everything went as-planned, your screen should look like this:

ScreenShots-Marketo-3-Checkpoint

 

 

3. Add Marketo Guided Tags to Bootstrap Resource Code:

In order to get our new Modal elements to be editable in Marketo, we’ve got to add some Guided Tags to the code to let Marketo know where we’d like to add different elements. There are 3 main areas to address: The Modal Title; The Modal Body; The Modal Footer.

We’ll begin by wrapping the Modal Title in a <div> and assigning the Marketo attributes for an Editable Text Section (for more on elements: Marketo Docs) – add this inside the “modal-header” div below the button code (else the close button is part of the editable area, and we don’t want that):

[toggle_content title=”View Code”]

<div class=”modal-header”><button class=”close” type=”button” data-dismiss=”modal”>×</button></div>
<div id=”ModalTitle” class=”mktoText”>
<h4 id=”myModalLabel” class=”modal-title”>Modal title</h4>
</div>
</div>

[/toggle_content]

** PRO TIP: The id= attribute cannot have spaces or special characters; The mktoName= attribute can have spaces and special characters. The ‘mktoName’ is the name that’ll show up in the Page Editor for your element, so be descriptive (i.e. not Heading 16).**

Next, we’ll add a form element to the body of the modal. You’ll want to replace the “…” with this code:

[toggle_content title=”View Code”]

<div class=”modal-body”>
<div id=”ModalForm” class=”mktoForm”><!– insert Form here in page Editor — ></div>
</div>

[/toggle_content]

Finally, just in case we’ll want to edit the Close and Save Changes buttons in the footer of the modal, we’ll wrap those (just like the first) in a mktoText div – inside the “modal-footer” div:

[toggle_content title=”View Code”]
<div class=”modal-footer”>
<div id=”ModalFooter” class=”mktoText”><button class=”btn btn-default” type=”button” data-dismiss=”modal”>Close</button>
<button class=”btn btn-primary” type=”button”>Save changes</button></div>
</div>
[/toggle_content]

In the end, your code should look like this:

ScreenShots-Marketo-3a-Code

Save your changes and approve the template. You can now create a new Landing Page using this template and add a Form into the Modal Form element in the Landing Page Editor. For more information on creating a Landing Page or adding your form, check out the Marketo documentation here: https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page

dave@digitalpi.com

Dave specializes in design & development and has been crafting and refining systems of communication, workflow and experience for the last decade. Whenever it needs to be beautified, optimized, Marketo-tized or just broken apart and put back together, Dave plays an instrumental role in handling the technical details of form and function in development.

LEAVE A COMMENT