The task at hand – “develop a lading page containg a form, tracking, and on form submission redirect the user to a “thank you” page
ReallyB2B
About Econsultancy
“Since 1999, we have guided businesses and individuals to reengineer themselves through our thought leadership, training and digital transformation. With offices in London and New York, we are a global team with an international mindset. We provide companies and teams with all the essential resources to develop their modern marketing capabilities, validate their decisions and demystify information around digital, marketing and ecommerce. We show you what great looks like. Then we get you there.”
This was my first development project using the Unbounce page builder, which at first looked pretty straight forward but unfortunately, although it is fairly simple to use once you get the hang of it at first it can be misleading and by misleading I mean… how do you organise your HTML?
Development
For this, I was a bit in the dark, mainly because I never used Unbounce before therefore given that the brief only stated “this build should be hosted on Unbounce”, I firstly build HTML for it and went on to deploy pieces of my HTML codes into it.
Unexpected problems
After looking through a few resources that mostly state that once you have your HTML build you can simply copy and paste it into sections of your Unbounce page, I did that…. and the result? Well, the result was a nightmare given the following reasons:
- I created HTML sections and Unbounce already have its own which will certainly overide your code
- Unbouce sets max-width atributes to its pages no matter if you are creating from scratc or not
- My HTML was responsive and It completely destroy it becuase again it uses its own sections/row classes
- My HTML covered large, medium, and small devices while Unbounce sets its own tags and detroy my code in every way it also only offers the ability for a user to fit their content using drag and drop for desktop and mobile and not to mention if you are new to it you would notice that everytime you have a text aligned to the left on desktop and you try to align center on mobile using their tool, this will also align center on desktop
- It is a great deal to make a medium size page such as mine responsive using its tags
Although I got it in the end, I have to confess I would not recommend anyone using external stylesheets. However, it is quite friendly, and I was able to import external fonts without any issues.
I ended up not using none of my HTML and CSS simply because Unbounce overrode a lot of my code therefore the only solution was to strip it out.
This is my attempt in fixing some of the issues I was having with form field
<style>
@import url("https://use.typekit.net/ruv3zbg.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&display=swap');
html, body, .lp-pom-body {
font-family: 'Montserrat', sans-serif !important;
}
#lp-pom-form-121 .lp-pom-form-field {
width: calc(20% - 18px);
left: 0;
margin: 0 9px;
display: inline-block;
position: relative;
}
#lp-pom-form-121 .lp-pom-form-field .single {
width: 100%;
}
#container_contact_number {
top: 0;
}
@media screen and (max-width: 600px) {
.mob-text-center {text-align: center;}
#lp-pom-form-121 .lp-pom-form-field {
width: 280px;
left: 0;
display: block;
position: absolute;
}
#container_contact_number {
top: 356px !important;
}
}
</style>
This is the HTML build
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Econsultancy</title>
</head>
<style>
.bg-black {background: #000000;}
.btn-red {background: #E73448; color: #ffffff;}
.btn-red:hover {background: #ef5264; color: #ffffff;}
.fw-600 {font-weight: 600;}
.fs-08 {font-size: 0.8rem;}
.bg-grey {background: #ededed;}
.text-red {color: #E73448; font-weight: bold;}
footer {background: #3b3b3b;}
.hero-bg {
background: url("images/fire.png");
background-size: cover;
background-position: 0px 0px;
}
</style>
<body>
<header>
<div class="container">
<div class="d-flex justify-content-center py-2">
<img src="images/logo.png">
</div>
</div>
<div class="row bg-black hero-bg m-0">
<div class="container col-xxl-8 px-4 py-5">
<div class="row align-items-center g-5 py-5">
<!--
<div class="col-10 col-sm-8 col-lg-6">
<img src="https://unbounce.com/photos/SmartBuilder_Image.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div>
-->
<div class="col-lg-6">
<h1 class="display-1 fw-bold lh-1 text-white mb-5">Unlock <br>your teams’ <br>potential</h1>
<div class="d-grid d-md-flex justify-content-md-start">
<a href="#getYourCode" class="btn btn-red btn-lg px-4">Get your code</a>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container px-4 py-5">
<div class="row align-items-center text-center">
<p class="text-center fw-600 h4 px-3 pt-0 pb-5">
You’re doing everything you can to improve your business’ performance – but perhaps your methods aren’t working. So, what’s standing in your way?
</p>
<div class="col-lg-4">
<img class="mb-3" src="images/89.png">
<p class="px-5">Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
</div>
<div class="col-lg-4">
<img class="mb-3" src="images/92.png">
<p class="px-5">Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
</div>
<div class="col-lg-4">
<img class="mb-3" src="images/28.png">
<p class="px-5">Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
</div>
<p class="text-center fs-08 pt-4">
<span class="underline">Source:</span> <sup>1</sup>How Marketers Learn, Econsultancy, 2019
</p>
</div>
</div>
<div class="bg-grey m-0" id="getYourCode">
<div class="container px-4 py-5">
<div class="row align-items-center text-center">
<p class="fw-600 h4 px-3 pt-0 pb-4">
So, what’s the most efficient and effective way to maximise your employees’ digital, marketing and ecommerce skillsets and keep up with your rapidly evolving customer needs?
</p>
<p>
To find out, simply fill in the form below, and we’ll send you a unique code that you can use to open your box, <br class="no-mob"> and unlock your teams’ hidden talents.
</p>
</div>
<div class="row m-0 d-block text-center pt-4">
<form class="row gy-2 gx-3 align-items-center d-inline-block">
<div class="col-auto d-inline-block text-start px-2">
<label for="autoSizingInput">Name<span class="text-red">*</span></label>
<input type="text" class="form-control form-control-lg" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto d-inline-block text-start px-2">
<label for="autoSizingInput">Company <span class="text-red">*</span></label>
<input type="text" class="form-control form-control-lg" id="autoSizingInput" placeholder="Company">
</div>
<div class="col-auto d-inline-block text-start px-2">
<label for="autoSizingInput">Email address <span class="text-red">*</span></label>
<input type="text" class="form-control form-control-lg" id="autoSizingInput" placeholder="Email address">
</div>
<div class="col-auto d-inline-block text-start px-2">
<label for="autoSizingInput">Contact number <span class="text-red">*</span></label>
<input type="text" class="form-control form-control-lg" id="autoSizingInput" placeholder="Contact number">
</div>
<div class="row m-0 pt-4">
<div class="col text-center">
<button type="submit" class="btn btn-red btn-lg px-4">Get your code</button>
</div>
</div>
</form>
</div>
</div>
</div>
<footer class="py-5 d-block">
<div class="row m-0">
<div class="d-inline-block">
<div class="container">
<div class="row text-white">
<div class="col-lg-6">
<p class="text-start fs-08">
Copyright © 2021 Centaur Media plc and / or its subsidiaries and licensors. All rights reserved.
</p>
</div>
<div class="col-lg-6">
<p class="text-end fs-08">
Xeim Limited, Registered in England and Wales with number 05243851 <br>Registered office at Econsultancy, Floor M, 10 York Road, London, SE1 7ND
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</main>
</body>
</html>