This Is How You Build A New Website

Are you looking to launch a new website?

Not sure where to start?

Or looking for some creative inspiration before you dig in?

Check out this article about 15 Addicting Web Design Guides To Get You Hooked.

Sooner or later, after you dig in, you’ll likely reach a point that you want to collect data on your static website. Maybe it’s a lead collection form or a registration form or even an order form. When you reach this point, you’ll learn that creating a form is relatively easy. You can learn most of what you need to know from w3schools.

However, things get a little more difficult when you start working on how to collect data from the form. Do you want the form submission to trigger an email, store data in the could or push data to another system? There are all kinds things you might want to do with a completed webform.

Luckily, FormKeep makes it easy to connect the webforms you create with a hosted database in the cloud to store your data (a form backend) and, even, connect that data to thousands of applications via Zapier.

All you need to do is update the action attribute. Your form tag should look like this:

<form accept-charset="UTF-8" action="https://formkeep.com/f/your-token-here" method="POST">

Dive right in on your projects and if you have any questions about how to store data from your webforms, contact us at https://www.formkeep.com

Your Form Design, Our Backend

One of the reasons that FormKeep is so popular with web developers and designers is that it’s easy to style your form exactly the way you want. Unlike alternatives that require you to use their form templates and layouts, FormKeep makes it easy to layout and style your form exactly the way you want without worrying about building a backend to receive your form data.

Material Design Screenshot
Learn About Clean Form Layout

Modern web design and form layout principles are always changing and, of course, design preferences vary depending on the developer, designer or target user. Material Design’s website https://material.io offers a great overview of how to style an impactful HTML form. Check out their HTML design overview by clicking here.

To learn more about how to capture your form data on the backend in a database or connect it with another application or receive your form data in email, check out formkeep.com. Once you set up a FormKeep free trial account, it’s easy to connect your form with FormKeep.

All you need to do is update the action attribute. Your form tag should look like this:

<form accept-charset="UTF-8" action="https://formkeep.com/f/your-token-here" method="POST">

FormKeep Named to List of Top 20

 

Today, FormKeep was named as one of the top 20 form builder tools by Hubspot.

At FormKeep, we believe web designers, marketing teams and customer specialists have better things to do than write another boring form backend. With FormKeep it’s easy to design a simple form and post data to the FormKeep backend.

To learn more about how to save time and effort by using FormKeep, visit formkeep.com. To learn more about HubSpot’s Top 20 Best Form Builder Tools for 2018, visit https://blog.hubspot.com/marketing/form-builder-tools

Announcing Shubox.io and File Upload Support

 

We’re excited to share our new partnership with Shubox.io!

Many of our customers ask us how to upload images or pdfs from their html forms. They’re looking to capture resumes or pictures of problems with their products. Uploading samples of their portfolio or even small videos for contests.

Managing file uploads across different browsers and user bandwidths limits while adhering to your site’s brand and styling is a challenging task and sometimes causes these projects to be put off until there’s more ‘free time’ from the developer team.

Fortunately there’s a great solution out there that you can have up and running in fifteen minutes!

We’ve looked closely at the many options available and we’ve partnered with Shubox.io. They’ve got a great experience right out of the box, but allows for full control over the behavior if you need it. They upload the files directly to your own Amazon S3 storage so you have direct control over the files.

Shubox.io does a lot more than just provide an amazing user experience for your customers to upload files, it also allows you to transform the images. Resizing, rotating and cleaning up the meta-data are all possible through the service. Great stuff if you need extra processing or need to connect these files to additional workflows in your business.

Check out this recent blog post with all the setup and information about how to get things setup and working with FormKeep.

If you sign up through FormKeep you’ll get a special deal as well, so make sure you sign up through the Shubox.io page under Data Integrations inside FormKeep.

Keep on uploading!

ps – Image and PDF files will now also display directly in the submission pages of FormKeep, in addition to showing a link to the original file.

FormKeep and Zapier Connect Web Forms with over 1000 applications

FormKeep Connects to 1000s of Popular Applications Like Salesforce, Google Docs, MailChimp, Intercom and Slack

FormKeep and Zapier Connect Web to the World.

We know that getting your work done requires many different web tools. In fact, the average mid-sized business uses between 10 and 16 apps and, for enterprises, there can be hundreds or thousands of apps running various workflows. You have your email app, CRM, note-taking tool, emarketing platform, cloud storage tool, team communication app, along with project management tools and more. Sometimes, it can be a struggle to get them all working in tandem. Now that FormKeep has 1,000 integrations, you can choose your favorite tools and easily integrate them with FormKeep.

Thanks to our Zapier integration, FormKeep connects to 1,000 other web tools and applications. Now you can connect data submitted via forms on the web to all kinds of applications and workflows that reside in places like Slack, Google Docs and Salesforce. You can use Zapier to connect with your FormKeep data via codeless integrations called “Zaps”. Zaps will automatically send information from one tool to another, so you’ll spend less time manually transferring data between your business tools and can dedicate more focus to creative, big picture tasks.

Boost Your Productivity with Popular FormKeep Integrations

No matter what other apps you use, chances are you are looking for ways to use web forms to take data from customers and employees via the web and connect that data with the applications you use to run your business. Here are some of the most popular integrations that FormKeep users already use to be more productive.

The New Year is the perfect time to evaluate your processes and find ways to boost productivity. Try out some of the Zaps above or view more ways to integrate FormKeep.

 

42 Tools All Speedy Front-End Developers Use

Every developer has a preferred way to code.

Some use only the basics – a text editor and a browser. Others like to incorporate apps, platforms, and tools to make sure everything gets done.

If you fall in the latter category, you’re probably always on the lookout for the next best tool to aid your projects. After all, who doesn’t love something that can reduce your time and increase your productivity?

That’s why we’ve put together a list of the best development tools for those who want to get things done quickly and efficiently.

Take a look.

Source Control

github

GitHub – GitHub is probably the most well known platform, but not everyone uses it. But if you’re looking to build a site efficiently (especially a static site) then GitHub is perfect. It includes a source-code browser, in-line editing, wikis, ticketing, and more. The best part is that it’s completely open source (that means free!).

bitbucket

Bitbucket – Bitbucket is another free source code host. It’s a distributed version control system that makes it easy for you to collaborate with your team. Approve code review with pull requests, use flexible deployments models, and take advantage of their private and public repositories.

sourcetree

SourceTree – Whether you’re a newbie developer or you just love using Mac, SourceTree is a free Mac client for Git and Mercurial version control systems. Manage all your repositories, hosted or local, through SourceTree’s simple interface.

Other Options

Versions – Another subversion Mac client

Tower – Another Git client for Mac.

Offscale – A tool for database version management

Development Platforms

heroku

Heroku – Heroku is a popular platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Build, manage, scale, and deploy great apps quickly, without needing to worry about updating or patching.

kinvey

Kinvey – If you’re more interested in mobile app development, Kinvey is a back end as a service (BaaS) provider that makes it easy for developers to set up, use and operate a cloud backend for their mobile apps.

firebase

Firebase – Another BaaS, Firebase is a scalable real-time backend for your website. It’s made up of complementary features that you can mix-and-match to fit your needs.

cloud9

Cloud9 – An online IDE that combines a powerful online code editor with a full Ubuntu workspace in the cloud. Simply pick your configuration and develop your app. No need to spend valuable development time on system setup and maintenance.

appharbor

AppHarbor – Used by thousands of developers for everything from simple blogs to high traffic web applications, AppHarbor is a fully hosted .NET Platform as a Service. This PaaS can deploy and scale any standard .NET application to the cloud.

Other Options

Parse – Another mobile app platform

CloudMine – Another BaaS for mobile and web apps

Koding – Browser-based IDE

dotCloud – Deploy, manage, and scale any web app

StackMob – Powering mobile applications

PHP Fog – Cloud platform for PHP

Backrest – Easy creation of SaaS data backends

Codeanywhere – Online code editor

NeptuneIDE – Full-featured, cloud-based IDE for PHP

Fusegrid – ColdFusion in the cloud

Cloud IDE – Code and deploy in the cloud

ToolsCloud – Development environment in the cloud

Bug Tracking, Feedback, and Monitoring

crashlytics

Crashlytics – This powerful and lightweight crash reporting system for iOS and Android is perfect for mobile app developers who need to work out the kinks in their system before, during, and after launch. Every crash report is analyzed and every bug tracked so that you don’t have to do it.

usersnap

Usersnap – If you’re more of a visual person and you prefer snapshots to track bugs or share potential issues with your team (or clients), then Usersnap is a great option. Organize your web projects and create screenshots of any potential problems.

rollbar

Rollbar – Rollbar collects errors that happen in your application, notifies you, and analyzes them so you can debug and fix them in real time. Works with Ruby, Python, PHP, Node.js, JavaScript, and more. It’s “Full-stack error monitoring for all apps in any language.”

Other Options

New Relic – Web application performance management (APM)

Exceptional – Tracks errors in web apps and reports them in real time

BugSense – Mobile app insights and crash reporting

Bugzilla – Server software to help you manage software development

Bugify – Simple PHP issue tracking for small teams

BugHerd – Tracks bugs and allows you to capture and share feedback

Snowy Evening – Bug and issue tracking with Github integration

APIs

twilio

Twilio – Twilio is a cloud communications platform for building SMS, Voice, and Messaging applications on an API. Embed messaging, voice, and video in your apps with their API, and the best part is that you can get started in as little as five minutes. So, if you’re in a rush, you have help.

cloudeo

Cloudeo – If you’re into geo data, then this is the perfect solution for you. Cloudeo is another SaaS that allows you to rent, evaluate, and stream geo data in all of your applications. It’s a unique option for developers needing to include more complicated APIs like this.

embedly

Embedly – On the simpler side of things, Embedly delivers ultra-fast and easy to use products and tools for richer sites and apps. Convert standard URLs into embedded videos, images, and more to engage your audience through rich media.

mailgun

Mailgun – Mailgun is a surprisingly powerful API that lets you send, receive, and track email effortlessly. Easy SMTP integration and a simple, RESTful API removes the messy details of sending transactional or bulk email. Everything is built API first with a focus on simplicity and compliance to standards.

Other Options

Factual – Structured data APIs

PubNub – Cloud-hosted messaging service for real-time apps

Context.IO – Leverage email data in applications with this API

Semantics3 – APIs for product data

Sent.ly – SMS HTTP API using your own Android phone

Final Thoughts

Finding the right app, platform, or tool to help you get through projects isn’t easy. A lot of it depends on preference, working style, and sometimes the power of the tool itself to get the job done.

But one thing’s for sure: If you need help moving a project along, there’s probably a tool for that.

This is great for developers who want to get things done as fast and easy as possible. Or at the very least, it can inspire you to create a SaaS, BaaS, or PaaS of your own to help other struggling developers get the job done.

What Your Tech Stack Should Look Like If You’re Building Static Sites

We’ve previously mentioned the many benefits of building static sites over using a traditional CMS like WordPress. But if you’re new to building static sites, it may feel intimidating to create something “from scratch” using a static site generator.

One of the biggest differences in building a static site is the technology involved, which scares many first-timers.

WordPress and other CMS’s may seem like a better choice because they claim to do much of the work for you, but many developers find the flexibility rather limited after a certain point.

And the good news is that building a static site doesn’t mean you’re left without help. In fact, there’s plenty of technology out there that can assist you in equal (or sometimes better) ways.

Here’s what you need to know about having a good tech stack when building static sites.

Languages

This is going back to the basics, but the first thing you need to consider before you determine your tech stack is what languages you will be using.

Preprocessor languages are programming languages compiled into three types: HTML, JavaScript, and CSS. Examples include CoffeeScript, LESS, HAML, and Dart.

Each offers different syntaxes, features, as well as other benefits, and each static site generator (SSG) will allow for different preprocessor languages. It’s important to determine what language you’re most familiar with before you decide on a SSG.

While you don’t necessarily need to know anything beyond HTML to build a static site, you may want to consider brushing up on a preprocessor language to gain some advantages. Chris Loos over at Urban Insight has 10 reasons for using CSS preprocessors.

Site Generators

Unlike CMS, building a static sites requires generating HTML files that are served “as is” with no other database involved. For many developers, that means using editors like Dreamweaver or Notepad to code everything and then hosting those files to create the finished project.

Thankfully, technology has evolved enough to give us SSGs, tools that allow the creation of static sites in any number of languages.

Some popular SSGs include Jekyll, MetalSmith, Grunt, and Pelican. These SSGs can be used either with markup files as a source or even using a hosted content API such as Contentful, Medium, or yes, even WordPress.

jekyll-1024x516

SSGs help developers perform important tasks such as combining multiple files into one, compiling preprocessor languages, or even packaging code into a mobile application without having to do everything “from scratch.”

So which do you choose?

Well, some SSGs are built for a specific purpose, while others can be used for almost any site. It’s essential to find something that fits your workflow, is actively maintained, and has an active user community for when you have questions. If you need help deciding, we’ve ranked a few of the top options here.

Templates

Of course, if you did want to take a more “from scratch” approach without needing to spend countless hours coding your site, you could always use a static HTML template.

HTML templates come with pre-made features that allow you to fill in the blanks, so if you’re used to plugging components into templates with a CMS but you still want the benefits of static sites, you can find a template to meet your needs.

You can find a variety of pre-made HTML templates on sites like Template.net, Template Monster, and ThemeForest.

Package Managers

Another important aspect of building a static site is packaging your files together. But keeping track of all those packages and making sure they stay updated can be difficult, which is why many developers choose CMS over SSG.

However, there are package managers designed to help you manage things like your libraries, languages, fonts, and even images. A couple of popular package managers include Bower, which allows you to install open source or shared library code, declare dependencies for your projects, and more.

bowerio

APIs

One of the noted downsides to using static sites is the lack of APIs, meaning that there’s little interactivity, which, of course, is the point of doing something “static.” But if you still wanted the functionality of a dynamic site while building a static site, there are a few workarounds you could consider.

Raymond Camden has a tutorial for adding the “read” aspect of an API to your static site using any SSG.

Brandon Brown has another post on how to develop JSON APIs using Surge.

Static Web Hosts

Finally, and perhaps most importantly next to choosing a SSG, you will need a place to host your project once you’re ready to launch.

amazon-web-services-logo-cc90d03c8e148873b8b6cc1a7fdbdf1a

There are many options for static web hosting including traditional shared hosts, online storage with hosting, and a few services even have dedicated static web hosting.

So how do you choose a good host? Here are a few things to look for:

  • What is the cost you’re willing to pay for hosting?
  • Does the host support HTTPs? Do you need HTTPs support?
  • What is the upload method to host files? (GitHub, manual upload, etc.)
  • Does the host offer a Content Delivery Network (CDN)?
  • Do they support form handling?
  • Do they support build automation?
  • How easy is the deploy process?
  • Are there other developer-friendly features like rollback?

A few of the top hosting services for static sites include GitHub Pages and Amazon S3. You want to find a service that will give you the flexibility and support you need for every project. And, while many hosting services are cheap or free, be careful that you’re not undercutting your value.

Final Thoughts

At the end of the day, choosing a tech stack comes down to finding technology that works well for you and your team and will help you stay productive.

If in doubt, you can always ask around (or check on the links we’ve offered). But, remember that what works well for one developer or site may not work well for yours, so it may require some testing to get things just right.

Remember, one of the benefits of building static is that you also have more flexibility to build your ideal stack, one that fits your needs and helps you do the work faster and keeps things maintained and updated with as little stress as possible.

How to Sell Your Client On a Better Converting Type of Form

You’ve heard the old adage: The client is always right.

But every so often there comes a time when you – the designer or developer – know that there’s a better way. After all, you work with websites on a daily basis, and you see how well things convert or don’t convert. You have years of experience under your belt to know that sometimes certain methods work better than others.

So when a client says, “We want it this way,” there may come a time when you have to respond, “Well actually, here’s another suggestion…”

When it comes to creating forms in particular, some form types just work better than others for certain audiences. And if your gut is telling you that a full-page form would work better, then that’s what you should go with.

But how do you tell that to your client?

Here’s how to sell them on a better way, even if they’re picky.

clients

Certain Forms Work Better Than Others

According to the B2B Technology Marketing Community, “61 percent of B2B marketers struggle to generate high quality leads.” Forms play a big role in that struggle, and in some ways, designers and developers have an inside scoop on which forms work better than others.

Generally that’s because you’re the one stuck doing a redesign when conversions are low. And it’s true that some forms convert better than others.

For instance, forms shown above the fold can improve conversion rates, but sometimes only for audiences that are already familiar with the client’s brand.

According to Groove Digital Marketing, short forms or progressive forms work much better for mobile users, while Convert With Content suggests using multi-step forms instead of long forms because they work better for those needing more information without sacrificing conversions.

multistepform

While you may not have it all memorized off the top of your head, chances are that you know from experience which forms will work in context and which ones don’t. (It’s okay to trust your gut, too).

Of course, once you realize that the form types your client wants may not be the best solution for their audience (or even for their site’s design), it comes time to suggest something different. So how do you do that, exactly?

How to Convince Them You’re Right

Your primary job is really to keep the client happy, but as much as possible you should try to make sure that your client’s endeavors are successful.

While that can be hard to do with a client that is picky or demanding (they simply must have their way), it is possible to suggest an idea that (you feel) will help them achieve their results faster. But you don’t want to come across as a know-it-all, or you’ll risk bruising their ego.

Here are a few ways to try to get your point across without sounding like a demanding diva.

Speak from Experience

While your client has expertise in their respective field, and they probably know their audience better than you, that doesn’t mean you don’t know what you’re talking about. After all, you work with forms and websites, and you’ve had clients come back and say “Hey, this isn’t working, can we change this?”

You’re an expert, and you need to own it. More importantly, you need to show that your opinions have merits. If you want to suggest a new idea, you’ll have to show them that you have their best interests at heart. Which leads to…

Show, Don’t Tell

If you can show how a different form type improved another client’s conversions – whether from your own experience or from an article or post you read about – and you know that your current client has a similar audience, it’s a good idea to grab that data and have it handy.

It can also be helpful for a client to see exactly what you’re suggesting to avoid any confusion. Create a mockup of how the new form would work, and show them step-by-step why it will work better for their audience so they have actual social proof to consider while making decisions.

social-proof

Keep It Consistent

If you’re suggesting something that may be totally out of left field, you still want to reassure them that you understand their audience and brand. Again, this is where a mockup can help, showing the form in action while using their images and site design as a backdrop.

But even if your form idea is way out there, do as much as you can to stick to their audience. If they use business-formal language, don’t start their forms with “Howdy, y’all!” If their colors are blue and gold, don’t design a form that’s purple and grey. It should be a no brainer, but as much consistency as you can keep, the better your “crazy” idea will go over, especially with picky clients.

Offer It Like an “Upgrade”

Sociologist Alvin Gouldner says that no society on earth can escape from reciprocity, or the idea that if someone’s giving you something of value, you should return the favor. Consider suggesting the changes as if you’re providing an exclusive service above and beyond the norm, and they may feel obligated to say yes just because you’re offering.

“We’ve offered this to a few of our other clients and they’ve seen much higher conversions than the standard form. We notice you have a similar audience, would you like to try this new form type? We can create a mockup if you’d like to see it.” More often than not, your client will at least consider your idea rather than rejecting it outright.

Don’t Be Rude

Finally, presentation is everything. This should go without saying, but if you’re rude to the client, they will be primed to reject anything you say on the sheer principle of you being unlikable. While business professionalism can go a long way, it’s about balancing the authoritative tone of an expert with the courtesy of a customer service representative.

According to Call Proof, it’s about listening, empathizing, and under-selling. You have to see your client as more than just a dollar sign, and treat them as you would your family or friends.

Final Thoughts

Sometimes you have a feeling that a different type of form will work better than others with the client’s design or will generate more leads. Since you have some experience to back up your ideas, you want to suggest those changes to your client.

If you’re looking to convince a client that your idea has merit, be sure to present yourself like an expert. Use data and as much information as you can, and create a mockup so they can see exactly what you’re talking about.

Make sure it stays consistent with their branding and actually helps them. You can do this by offering it up as something that will genuinely add value to their business.

And, above all, communicate like a customer service rep – listen, engage, and don’t forget to play nice. Soon your clients will be falling over themselves to implement your awesome new ideas.

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.

3 Things to Fix On Your Forms If You Want Conversions

Forms are all about action.

More specifically, they’re all about getting your users to take action. Whether it’s signing up for your newsletter or downloading your latest white paper, you want to get your users to do something – that’s called a conversion.

But conversions don’t happen by accident. The way you design and program your form plays a major role in how many people follow through with filling it out.

Unfortunately, there are a few areas that most designers or developers overlook when creating their forms, and it’s costing conversions.

Here are three key areas you need to fix on your forms if you want to keep your conversion rates high.

Error Messages

Error handling is typically one of the last things a developer will do when putting together a form, which often means that it’s the one process that gets the least amount of attention.

But a form that doesn’t tell you exactly what went wrong when an error occurs or leads you to a 404 page – or, heaven forbid, somewhere else entirely – is not just annoying, it’s a signal to your users to never come back and finish that form.

Suddenly your conversions drop and you’re not sure why.

While the first and most obvious step is to prevent errors wherever possible – and ideally they don’t happen because of a design flaw – it’s still important to have a great error handling system in place should errors occur.

Here are a few things to keep in mind when working on your error handling:

Avoid negative words. While errors are bad, you don’t want the wording to elicit feelings of fear or make them feel that the situation is worse than it is. UX Movement has a great article on making your form error message more reassuring here.

error-messages-negative-words

Avoid using the color red. Instead, highlight error fields in orange or yellow. Similar to the above, the color red – while prominent – can make the user feel like they’ve made a grave mistake. Red tends to be associated with danger, so while you still want your error to stand out, it’s important to signal to users that the error is fixable and that they have nothing to worry about.

error-messages-orange

Specify why the field information wasn’t accepted. Just having a note at the top of your form that says “there was an error” isn’t enough to keep people from panicking. Your error message should tell users exactly which information was rejected and why. For example, an email field should tell users to include the ‘@’ symbol or remind them to double check the spelling of their domain. The more specific you can be, the better.

error-messages-explain

Visual Cues

The next big area you may be overlooking is the use of visual cues.

Many forms come on solitary landing pages, which makes the forms themselves easy enough to find and is one way of getting people to fill out your forms, but that doesn’t always mean conversions will automatically happen.

In fact, whether or not your form is easy to spot on your page, you should include visual cues to direct users there anyway.

Directional cues are signals that tell someone to complete an action, and remember, forms are all about taking action. Cues can include photos, shapes, videos or text, but how and where you use them can significantly impact conversions.

Here are some things to keep in mind when it comes to drawing your visitors to your form:

 

Use an image of a person looking at your form. Humans are social creatures by nature, and so they tend to be drawn to what others are looking at. You can use this human trait to your advantage by having your images direct people to fill out your forms.

 

Have a person or group of people looking at your forms with their eyes, pointing to your form with their hands, or even holding your form.

visualcues-people

Use arrows. Symbols and shapes drive much of our visuals in modern advertising, and the arrow is the king of the symbols when it comes to directing users to take action. Nothing says “look here” quite like it.

Reboot Authentic, for example, uses three arrows to direct visitors to their lead-capture form:

visualcues-arrows

Limit objects in the same visual view as your form. Minimizing the noise around your form will certainly draw the most attention to it, but that doesn’t mean you need to create a whole separate landing page for each form. You can also use colors to visually direct users to your forms, or make use of blank space to create a contrast that stands out.

Twitter does a fantastic job of this on their signup page:

visualcues-simplicity

Button Language

Of course, it could be argued that you should never rely on design alone to communicate.

After all, 8% of men and 0.5% of women have a colour vision deficiency. Another 39 million are blind and 246 have low vision. Communicating with visual-only cues just won’t catch everyone.

While pictures and arrows may help people find your form, the “Submit” button does most of the heavy lifting. That’s where your button copy comes into play.

Buttons will tell users to “Get a quote,” “Download,” “Open an account,” or even “Go to checkout.” But whether someone submits your button depends on the quality of the text itself.

Here are a few things to keep in mind when selecting the right copy for your buttons:

The copy should begin with a verb. Otherwise it’s not really a call-to-action, just a button with some text on it. “More information” for example, is not a call-to-action.

better-submit-button

The language should fit the context. If you’re signing up for banking online, for example, you’re going to expect words like “Register” or “Apply”. If you’re signing up for an e-commerce site, you look for “Sign up” or “Go to Cart”.

It’s also important for the language to be personal wherever possible. If the overall context of your site is friendly, using text like “Sign me up” instead of “sign up” can also improve your conversions.

Think about what your user would say. Imagine that you asked your user what he or she was trying to do. If they would say, “I want to sign up,” then you would use text like, “Sign up.” If you were asking the user “Would you like to…?” then the text would sound more like, “Sign me up.” These are what Jared Spool calls “trigger” words.

For any button text, ask yourself if it fits with the statement “Would you like to?” or “I would like to”. The question: “Would you like to sign me up?” doesn’t match with: “I would like to sign me up”.

Final Thoughts

When it comes to improving conversions on your forms, there are really three key areas you need to watch out for: error messages, visual cues, and button copy.

If your users aren’t taking any action, then you want to use visual cues to direct them.

If they’re not sure if they want to submit the form they’ve just filled out, then use your copy to elicit an action.

And if they have taken the wrong action, gently nudge them in the right direction.