10 Best Practices for Designing Call-to-Action’s that Convert

Lead generation can be a nightmare sometimes.

In an ideal scenario, a potential customer comes to your website, learns all about you, converts, becomes a customer, and you get to have an amazing customer relationship with him.

But let’s be truthful here - a lot of times, customers come to your website, hoping to have an amazing customer journey, only to get lost! This happens if your conversion path is not clear.

This is where CTAs come in; They take your potential customers to a landing page where they can enter their contact information or complete any short form. 

A call-to-action is a link or a button that is placed on your website to convert prospective buyers to leads. Also, a CTA acts as a bridge between the content that your customer is interested in, and a landing page that persuades your customer to complete a form.

Designing CTAs is a skill in itself. Given the fact that humans have a shorter attention span than a humble Goldfish, a CTA must capture a visitor’s attention as fast as possible. Also, a CTA must be in-tune with other elements on the page and must be effectively designed. 

A great CTA is a combination of great text and an effective design. To give you a dose of inspiration for designing CTAs, we’ve listed out 15 CTAs that totally nail it! 

Effective Text

1. Get Specific

Words like “enter” and “submit” have become things of past! Use an action-packed verb to get the visitor’s attention immediately. Your action words must go along with your subject text. To make your CTA brim with effectiveness, be more descriptive about the action. Tell what the user will be getting if they click through. 

Here’s an easy trick to do it - use verbs that reflect a benefit and an action that you want your visitor to complete.

For example, instead of “Sign Up with XYZ”, try using “Reserve your Place with XYZ Now!”.

Learn From - Ekklesia 360

Look how convincing “See How it Works” is! It reflects what the Ekklesia wants the visitor to do. Should we even mention the text above the CTA is as convincing as the CTA itself.

How not to do it - Macy’s

This page is about everything! The cluttered layout and too much text will make you miss the promo code. There is a lot of text about furnitures, mattresses and rugs.

2) Make your USP the CTA

What differentiates you from other businesses in the market? What is it that you are actually offering to the customer apart from the product itself? Try making these your CTA text. Your value proposition might be “Free” or “More” or “Increase”, figure out how to display it the best in your call-to-action button.

Learn From - Netflix

Look how Netflix uses the word “Free” in its CTA. Also, the CTA is very clear in conveying that the subscription is free for a month only. But, look at the text above - it says “Cancel anytime”. With that reassurance, why wouldn’t you join free for a month? 

3) Consistency is the Key

Consistency is very important when it comes to CTA copy. You make to make it very clear to your visitors what they have to do next and why they must do it and so, your CTA must directly reflect the essence of the content that came before it. For example, if your CTA button is at the end of a blog article titled “X Ways to Boost Your Facebook Following” and you want people to sign up for a webinar about social media marketing, don’t feature a CTA that just says, “Sign Up for a Webinar”. Make it reminiscent of the content above like, “Boost your Facebook Following with this free seminar”.

Learn from - Neil Patel

Look at how this text and CTAs as consistent throughout the page. The CTA is clear and synchronous with the tone & subject of the page. 

4) Create a Sense of Urgency

Change your CTAs such that it creates a sense of urgency, NOW! You only have a small amount of time to convince your customers to take action. Hence, you should not offer your customers a chance to procrastinate. An effective CTA will tempt the customer to click on it right then. It is also a good idea to tell your customers what they stand to gain if they take action immediately. How about “Book now to get a 15% discount”?

Learn From - Zynga

Zynga wants you to play. Not later, but NOW! 

5) Use Personal Language

Let your CTA be all about your visitors and how you’re putting them first. They came to your landing page looking to fulfil a need. Show them that you’re here to fulfil their need with your service or product. Also, your CTA should not feel like it is being targeted to a group. Add a personal touch to plain CTAs to make it more effective. See how different “Sign Me Up For This!” is different in tone from “Sign Up”. According to statistics, the second person “Your” constantly outperforms “My”. 

Learn From - Wishpond

This pop-up features a bit of information about their landing page builder and the user is immediately shown a CTA, “Build My Page”. This CTA gives the visitor a feeling of possession and puts them in control.

Effective Designs

6) Use Contrasting Colors

An easy trick to make your CTA stand out is to highlight it and create a contrast with the surrounding content. Vibrant and energetic colors are great for drawing attention and creating contrast. If you are stuck and can’t decide on a particular contrasting color, look at the most common colors or the schema used on your landing page, and pick the opposite color. If you still can’t decide, bright red, orange and lively green always seem to do the trick! 

Learn From - Bath & Body Works

The pink background, white text and the green CTA - the entire element is so well conceived and in tone with their Christmas-sy design. We’re particularly impressed with the choice of colors and how the green button stands out from the pink background!

How not to do it - Mr.Porter

Here’s an example of how having same colors all over the page could possibly affect your conversion rate. In this landing page from Mr. Porter, the “Shop Now” button doesn’t stand out too well. For an user who is just skimming through the page, the CTA would be non-existent!

7) Put it in Place

One very important factor to remember when trying to draw attention on your CTA is its location. While pop-up CTAs have a conversion rate of up to 8%, sidebar CTAs have a conversion rate of 1.5%. If the customer is not able to find a CTA in the right place when they are willing to take action, a valuable sales opportunity might be lost. So, where exactly do you place your CTA? That depends on what the CTA is trying to achieve. If it is for a demo, place it prominently on pages that show intention. If it for a guide book or a webinar, place it towards the end of a blog article. 

Learn From - General Assembly

Look at how General Assembly has strategically placed the “Subscribe” CTA in the end! While there is another CTA, “View Full-Time Courses”, it is clear that both the CTAs have been created for different actions. While one is placed at the middle of the page, “Subscribe” is placed at the bottom to let the user take-in all supporting information and hence, prompting better action.


(By hubspot)

8) Choose the Right Color

Different group of people respond well to different set of colors. While teal attracts people looking for budget options, red-orange attracts impulse buyers. It is very important that you understand the psychology of color and also understand what your average buyers are looking for, before you choose a color. Also, think about the color of your brand. Color association increases brand recognition which in turn, affects consumer confidence.


Source: Wishpond.

Learn From - Macys’

Look at how the red color CTA not only contrasts from surrounding elements but also grabs the attention of customers. It is a simple, clear and direct message placed on the right color that does the trick for Macy’s.

9) Make it Fit In

Sure, bigger CTA’s scream for attention. But having too large a CTA might get lost due to banner blindness. Make sure your CTA element is sized big enough to read. The CTA size must also be mobile compatible. The key is to make the CTA look balanced with other design elements on page. 

Learn From - HowAboutWe

Notice how the CTA size is proportional and balanced with other boxes on the page? Now that’s what we’re talking about!

10) Button Shape

Users press CTA buttons throughout their daily life, all the time. You need to exploit this fact to create CTA designs that immediately tell the users what to do with it. Even though this is an area you can experiment with, you need to ensure that your CTA button looks like one.

Learn from - Wufoo

The background color, the button colors, the neatly formatted text and minimalistic design makes this page a winner. Look at the shape and size of the “Sign Up Free” CTA button that makes you want to click on it! 

How not to do it - Basecamp 3

Albeit a negative lesson, Basecamp’s CTA do tells us a few things. Notice the “See what’s new in 3” button that is designed like a speech balloon. Do you think people will instantly recognize that it is a CTA? If you button does not look like a clickable element, chances are people won’t click it.


Bonus infographic:

Everything You Need to Know About Call-to-Action Buttons

Courtesy of: Synecoretech.

Source

High-Converting Lead Generation Forms: Here’s How They’re Built (infographic)

People don’t like online forms. And it’s not hard to see why: Online forms require extra work (and time) and typically stand in the way of a consumer getting what he or she really wants—like a piece of content or access to software.

This is not great news for marketers, who are tasked with converting website visitors into customers through lead generation forms. Luckily, there are proven ways to reduce form friction and get prospects to hand over their valuable information.

Focus on Form Appearance

If you want to see results with your lead generation form, you have to focus on the initial attraction. Potential customers will fly past your form if it doesn’t stand out on the web page and force them to take a look.

When building an online form, you need to consider each of your form’s attention-grabbing elements, such as where it is placed on the page, what colors it uses, and how it is laid out.

In general, you should keep your form simple and avoid too many visual distractions (especially if you hope to convert mobile visitors). And you should use colors that invoke trust or motivate visitors to take action, such as blue, green, or orange. 

Additionally, your submit button should be the stand-out element on the form. If you want to draw as many eyeballs and submissions as possible, the button should use a contrasting color and be big enough for visitors to click from any device.

Use Conditional Logic

Another way to enhance the overall form experience for users (and get more submissions) is through use of conditional logic. This functionality allows you to personalize the experience by keeping certain fields hidden unless they are relevant (based on users’ responses on previous fields).

For example, if you’re conducting a customer survey, you can use Conditional Logic to gather additional information if customer’s respond a certain way.

The general benefit of using Conditional Logic is twofold:

. It helps visitors avoid filling out irrelevant fields.

. It streamlines your form and keeps it looking lean.

Conditional Logic is also great for mobile users (since it can let them skip fields and get through a form quicker), and it has been proven to boost conversions by up to 50%.

Consider Form Fields & Order

Like anything, it doesn’t matter how pretty your form looks if it’s not built on a solid foundation. That means the fields you include on your form matter—a lot. 

Lead generation forms are a great way to get to know your leads, but you don’t want to scare them away with too many unnecessary fields. Aim to include only those fields that are crucial to your campaign or marketing strategy.

For example, if you’re just looking for blog subscribers that you can nurture, you don’t need more than an email address field.

If you’re looking to gather high-quality leads, you’ll likely need more than a single field. In these cases, consider lowering the threat of submission by making certain fields optional. Or use your form to create a multi-step conversion process that puts low-friction or high-converting fields first.

Create an Effective CTA

The final building block of your lead generation form is the call to action (CTA). And the goal is always to seal the deal with a strong CTA.

But what makes a CTA strong?

For starters, your submit button often functions as your CTA, so it should specifically state what will happen when a user clicks (adding just one word to the CTA for clarity can lead to a 320% conversion lift!). Your CTA copy shouldn’t be too lengthy, though. Most of the best CTA buttons include just one or two words. 

Additionally, your CTA should stand out from the rest of your form design to draw attention and encourage submissions. And if you have a form headline, it should reflect the overall benefit of filling out your form and clicking the CTA button.

Conduct Form A/B Tests

Once you’ve built your lead generation form, it’s a good idea to test it for optimal performance. Form A/B testing allows you to create higher-converting forms by testing two versions against one another to find out which resonates best with your audience.

You can learn a lot from form A/B tests. But it’s best to test just one element at time, starting with your headline or CTA copy, form length, and button colors. If one form in the test comes out as the clear winner, it’s a sure sign that you’ve improved an important element on your form.

Collecting and analyzing data on form performance will help you create the strongest lead generation form possible. While it’s good practice to follow known conversion rate optimization tips, testing is really the only way to find out what tweaks will boost conversions among your unique audience.

Use Partial Submissions and Bottlenecks

Another way to improve your form’s performance once you’ve done the heavy lifting is through form features like Partial Submissions and Field Bottlenecks. Both features allow you to see what is causing people to abandon your form so you can find and fix the problems. Additionally, Partial Submissions allows you to capture information from people who start filling out your form but don’t submit.

The ability to identify fields that cause frequent bottlenecks is highly valuable. With that type of deep insight, you can easily remove low-performing fields or make them optional to improve your form.

Real-time data captured from people who abandon your form after partial completion is also highly valuable. Gathering information from visitors who don’t convert gives you another chance to follow-up and capture the conversion.

Bonus infographic:

Keep Building!

A sturdy lead generation form isn’t built in a day...but following these conversion rate optimization tips can help you get there quicker.

After all, most people won’t tell you they don’t like your form; they’ll simply bounce away without a second look. So it’s up to you to put in the upfront work to attract and convert valuable passersby.

Source

16 Examples of Great Landing Page Design

Putting together an A+ landing page can be tricky.

There are so many elements that a top-notch landing page needs, and making those elements the "best" they can be often depends on what your landing page goals are. 

Take form length, for example. It's just one of the many components you need to optimize, but best practices will tell you that both short and long forms perform well -- it all depends on whether you want to generate a lot of (potentially) lower quality form submissions, or a smaller number of higher quality submissions. 

So if you're looking to up your landing page game, it's helpful to know what goes into a great landing page and see a few examples of these nuanced elements in action. Surprisingly, when I started doing research into the latter, I realized there are hardly any sites out there with examples of modern, impressive landing pages that are more than just a sign-up form on a homepage. So we decided to compile a list of landing pages we love ourselves.

Big, big caveat here: I don't have access to any of the stats for these pages, so I can't tell you how well they convert visitors, leads, and customers. Still, these examples have some of the best combinations of those nuanced landing page elements I've ever seen. Obviously, if you feel inspired to try any of these tactics on your own site, the only way to know whether they'll work for you for sure is by testing them out for yourself.

1) Wistia

First up is Wistia's landing page for their Free Wistia Account. Right off the bat, you notice the one-field form to create your account -- the blue, minimally patterned background contrasts nicely with the bright white form field.

The length of the form field combined with the prominent placement eliminates nearly all friction to create an account ... but if you're having doubts, you can always scroll below to read answers to top FAQs. By separating these two sections with stark color contrast, Wistia makes it much easier for you focus on converting.

2) Unbounce

It's no surprise Unbounce is near the top of this list -- they've actually written the book on creating high-converting landing pages. Although there are lots of amazing things about this landing page, the two that I absolutely love are: 1) The directional cue from the supporting images to the CTA button, and 2) the detailed -- but well packaged -- information below the form. 

The first helps direct attention to the goal of the page -- for you to fill out the form -- in a way that's unobtrusive. The second gives this page an SEO boost (search engines will have more content to crawl) and assuages any worry from folks who need to know more about a piece of content before handing over their information, all while not distracting people from the form. 

3) IMPACT Branding & Design

Full disclosure: IMPACT is a HubSpot partner -- but that's not why they're included here. IMPACT's landing pages have long been a source of design inspiration. I love the simple layout of the page, from the large headline copy and detailed featured image, to the outline that surrounds the form, to the colors and fonts that are very pleasing to the eye.

Notice that they've included a check box to subscribe to their blog, which is automatically checked. Note that while adding a check box field to your landing page forms is a great way to increase subscribers, it's better to leave it unchecked and let users opt in. Otherwise, you'll risk adding a lot of low quality subscribers to your contact base. (Read this blog post to learn why having low quality subscribers can hurt your business.)

4) WebDAM

While WebDAM's landing page has many neat features, my favorite (by far) is the form. The little icons in front of the text are all indicative of the information you need to put in -- just look at the ones next to "First Name" and "Last Name." The form also has a blue background that stands out from the hero image behind it. And the "Submit" button? It features an orange background (a complementary color to blue), customized and compelling copy, and an arrow to signify that you'll progress to the downloadable guide.

All this, and I haven't even touched on the detailed but concise information below the form, including well-known customers and customer testimonials. Top-notch work, WebDAM!

5) Bills.com

Often, people think landing pages are static pages on your website. But with the right tools, you can make them interactive and personalized.

Take the example below from Bills.com. To see if you'd benefit from their consultation, you answer three questions before you are shown a form. It starts with this one:

Then, you answer two more questions, like the one below:

And here's the final landing page form where you fill out your information:

I'm not sure how the algorithm works (or if there's one at all), but while I was filling it out, I had some anxiety about not qualifying. Once I found out I did, I was excited to fill out the form, which I'm sure most people who are in debt and using this tool are. By making this offer seem more exclusive before the form appeared on the landing page, I'd bet that Bills.com increased conversions pretty significantly.

6) Trulia

Trulia did something very similar to Bills.com with their landing page. It starts with a simple form asking for "an address" (which sounds less creepy than "your address," although that's what they mean). Below this simple form field is a bright orange button that contrasts well with the hero image behind the form, and emphasizes that the estimate will be personalized to your home.

Of course, the address itself won't be enough to estimate the value of a home. It just denotes the home's neighborhood. That's why the next page follows with more questions about the property itself, like number of beds and baths. Below, you see the copy "Tell us where to send the report" -- with a disclaimer that, by entering this information, you're agreeing to connect with a real estate agent. This is a great example of a company giving value to their visitors from the get-go, while setting visitors' expectations about what will happen as a result. 

7) Basecamp

Like Unbounce, Basecamp also has a really long, in-depth landing page with lots of information below the fold. But what won me over was that cartoon at the top informing visitors that this version is "all new for 2016," which spruces up a somewhat minimal page. I also love that the arrow pointing to the form, which directs visitors' attention to it straight away. Can't get much better than that.

If you go to the landing page itself and scroll down, you'll see that the form moves along with the content on the right. That's a clever way of keeping the form "above the fold" at all times, thereby reducing friction if the visitor should decide to fill in their information while they're reading further down on the page.

[Click here to see the whole landing page.]

8) Zendesk

I like Zendesk's Free Trial landing page because it's simple in both copy and design. The only thing that really stands out on the page are the two CTA buttons -- and the egg drawing at the top, which wiggles as though it's about to crack open. The form itself is simple and only requires a work email address and a password to create an account. Or, you can just use your Google Apps login, shortening the conversion path even further.

9) Webprofits

For a little contrast ... what about long landing pages? With just a few tricks, you can make even the longest landing page feel short. Webprofits' landing page below shows us how.

Right at the top, there's a prominent form field for an email address -- with a nice contrast against the background so it stands out. If you want to convert right then and there, you can put in your email and, magically, the rest of the form field appears. By not putting that whole form field up front, they help reduce friction.

They also make it easy for you to figure out what Webprofits actually does. The rest of the page offers detailed information about what you'll get when you give over your information. Plus, it includes strategic CTAs throughout to take you back to the top to fill out the form, like "Get a Free Analysis Now."

10) Inbound Emotion

Even though this HubSpot Partner site is in Spanish, you can still appreciate its conversion capabilities. My two favorite features of the page? As with Basecamp, the form stays in a fixed, prominent position as you scroll through the site. I also love the hands that serve as directional cues toward filling out the form and sharing the page with others.

 

11) H.BLOOM

Sometimes, you've just got to stop and admire a landing page for being beautiful. Using high-resolution photography and lots of white space, H.BLOOM's landing page is a pleasure to look at. 

Aside from its beauty, the page has some great conversions elements: an above-the-fold form, clear and concise description of what'll happen when you fill out the form, and even the bright orange "Submit" button. The only thing we'd change up? The copy on the "Submit" button -- that could be more specific to the offer at hand. 

12) Velaro Live Chat

Sometimes the smallest details make the biggest difference. They're what make Velaro Live Chat's landing page awesome, for example.

That small PDF symbol over the feature image helps set expectations for what format the download will be in. The arrow in front of the subheadline helps further direct your attention to important copy they want visitors to read. Like IMPACT, they also have an auto-checked box to subscribe to their newsletter on their form -- which, if turned into an opt-in check box, is a great way to increase subscribers. All of these small, seemingly insignificant details help bring together a solid, admirable landing page design.

13) University of California, Davis

There are a lot of colleges and universities out there creating beautiful websites. In UC Davis' case, that extends to their landing pages, like the one below for their free sample lesson on the art of making sparkling wine.

I love how the opaque blue background of the form is an extension of the hero image at the top, which draws the eye downward toward the form. I haven't seen this on many landing pages -- it's a great directional cue that's not as obvious as an arrow. (Although they have an arrow, too, on the "Watch the Sample Lesson" CTA at the bottom of the form.)

14) Conversion Lab

While I wouldn't typically include an example of a homepage with a form on it in a post about landing pages (click here to learn why), this website is special. The homepage is the entire website -- the navigation links just take you to the information below.

When you click "Get Help With Landing Pages," the entire site moves over to make room for the form. Here's what it looks like before you click:

And, when you click that CTA, check out how the form appears: 

I love how you don't have to leave the page to fill out the form, yet the form won't feel intrusive to casual website visitors. 

15) Industrial Strength Marketing

Right off the bat, this landing page pulls me in with a compelling, punchy header: "Don't Make Me Zoom." It directly speaks to a common experience most of us have had when we're browsing on our phones or tablets -- and it's a little sassy, too. 

But that's not the only thing keeping me interested in this landing page. Notice how the color red is strategically placed: It's right at the top and bottom of the form, drawing you even closer to the conversion event.

Plus, this design is meta to boot: It looks and works great on mobile, too. Keep in mind that a lot of visitors will be accessing your landing pages on their smartphones or tablets, and if the design of your website doesn't work well for them, they might give up and leave your page.

The folks at Industrial Strength Marketing made the fonts and form field big enough so that visitors don't have to pinch-to-zoom to read and interact with the content, for example. (Read this blog post to learn how to make your webpages work great for mobile visitors.)

16) Shopify

Like many of the other landing pages in this post, Shopify's trial landing page keeps it simple. The user-oriented headline is just a few words, for example, and the page relies on simple bullets, not paragraphs, to communicate the trial's details and benefits. There are only a few fields you need to fill out before you get started. All of this makes it easier for you to get to the point: selling online with their tool. 

The icing on the cake? This landing page looks gorgeous (and functional) on any device you're using. Responsive design for the win!

Source