Overview
Landing pages and lead capture forms are a fundamental part of marketing and sales led websites. Fortunately Umbraco lends itself well to the needs of Marketers for a quick turn around without the need for developers to get involved in the creation of new landing pages. In this first article in a series exploring areas of common practice in Umbraco, Matt and Paul investigate ways to create landing pages and lead capture forms in Umbraco.
Series Overview
This series of articles is driven by our interest in exploring some of the many diverse ways that Umbraco solutions are built. There are always many ways to approach a problem in a flexible system like Umbraco, and while HQ publish in their training there is little in the way of established best practices. With this in mind we want to design and discuss, what we'll call common practices and discuss this with a variety of reviews from across the community.
The plan is to write four articles that explore four common use cases for Umbraco, and encourage a variety of devs produce example solutions to some fictitious client briefs. While the briefs are made up, they are based on the author’s experience of working with clients, establishing their needs and identifying solutions in Umbraco.
The intent is a completely positive experience where we discover different ways of approaching problems that Umbraco typically solves. We're not establishing "Best Practice" and we're not critical of the work, instead we discuss the merits of different approaches.
Series Rules
As the series is focusing on Umbraco, that has to feature in the solution, and we want to focus on the latest version (In the case of this article we used 8.7 as that was the current version at the time we started dev). Also the solutions we develop will be open source, and will make use of packages and components that are open source, or for which we're properly licensed.
Brief
Client is a Head of Digital for a SaaS software company, whose product is a bookkeeping app that is targeted at small businesses globally. She wants to gather marketing qualified leads, through a campaign of whitepapers aimed at her target audience:
- owner-managers of small businesses who undertake the bookkeeping activities for their business;
- Non-finance trained administrators who undertake bookkeeping activities.
The whitepapers will be converted from Word or Powerpoint docs to PDFs.
The client wants to be able to build landing pages, which are in keeping with the brand of the company's website, but with very little visual clutter. She wants to be able to communicate why people should download the whitepaper, as a minimum using paragraphs of copy, but ideally with images and possibly video and provide a lead capture form.
She wants to be able to edit the content of the form. Ideally if a user has submitted a form previously they shouldn’t have to re-enter their details, it would be great if the form also progressively enhanced, adding more fields the more times the user submits a form.
Form content should be persisted in a database somehow. Ideally to the Client’s CRM system. It should also track the utm_ parameters so that they can track campaign conversions. Google Analytics should also track conversions.
End users should only retrieve the content if they have submitted a valid email address.
Non-functional Requirements
- The Client has their main site on Umbraco 8.7, and this site must use that.
- Lead Capture forms must be GDPR compliant.
Why Investigate Landing Pages?
In our experience many marketing and sales lead websites want to have the ability to create simple, outcome focused pages that flexibly enable marketers to campaign lead pages.
What is a Landing Page?
In broad terms a landing page is any page that has been optimised to achieve targeted goals such as marketing or sales goals. It could be a homepage or other page within your website, although for many people a landing page is a web page which is often disconnected from the rest of your website’s navigation which is the target of paid advertising campaigns the goal of which is to increase conversion.
In the context of the rest of this article when we talk about a landing page we mean a highly focused webpage which is used to drive visitors to undertake a very specific action, such as sign-up to a newsletter, to fill in a form to download a piece of content, book a demo, sign up to a trial or buy a single product.
These pages are often used in marketing sites to drive marketing qualified leads, and on e-commerce sites to drive sales of individual products. Landing pages are often used as the target of paid-for adverts, having been optimised for conversion, and so making best use of scarce ad-spend.
While most marketing sites facilitate easy navigation around the site with menus and mega footers to encourage the serendipitous discovery that keeps people on a site, landing pages are much more single minded, focusing on a single goal.
What Makes a Good Landing Page?
There’s no bible on what constitutes a good landing page, what’s important is that when the rubber hits the road that it achieves its business goals, so having a tool that makes it easy to manage your landing pages is important.
That being said, there’s a few things that are important. Having a template which has consistency of visual design with your brand and the rest of your digital marketing assets is important, to avoid the negative effect on conversion of doubt in the mind of visitors as to the authenticity of your site. Integration with your CRM package can be useful, to enable you to undertake targeted campaigns with the leads you generate. Ensuring a speedy page load, which is responsive across devices will ensure higher conversions and better organic SEO rankings.
What Makes a Good Landing Page Builder?
For those marketers without access to developer resources, or who want to be able to independently create landing pages then a good landing page builder can enable them to meet their goals.
According to G2Crowd the key factors that make an effective landing page builder are:
- Library of landing page templates - with the industry leaders having extensive libraries of templates.
- Advanced customisation - enabling more technically savvy editors to customer elements of CSS and even JavaScript built into templates.
- Media library - and even integration with the leading stock photography sites.
- A/B testing that enables marketers to test various versions of a landing page to ensure maximum conversion.
- Analytics - either native analytics or integration with analytics packages.
- Integration - with other elements of MarTech tools.
Category Leading Landing Page Builders
According to user surveys on G2Crowd the leaders in the Landing Page builder category are HubSpot, MailChimp, Click Funnels and Unbounce. Of course there are substantial differences between them in cost, with a landing page builder in HubSpot coming out at ~£400 per year plus onboarding costs.
[Paul] In my experience I found the exercise of building a template in Unbounce to be substantially easier than HubSpot, with a more professional looking outcome.
Can Umbraco Be Used As a Landing Page Builder?
When considering the key features of a landing page builder, Umbraco stands up well to scrutiny.
Of course, Umbraco features a basic Media library, integrates well with Google Analytics, and depending on how you go about building your landing page if you use the Rich Text Editor then it supports editing styles and JavaScript in the Edit Source button if Tiny MCE.
Integration with other MarTech tools is arguably one of the most powerful features of Umbraco. Out of the box there is lined integration, but being built using .NET framework there are few tools that Umbraco can't be extended to integrate with. Plus if you invest in a €99 license for Umbraco Forms then it includes workflows which easily post to CRM APIs without any developer involvement.
AB testing in Umbraco is a subject that was recently covered in a Skrift article. A license for uMarketingSuite gives powerful AB and multivariate testing from inside Umbraco.
We think there are some real benefits of building landing Pages in Umbraco as opposed to a Landing Page Building Tool, including:
- Ease of editing - Umbraco makes it incredibly easy to build content, and with features such as the new Block List Editor in Umbraco 8.7 enabling Editors to create complex but well structured grid based pages is much simpler that other CMS tools such as Wordpress and compares favourably with market leading Landing Page Builders such as Unbounce.
- Familiarity - if your entire site is built using Umbraco, then using it to build landing pages is a logical extension, as the familiar interface reduces the cognitive load on new editors.
- Control over brand - while Umbraco is well known for how it enables extremely flexible designs by not getting in the way of the design process, it is also conversely extremely good at controlling brand. A well built set of Document Types and Templates in Umbraco can be both completely bespoke to the client's brand, but also a strong controlling force to constrain landing pages that follow brand guidelines.
That being said, Umbraco does require more effort from developers for it to be considered a contender with best of breed Landing Page Building tools.
A poorly built set of Umbraco Document Types and Templates, by which we mean ones with cumbersome controls and poorly thought through Editor Experience, can also frustrate experienced Marketers who want more flexibility. (Although it's worth noting that for as many sites as we've seen frustrating experienced editors by being constrained, we've also seen many which overwhelm inexperienced editors by providing too much flexibility).
Umbraco also fails to match the leading Lead Page Builders through the lack of WYSIWYG editing of content. In both Unbounce and HubSpot it's possible to edit content and see how it will lay out on the final site. This is improving with the Block List Editor where realistic previews of content are achievable - as you'll see in our demo shortly.
Demo Solution
From the brief outlined above, Paul designed and built a landing page template, and Matt built the Umbraco back end using Umbraco Cloud for hosting purposes. The demo makes use of Block List Editor to make a flexible landing page editing experience, and Umbraco Forms for capturing leads.
The Solution is available for review in Github, and is mainly Open Source - with the exception of Tailwind UI and Forms. (Read more about using the demo below).
Github repo for solution: https://github.com/carbonsixdigital/skrift-landing-pages
UCloud Project: https://umbracocloudskrift.s1.umbraco.io
Front-end Design and Build
[Paul] I was really keen as part of this demo to learn a new front end framework. Having used the Vendr Checkout package by Matt Brailsford I was interested in learning more about Tailwind CSS.
I was keen when designing some outline templates to build something responsive with modern design. This is one of the points where we diverged from using Open Source - I chose to use Tailwind UI to design the front end.
It was really interesting that with very little effort, I was able to assemble a series of front end grid based components which presented a tidy but flexible landing page template in Umbraco.
Figure 1: Draft template design using Tailwind UI
Back-end Build
[Matthew] One of the goals for the approach was to create a visual experience for the editor, that allowed them to create the content they need without being over complicated.
Before 8.7 I would have used a combination of the Doc type grid editor and the grid to achieve this. With the release of the block list editor in 8.7 I chose to use that instead in order to future proof the solution, although the previews do add a maintenance overhead. I believe the results are worth it.
I chose to split the page into a hero and a body content block list that ensured the hero was always the first block in the page whilst allowing for future hero layouts to be created, without mixing them in with body content choices.
Using the blocks preview feature did have its learning curve, and I had a few challenges especially in creating previews.
For example, In order to render the form in the hero (for preview in the backend) I had to look through the Umbraco forms JavaScript code to find how this was done. Those not familiar with AngularJS and the Umbraco Backoffice code may struggle to get the results they want.
As well as rich previews in the back end, the new Block List Editor also provides the ability to enable editors to inline edit content. On the rich content block I did attempt to make that block inline editable, however I couldn't work out how to load the rich text editor, this would have been a clean editor experience but would have also made that block unique. It is relatively easy to make simple text fields inline editable (such as Tag Line, in Figure 4 below), but more complex editors may not work inline.
I also chose to load the CSS using a package.manifest instead of the block lists CSS include feature this was due to not having the CSS split into those blocks.
An additional challenge was the Tailwind UI HTML was for the hero block, the statics had classes on paragraphs and anchor tags. I chose to use the Rich Text Editor for this section of content as it was the best fit for managing the content. However, I didn't want the editor to have to apply a style to everything manually, and adding classes to an anchor tag directly is unreliable at best with tinyMCE.
Instead I created an extension method using Html Agility Pack that allowed me to apply styles based on CSS selectors.
HeroBlock.cshtml
content.FormTerms
.ApplyClass("//p", "text-xs leading-5 text-gray-500")
.ApplyClass("//a", "font-medium text-gray-900 hover:underline")
HtmlStringExtensions.cs
public static class HtmlStringExtensions
{
public static IHtmlString ApplyClass(this IHtmlString html, string selector, string classes)
{
var htmlString = html?.ToString();
if (string.IsNullOrWhiteSpace(htmlString))
{
return new HtmlString(htmlString);
}
var doc = new HtmlDocument();
doc.LoadHtml(htmlString);
var tags = doc.DocumentNode.SelectNodes(selector);
foreach (var tag in tags)
{
tag.AddClass(classes, false);
}
return new HtmlString(doc.DocumentNode.OuterHtml);
}
}
For the form I used Umbraco Forms in order for the editors to create a form that fits the landing page. It is a pretty simple form with only two fields, and the workflow was initially setup to store data in Umbraco Forms database. However, it would be a simple step to post this to a CRM system such as Hubspot or Salesforce via a custom workflow.
Figure 5: Building a simple lead capture form in Umbraco Forms
Meeting the Brief
For the most part, we feel that we met the brief. We’ve got a flexible grid based landing page builder, that has some great flexible grid components using the latest features in Umbraco 8. We’ve also got a lead capture form that is GDPR compliant out of the box, thanks to the GDPR features in Umbraco Forms.
Given that we both have day jobs, there were some features that we didn’t complete. For example while the form captures leads it doesn’t enable the download of the gated content, however, this could easily be achieved in Umbraco Forms by redirecting to a Thank You page where a media item could be downloaded. Also we weren’t able to extend the demo to include progressive enhancement of form fields.
Alternatives
Of course, there are a million ways to skin a cat so it’s worth considering alternatives.
Instead of using the Block List Editor we could have used any one the community/core editors.
- DocType Grid Editor by Soren Kotall
- Bento Editor by KØBEN Digital
- Perplex.ContentBlocks by Perplex
- Contentment by Lee Kelleher
The chief benefit of each of these is that they are available in older versions of Umbraco. However, there is something to be said about the value of using Editors that are in the core of Umbraco, as it can ease the path of future upgrades. Anyone that makes use of Stacked Content on v7 will be feeling the pain that comes from not being to upgrade to v8 without substantial effort to migrate content out of Stacked Content to an alternative.
Another alternative is Nested Content, which of course is now a core Editor. The main downside to using Nested Content would be the loss of previews, which can be invaluable to an editor, over save and preview’s generation time.
In the case of the lead capture forms, we could have used Formulate by Nicholas Westby. We’ve also used off Umbraco tools such as Hubspot or Marketo for managing form submissions (Figure 6, below, shows a Marketo Form embedding into an Umbraco lead capture page from a recent Carbon Six project).
Figure 6: Marketo Forms embedded into an Umbraco page
Reviews
In each of these Exploring articles, we look to get feedback from other devs in the community. In this first article, we got feedback from two active community members, Nik Rimmington, the Senior .NET Developer at SpinDogs, and Rheannon Lefever, a member of the Umbraco HQ training team.
Nik, spent some time reviewing the article, and solution and said:
“The solution is very clean, the use of the new block editor gives a very nice user experience although it is known that the development time of this (due to back office preview) takes a bit of extra work. Keeping things as simple as possible as well as giving flexibility is a tough balancing act and the solution demonstrates this well.”
In respect to areas of improvement to the solution, Nik said:
“At the time of my review, there were some outstanding tasks around Meta tags and social sharing meta tags (e.g. twitter card / Open Graph). If these landing pages need to have good SEO value then the introduction of Schema (preferably the JsonLD format) would be highly beneficial, but it is understood that some people don’t want Landing Pages index.”
And finally, considering how he would develop things differently he said:
“If I were to develop a solution to the problem I think I would have asked a bit more about what types of blocks the editor would want for the page. For example, FAQ, Images and Video.
In addition, the current “text” block would have two separate configuration options, a single column text block and a dual column text block.”
On this last point, Matt felt there was merit to both options. When building a block style grid editor it can come down to the simply the number of block styles available to the Editor. If there are a large number of block styles, then reducing the number and having a 1-col / 2-col block style that is flexible, versus two different blocks can simplify the editing experience.
When considering what she took away from the solution, Rheannon said:
“Excellent use of the block list to make modular components to build up the structure of the page. I see some descriptions on the properties where it makes sense to help guide the content editor. And there is even a custom view for the blocks to give the content editor a preview of what the frontend will look like without having to leave the backoffice. Everything looks so tight and polished, one can tell everything was thought out thoroughly, and there isn't a single thing that seems extraneous or unnecessary.”
She went on to offer a potential improvement to the editing experience:
“The only thing that I can think of that could add a bit more functionality for the content editor would be to add a settings model for the blocks so that the editor can make dynamic changes to the CSS, so that components can be resized, or given different colors, or whatever the editor would want/need to do. With that said, on the actual page that the structure and colors seem to be pretty set, so maybe that isn't totally needed for this case.”
Rheannon felt that Matthew’s solution was a very impressive and compact but powerful solution. From her point of view the solution represented best practice, saying:
“A lot can be done with a little, especially when it's all put together in a meaningful way as what’s done here. A lot has been done with just three block list editors, and with this kind of foundation, it'd be easy to continue adding onto it as necessary.”
Nik was also supportive of the solution, and felt that it had the potential to be the “next best practice”, and that it’s hard to suggest that a technology as new as the Block List Editor is current best practice.
Using the Demo
The demo produced by us was designed to be open source and reusable by the community, and has been shared in a repo. The only exception is the use of Tailwind UI and Umbraco Forms which are both proprietary and licensed. So to pick up and use the demo as is you will need to buy a license for Tailwind UI and Umbraco Forms.
Wrap up
We’re really pleased with what we’ve managed to achieve with this first Exploring article. Landing Pages and lead capture forms are such a fundamental part of many marketing and sales sites, and we’ve seen that these can be built very quickly and easily using the new Block List Editor.
While we’re both experienced Umbraco developers, the project took very little time to complete to its current form. The front end design and build in Tailwind UI took approximately 4-6 hours, most of which was spent learning how to build using Tailwind. Excluding the preview, the build of the back end solution took approximately 3 hours to build, which included learning how to build using the Block List Editor. The creation of the rich previews took an additional 5 hours, this was in large part finding a way to render the form.
We’d love to get your feedback on the brief and the solution that we built. Either comment below, talk to either Paul or Matt on Twitter, or on the Community Slack channel. We’ll try to collate any feedback and incorporate that into a follow article or blog post.
Thanks to the technical reviewers, Rheannon and Nik. Thanks also to Umbraco for providing a free license for Umbraco Cloud.