How to Create a Higher Converting Form Landing Page

Landing pages are kind of like snowflakes – no two are exactly the same.

Though there are plenty of similarities between landing pages, and for good reason. There are certain strategies that simply do better for conversions, and so almost every page you see has some version of the following: a headline, explanatory text, and a call to action.

Why? Well, because these elements work.

But the exact application of each of these elements varies, with factors including things like audience, purpose, intent, angle, focus, industry, niche, and overall value.

In other words, one size doesn’t fit all. In fact, the way you blend these elements and factors together can make or break the effectiveness of your page.

Here’s what you need to know to create the most effective form landing page possible.

Dos and Don’ts for High Conversions

The average landing page conversion rate is around 2-3%, but the top 25% are converting at 5% or higher, with some reaching 10-11% or more. Here are some do’s and don’ts to follow if you want to see your numbers cross above the 5% threshold.

DO Include a Powerful Headline

It may feel cliché to include a catchy headline, but think of it as your first CTA. The headline is where everything begins – where your audience decides if they’re going to stick around or not, whether you’re interesting or boring.

But it’s not just there to grab attention, it’s there to inform. It should be short (preferably 10 words or less) and to the point, and your audience should think, “Oh wow, tell me more!” by the time they have finished reading it.

headline

(Neil Patel over at Quicksprout has some suggestions for writing powerful headlines here.)

DO Include a Persuasive Subheadline

If the headline is your “oh wow”, your subheadline is your “let me hear more”. Your audience should be able to say, “This is why this page exists” by the time they finish reading it.

You should position your subheadline underneath the header (obviously), and it should be more persuasive than your headline copy. You can also give a little more depth and detail, as it can be longer than your headline.

DO Include Explanatory Text

It doesn’t have to be paragraphs upon paragraphs, but even something like a little extra wording to clarify the header/subhead can go a long way, especially if you get creative with the latter.

explanation

You also want to make sure that if you do include longer text, it explains the benefits that the user will receive if they fill out your form or otherwise engage with the CTA. They should be able to answer the question, “This is what I get out of the deal.”

DON’T Spend Too Much Time Explaining

That being said, you don’t have to give your audience the entire history of your company or really any more information than they absolutely need. Too much text can be visually overwhelming and make people think that your offering is more complex than it is.

badlandingpage

No. Don’t do this.

DO Include Large, Relevant Images

Did you know that the brain processes images 60,000 times faster than text? Now you do.

The images you use are just as important as your text, if not more so. They should be large, high quality, and relevant to your product or service. Like a headline, the primary goal of your image is to grab attention and help your audience relate to your product or service.

DO Include Visual Cues

Having a picture of a smiling person may do a good job of commutating how your customers will feel when they fill out your form and receive their product or service (or free eBook, etc.). But if you want to be more effective, use other visual cues to help users out.

Arrows are one of the most effective tools since they can easily guide an eye line to the right place (e.g. your CTA). You can make them noticeable:

arrows01

Or keep them subtle:

arrows02

DON’T Forget Smaller Visual Cues

If you’re a fan of the subtle route, there are plenty of ways to incorporate tiny visual cues that can be high converting without needing to draw a big red circle around your CTA.

Velaro, for example, uses a small PDF symbol on their image (above their form) to signal to the user that something can be downloaded and in what format it will arrive.

velaro-landing-page-example-1

Instead of using an image of a person or scenery, Single Grain uses the elements in the background to point toward the form itself. The average user wouldn’t even give it a second thought. (They also include a small animation that makes the CTA button wiggle).

singlegrain-homepage-form

DO Include a Demo or Test Drive

Some forms are dedicated to letting users sign up for a demo of their product, but some regular forms include a demo video or a “see how it works” link on their landing pages to help users decide if they want to sign up before they absolutely need to commit.

“Try before you buy” can be helpful for new companies that don’t have significant reputation in their chosen industry.

DON’T Forget Your Value Proposition

Finally, your value proposition is the most important part of your landing page. Another word for it would be your CTA, but unlike the “submit” CTA on your form, this one comes with more of an invitation.

Your value proposition can be spread among any of the above elements. In fact, it should be in all of the elements – in your explanatory text, in your buttons, in your images, and in your headline.

By the time they scroll to the very bottom of your landing page, your audience should know exactly why they’re there, what they’re going to get, and how they can get it.

Final Thoughts

Creating a killer form is one thing, but creating a landing page that truly converts (to put that form on) is another animal entirely.

If you want to see higher conversion rates, be sure to include elements that bring the focus on the action you want the user to perform.

Use a good headline to draw them in, choose relevant images that highlight and point to your CTA, use text that explains the benefits of the form, and don’t forget to mention any additional goodies that they may get out of the deal.

Best iPhone and Android Apps for Busy Developers

Mobile apps are everywhere, and for good reason.

As of last year, the total number of downloaded mobile apps was a little more than 100 billion, with that number projected to reach as high as 200 billion in 2017.

Statistics also show that up to 89% of mobile users spend their time on apps versus 11% who browse the web. That means that during any given day, the average user will spend over an hour fiddling around with apps. And web developers are no exception.

In fact, there are many helpful apps out there that can help developers do a better job finishing projects, communicating with clients, or sharpening skills.

But why would you use a mobile app if you have a laptop or desktop nearby?

3 Reasons to Use Mobile Apps

There are a number of reasons you might want to jump off of your desktop browser and open up the app store on your smartphone:

1. You Work On the Go

Whether you spend a lot of time traveling or you simply like to work from the comfort of your own couch, getting to work from wherever you want is a big convenience that mobile apps provide.

Why spend all the time lugging around your laptop or going into the office to work on your desktop when you can pull out your phone, do some quick HTML edits, and move on with your day?

Mobile apps allow you to update web pages, make quick sketches, code HTML, and upload and share projects from anywhere.

2. You’re Testing Your Mobile Site

More than 80% of all Internet users own a smartphone and use mobile devices to browse the web, so the need for mobile testing is high. But switching back and forth between testing sites on an actual mobile device and making updates to your code can be time consuming.

Why not test your site and then use an app to make live updates? You may not need the feature all of the time, but mobile editing apps can be the perfect solution for a quick fix or to test sites on the fly.

3. You Like to Multitask

No one really likes to work when they’re not in the office, but sometimes project needs come first. The good news is that you can use mobile apps alongside traditional desktop apps to help you in the office and out.

Check your site stats while you’re away to make sure everything’s running smoothly, reference code when you’re testing without opening another browser, or simply make a quick sketch while you’re out to coffee to try when you’re back at work.

Mobile apps have the flexibility to help you multitask to achieve objectives faster than ever, and while some apps are helpful for minor tasks, more robust apps may surprise you.

Best Dev Apps for iOS and Android

With all of that being said, here are the top apps that developers should try out to improve their overall performance and productivity.

JavaScript Reference

JSreference

There are plenty of reference apps on the market, but JavaScript Reference is derived from the W3CSchool’s documentation and includes a clean, easy-to-use interface that will make it effortless to look up the code you need.

Android Find it here.

Google Analytics

GoogleAnalytics

If you’re already working with Google Analytics for your website, you’ll want to download the GA app. It gives you access to many of the details from your GA account in real time, and can keep you up to date on your SEO.

iOS Find it here.

Android Find it here.

WordPress

WordPress

Having quick access to your self-hosted WordPress site can be handy, especially if things have a tendency to go wrong at the last minute. With this app you can manage your site, view stats, moderate comments, create and edit posts and pages, and upload media.

iOS Find it here.

Android Find it here.

WebMaster’s HTML Editor

webmasterhtml

This Android HTML editor makes the perfect addition to your toolbox. It supports HTML, CSS, JavaScript, and PHP. While you can save some money with their free version, those looking for some additional features and function like full previews and code support should spring for the full version.

Android Find it here.

DroidEdit Pro

droideditpro

Another Android app, DroidEdit is a text and source code editor that lets you highlight syntax for several languages, search and replace, open files from a file manager, and more.

Android Find it here.

Espresso HTML

EspressoHTML

For the iPhone user, Espresso HTML is a simple HTML and JavaScript editor to help you test scripts and web pages on the fly. You can save your documents in the app and access them later via iTunes if needed.

iOS Find it here.

AndFTP

andftp

AndFTP is a FTP, FTPS, SCP, SFTP client that comes with both a device and FTP file browser. It allows you to download, upload, synchronize and share features, as well as open local and remote files, rename, delete, update permissions, and more.

Android Find it here.

View Source

ViewSource

View Source is an iOS app that comes with a Safari extension to help you view the source code for any web page. You can enter a URL and immediately see the code, highlight syntax, and copy and paste into any other app or program.

iOS Find it here.

ByWord

Byword1

ByWord is a writing app with Markdown for the iPhone that allows you to sync text documents, add footnotes, tables and references, and export Markdown documents to PDF or HTML.

iOS Find it here.

Harvest

harvest

While not specifically targeted to developers, Harvest is a powerful tracking app that helps you track time, log expenses, and manage and send invoices from anywhere. For developers who spend more time recording things than actually working on projects, this app is a must.

iOS Find it here.

Android Find it here.

Dropbox

Dropbox

The Dropbox mobile app is the same as the desktop app, giving you a safe space to backup, access, and share any files you need at any time. You can also send large files to anyone, even if they don’t have a Dropbox account.

iOS Find it here.

Android Find it here.

Adobe Cloud Apps

adobecloud

For designers and developers alike, Adobe has a suite of mobile apps to help productivity, including Illustrator Draw, Photoshop Sketch, Photoshop Fix, Photoshop Mix, Lightroom, Comp CC, Preview CC, and more.

iOS & Android Find them here.

Final Thoughts

Whether you’re looking to brush up on your coding skills, make a quick project sketch, or you need to make updates to your site on the go, mobile apps are the perfect solution.

Remember that most apps come with a free or cheap version so that you can try it out before you fully commit. So, don’t be afraid to use mobile and tablet apps to aid your process during any project.