Creating Custom Landing Page Templates with Marketo Forms in Drupal 8
Personalized landing pages are a must for higher user engagement and conversion. As a marketer, and especially as a website manager, you would want to be able to create and edit personalized landing pages with least dependency on a web developer.
If you want to create personalized landing pages with multiple customization options ranging from creating a basic landing page to editing the banner, page layout, header, content, footer and Marketo form, you’ll need a custom landing page template, which you can edit easily. In this article, we’re sharing how to create the template in a Drupal 8 website.
Steps for Creating a Custom Landing Page Template
1. Create a Landing Page Content Type.
2. Create custom fields as per your requirements. Here, I’m showing only four fields for an understanding of how it works in the backend. Under the Landing Page Content Type, you can see Title, Background Selection, Background Color, Banner Background Image, and Banner Title.
3. Click on Manage Display and select a layout for the landing page. By default, it is none; you can change it from the drop-down menu.
4. To override the page template, go to the Current Theme folder. The folder structure is project_name/themes/current_theme/templates/page.html.twig
5. For creating custom page, you need to override page.html.twig. You want to create a custom page template, so copy page.html.twig and create another page template page–(content type).html.twig. For example, if your content type is Landing Page, then page name will be page–landing_page.html.twig. From this page, you can change the header and the footer, which will be different for all other website pages.
6. For content personalization on this page, copy node.html.twig template and create another template node–(content_type).html.twig. Now, fetch data on twig template by using twig variables. For example, if you want to show Title, Background Selection, Background Color, Banner Background Image on the twig template, use the following code:
For Content Personalization
{ {title}}
{% set bgcolor = content.field_background_color|render|striptags|trim %}
{% set backgroundimg = content.field_background_image|render|striptags|trim %}
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12 banner” style=”background-color:{{ bgcolor }};”>
<div class=”innercontainer”>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12 nopad”>
<h1>{{ content.field_banner_title }}</h1>
</div>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12 nopad”>
<hr align=”left”>
</div>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12 nopad”>
{{ content.field_banner_text }}
</div>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12 nopad”>
{{ backgroundimg }}
</div>
</div>
</div>
7. To add a Marketo form on this page template, use this code:
To add a Marketo Form
<div class=”thanksmsg”>
<form id=”mktoForm_2468″> </form>
</div>
<script>MktoForms2.loadForm(“//app-sjf.marketo.com”, “674-SGN-667″, 2468, function(form){
// Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
// Get the form’s jQuery element and hide it
form.getFormElem().hide();
jQuery(‘.thanksmsg’).html(‘<span style=”display:block; margin:0 auto; max-width:271px;”>Thank you your interest in our Channel Management Maturity Assessment. We will contact you soon.<br/><br/>Learn more about our <a href=”#channel”>Channel Management Solutions</a></span>’);
// Return false to prevent the submission handler from taking the lead to the follow up url
return false;
});
});</script>
Using this template, you can create multiple landing pages with different Marketo forms on all of them. You can also personalize all the pages with different banner/background images, content, and footer layout.