How to Create Better WordPress Forms Without a Plugin

Introduction

The WordPress repository has thousands of plugins, which you can use to extend the functionality of your static WordPress website. For example, there are several plugins that you can use to create forms and harvest user information.

However, the WordPress plugins are cumbersome to manage and, frequently, deny you the control to build things from scratch and create products that best resonate with your needs and preferences.

In this blog post, we’ll talk about how to ditch plugins and create better WordPress forms using FormKeep.

Why Minimize Plugins on Your Static WordPress Site?

Plugins are the lifeblood of most WordPress websites and blogs. They allow you to add custom features so that you can enhance the functionality of your site to suit your specific needs.

However, as much as plugins are important, they can lead to poor performance for your WordPress site. Therefore, it makes sense to look for ways to add features without relying on the plugins when you can.

Here are some reasons why you should minimize the number of plugins on your static WordPress site.

  • Slow performance: Each plugin you introduce adds its own code and files to your WordPress database, which could slow down your site’s performance and increase its memory requirement.
  • Complicates management: Managing too many plugins on a WordPress site is cumbersome. You need to update the plugins constantly to keep them up-to-date. Furthermore, plugins can conflict with each other, and make your website to crash. Therefore, keeping to fewer plugins can assist you in quickly troubleshooting any issues with your site.
  • Exposes security risks: Some WordPress plugins are poorly coded or are not updated frequently to seal security loopholes. Since the risk increases every time you install a plugin, reducing the number of plugins could decrease the exposure to security vulnerabilities.

How to Create a Form Without a WordPress Plugin

As much as WordPress plugins let you create forms quickly and easily, some developers and designers are looking for unique customization options that suit their expectations.

For example, the plugins do not come with fine grain control options that support extensive modifications to suit the varied needs of users. As such, they opt to create WordPress forms without relying on any plugin.

Here are the simple steps for adding an HTML coded form on a WordPress page:

After logging into your WordPress dashboard, select Pages and click Add New.

  • Give the page a suitable title, like “Contact Us.”

  • Add a Gutenberg custom HTML block and write the code for your form.

If you are using an old WordPress version without the Gutenberg HTML block, you can click the Text tab and start writing the code for your form.

For example, here is the code for an HTML form we wrote to capture users’ data without using a WordPress plugin.

See the Pen
WordPress HTML Form Example
by Alfrick Opidi (@jasoya)
on CodePen.

When the coded form is published on a WordPress page, the resulting output is more flexible and robust than what you might get from a form plugin and, importantly, you maintain the simplicity, security, and manageability of a WordPress site with one less plugin.

Clearly, when creating a WordPress form without a plugin, the possibilities are limited only by your imagination and ability to propel yourself beyond your design boundaries.

If you intend to create better WordPress forms using custom code, it is essential that you specify the place to POST the submitted data for storage and processing. See below for more details.

Though WordPress plugins allow you to send the data to an email service, using a versatile tool like FormKeep offers a comprehensive and resourceful way of handling the collected information.

Limitations of Plugins to Create WordPress Forms

Even if WordPress plugins provide an easy way to create forms, they come with lots of limitations, which may impair the forms’ intended purposes.

Here are some limitations of using plugins to create forms on WordPress.

  • Inflexible customization options: Most WordPress forms plugins do not give you the complete control of creating something that reflects your tastes and preferences.
  • Difficulties in handling lots of data: Most of the plugins for creating forms allow you to provide an email address where the user submitted information will be sent. If you have a lot of submitted data, relying on an email service to process and manage the data becomes difficult.
  • Integration with third-party applications is not supported: Most of the forms created using plugins do not support integration with other external tools. This way, it becomes difficult to pass the form data to other third-party tools for enhanced processing and management.
  • Prone to security flaws: Since many developers rely on WordPress plugins to enhance the functionality of their websites, this has made the plugins a prime target for computer hackers. If a security loophole can be found on a plugin, it can simply be extrapolated to affect multiple websites.
  • Compatibility issues: The WordPress platform is often updated frequently. And, some of the plugins’ developers are unable to keep with the frequent updates and change their codes accordingly. As a result, this often leads to compatibility issues between the WordPress platform and the plugins. Furthermore, some of the plugins conflict with each other and lead to malfunctioning of WordPress sites.
  • Reduced performance: Installing several plugins to create forms and complete other actions may weigh down your WordPress site and affect its performance and speed.

Create Better WordPress Forms With FormKeep

FormKeep makes it easy to overcome the limitations of building WordPress forms using plugins. The tool is built with the needs of developers and designers in mind, and it will assist you to make the most of the collected user data.

Here are some benefits of using FormKeep to process and manage the form data on your WordPress website.

  • Exert full control of your forms: Unlike most WordPress plugins, FormKeep lets you customize your forms and design them to suit your specific preferences.
  • Better processing of form data: Whether you have lots of submitted data or not, FormKeep has many ways of helping you to process and manage the data without solely depending on an email service. You can use FormKeep to export form data in CSV format or use its developer-friendly JSON API to access the submitted data easily.
  • Heightened security: FormKeep uses the latest state-of-the-art cloud technology to provide optimized security to form data. What’s more, the tool has a sophisticated spam filter that assists in keeping your inbox clean and pristine.
  • Minimal maintenance requirements: With FormKeep, you’ll not be required to make frequent changes to stay updated with the latest version of WordPress or to constantly jump into your code to solve some compatibility issues with your other WordPress tools.
  • Improved performance: Creating a customized form using FormKeep allows you to avoid uploading unnecessary code to your WordPress website, which leads to enhanced performance.
  • Availability of extensive integration possibilities: FormKeep integrates flawlessly with several third-party tools. Therefore, you can conveniently manage the submitted form data and make the world to spin in your favor. For example, since FormKeep supports Zapier integration, you can confidently share your form data with more than 1,000 applications, including Mail Chimp, Slack, Constant Contact, Google Gmail, Salesforce, or HubSpot. Here is a screenshot of the Zapier website showing some applications that integrate with FormKeep.

How to enhance WordPress forms with FormKeep

To create better WordPress forms without relying on any plugin, you’ll need to write your own custom HTML form and then connect it to FormKeep.

As we illustrated in the earlier example, when uploading custom forms on the WordPress platform, it is important that you state where to POST your collected data—and this is where FormKeep saves your day!

To connect the HTML form to FormKeep and benefit from enhanced data processing and storage capabilities, you’ll need to add your FormKeep credentials in the action attribute of the custom form.

For example, here is how we included the details in the earlier example.

<form accept-charset=”UTF-8″ action=”https://formkeep.com/f/exampletoken” method=”POST” target=”_blank” id=”wpform”>

Your opening form tag should correspond to the above example. Remember to edit the exampletoken with the token credentials you were given after opening a FormKeep account. You can sign up for a FormKeep trial account and start using the free tokens right away.  

After connecting your custom HTML form to FormKeep, the submitted data will be forwarded securely to your FormKeep account. Consequently, you can implement data integrations with external tools, export the data to your preferred destination, view form submission reports, and carry out other activities.

Wrapping Up

Creating forms with WordPress plugins is fantastic and can save your time. However, using this shortcut can negatively impact the performance of your WordPress website.

Forms created using plugins are incapable of handling voluminous data, expose the website to security vulnerabilities, and cause other problems to WordPress sites.

FormKeep is an innovative tool that grants developers and designers the complete control of their forms. With FormKeep, you’ll get increased security, extensive integration capabilities, and several other better ways of processing and managing form data.

Do you want to learn more about using FormKeep?

Then, click here to go to the Interactive Form Demo environment.

If you have not tried FormKeep for building wonderful WordPress forms, then you need to give it a try today!

If you need any help on using FormKeep without depending on plugins, feel free to contact our friendly developer team at support@formkeep.com.

Build a Website and Add a Form

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

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.

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

Koding – Browser-based IDE

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

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. The team over at Raygun have a great blog article about 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 Smashing Magazine, 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.

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.

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.

How to Handle Design Feedback Like a Pro

Possibly the scariest part of any designer or developer’s job is turning in your design to a client.

The trouble is that you never really know if your client is going to love it or hate it. Depending on the client, submitting a preview can mean plenty of additional hours spent reworking things to get them to up to expectations—and that’s never fun.

No one likes being told that their design choices are wrong. It can be difficult not to react in frustration to negative feedback, but how you handle yourself can mean the difference between successfully completing a project or losing a client for good.

So, how exactly do you handle feedback well?

You want to ask good questions, use every resource available, and try to turn a potentially negative experience into a positive. Here’s how.

Asking Questions That Clarify

shutterstock-190923107-web

The reality is that no designer really loves feedback. Ideally you want your clients to love your project and understand your genius from the moment they lay eyes on it.

Unfortunately, feedback is an integral part of being a designer, but that doesn’t mean it’s necessarily a bad thing. Not only does it help the client clarify and refine their desired outcomes, it also helps you become a better designer by letting you stretch your genius outside of your normal limits.

But, the ultimate goal is to get feedback that’s helpful towards both those ends, and one of the best ways to do that is to take charge of the feedback before it even comes your way. You can do this by providing a series of questions that your clients can respond to.

Some example questions could include:

  • Does this reach your target market in the way you imagined?
  • Does this feel “on brand” or “on message” for you?
  • Were you able to find all the information you were looking for?
  • Do you find the information or design valuable for your users?
  • How does this compare to your expectations?
  • What are some noticeable weaknesses? Strengths?
  • When you see this for the first time, what thoughts come to mind?
  • Would you recommend this [design/site/etc.] to others?

Not only do these questions help clients provide feedback that you can actually implement, but they also minimize comments and dialogue that aren’t helpful or that you can do nothing about.

Instead of simply asking for general or vague feedback or saying, “Let me know what you think”, try starting a conversation that will be productive for both parties involved, while giving you a little more control.

Using Preview/Prototype Tools

Since feedback can often take up a lot of time depending on the complexity of the design (or client) involved, using resources and tools to help minimize that effort will go a long way.

Using preview or prototype tools will help you move the conversation along, make the changes you need in real time, and also make you look extremely professional and put together.

You can either use these tools before a project begins knowing that you’ll have to share them with clients or team members, or you can use these tools to help you after you’ve already built the project and need a way to share and collaborate with minimal effort.

Here are a couple of the top preview tools to consider:

Red Pen – This app allows you to upload your current project, add notes, and share your preview URL via email to clients. There’s no need to log in, as it remembers your link so you can retain all ownership of your uploads.

http-_2F_2Fmashable.com_2Fwp-content_2Fuploads_2F2013_2F08_2FRedPen

Bounce – Bounce lets you collaborate between project members using screenshots or by uploading images. You can also make notes, add names to specific elements, and share your feedback through a URL or social media link.

If you need to build or share a website that will have interactive elements, you might want to consider:

Avocode – Avocode makes it easy for frontend developers to code websites or apps by syncing with your PSD files. You can leave notes for other team members, export, upload and share sites, and give specific feedback while visually comparing design versions.

og-hp

Flinto for Mac – This app lets you create prototypes for mobile as well as web and desktop apps, so if your client really wants to see what a mobile app would look like, you can build an example fairly quickly.

Adobe Experience Design CC – Adobe UX Design also lets you create prototypes for websites and mobile apps, with a preview feature that allows for live changes, as well as a sharing feature for quick feedback.

Turning Negative Into Positive

aotfm79t2d3x917fmmbw

Let’s say that you’ve done everything on your end to help create a positive experience—you’ve asked the right questions, you’ve provided the right sharing platform—but at the end of the day the client still isn’t happy. Does that mean doom for your project?

Negative feedback doesn’t have to be a bad thing if you say and do a couple important things:

Don’t take it personally. Remember that you did your best with the knowledge that you had, and now that you have more, you can make changes that are more in line with the client’s wishes.

Restate intentions. Sometimes things get lost in translation, so rephrase or restate what you think you’re hearing the client say so that everyone is on the same page. It can also be helpful to ask more questions or for suggestions they might have that can be easily applied to the project.

Do your research. If the client is asking for something that can’t be done, know about it before hand so you don’t say yes and then have to backtrack later. If you’re not sure about something, let them know you’ll discuss it with your team or look into it and get back to them as soon as possible.

Make a list of actionable items. Sometimes what a client wants just isn’t going to be a reality—you know that, but they might not. Give them a list of things you can change and explain to them as thoroughly as possible why some solutions just won’t work.

Provide alternatives. For those things that really can’t (or shouldn’t) be changed based on the feedback provided, offer one or two alternatives. Don’t simply ask the client for things they’d like to see instead, but present them with options so that they don’t ask for something else you can’t follow through on.

Respond promptly. There’s nothing that screams “unprofessional” like taking too long to reply to an email or missing a scheduled phone call or meeting. Do your best to provide responses quickly and assure them that they’re your priority.

Final Thoughts

While receiving feedback isn’t always the best part of the job, it can be a helpful experience for both you and your client if you’re able to handle it professionally.

One of the best things you can do is ask questions and constantly clarify things throughout the project so that your client can rest easy that you know what you’re doing.

Being sure to use any tools or resources that helps clients be a part of the decision-making process can also help foster a sense of loyalty as well as move the project along faster.

And should negative feedback still come your way, don’t panic. Keep asking questions, keep clarifying, and keep responding and your clients will thank you.

Here’s Why Your Opt-Ins are Unsubscribing (And How to Fix It)

Email marketing is a hugely valuable tool.

In fact, according to the Direct Marketing Association, email marketing brings in around $40 for every $1 you spend, making it one of the highest ROIs for any time of marketing out there.

It can be reasonably assumed that the whole point in capturing emails and having subscribers is to convert those emails into loyal customers who either buy your product or service or tell their friends to buy your product or service (or both).

list-segmentation-results

Even if you’re just running a blog or a content site, those emails are everything. So what happens if all of a sudden you’re not getting as many subscribers as you once did?

Or worse yet, what happens when people that have already subscribed start to opt-out of receiving your emails?

Here are a few of the most common reasons people are opting-out of your email lists, plus what you can do to stop that from happening.

They’re Not In a List

The biggest problem when it comes to opt-ins is not having opt-ins (or opt-outs) because all of your emails go to all of your subscribers.

Not having any form of segmentation is a one-way ticket to unsubscribers, but if you’re running your email campaigns yourself, it can be tricky to manage all of those lists. That’s where third-party email marketing services can help.

Where to Send Your Form Submissions

If you’re using WordPress, you can use plugins like MailPoet or Newsletter to create real email system that allow you to create newsletters, automated emails, post notifications and more directly from WordPress while allowing you to segment your lists (to some degree, anyway).

If you really want to segment your lists, you can use a email service like MailChimp, Constant Contact, or AWeber (etc.) and integrate them with your CMS of choice using Zapier to create targeted emails to certain lists.

Whichever method you choose isn’t really as important as having some plan in place for your emails once they’ve been submitted on your site.
They’re In the Wrong List

Once you’ve warmed up to the idea of segmenting your lists, then comes the hard part. You have to figure out exactly which emails belong in which list.

The whole point of segmentation is to provide relevant content to the recipients, so if someone opted in to get your monthly newsletter but you send them promotional emails about events instead, your likelihood of unsubscribing is high.

So how do you segment your lists for better results?

How to Segment Your List

Welcome emails should, for example, go to your new subscribers or users. But you can also send a version of a welcome email – either a “we miss you” or “are you still there?” email – to those who haven’t been actively opening your emails.

Keeping track of those lists may be a little trickier, but if you’re using a third-party email marketing service like MailChimp (or similar), they often keep track of those lists for you.

But there are other ways to segment your lists that you may not have considered, including:

  • Demographics – Age, gender, company, position, etc.
  • Sending frequency – Some people want emails more frequently than others
  • Location – Knowing something as simple as a location can help you gauge send times and even personalize subject lines for better open-rates
  • Weather Patterns – Skymosity is a company that can track weather patterns and create automated email campaigns that are deployed by weather-based email triggers, which can be helpful for certain industries (fitness gear, outdoor living, etc.)
  • Email activity – Some people stop opening emails after a certain point, which can be helpful to know in order to send a “we miss you” email to reactivate their interest

brooks_weather_segmentation

Source: Skymosity

There are many different ways to segment a list, but the most important part of that segmentation is not just getting them into a list, but also getting them the right content for that list to keep them engaged.
They’re Getting the Wrong Content

The average email user sends and receives around 105 emails per day, with 81% of those emails containing valid content (as in, not spam). This means that while sending out emails is a great way to capture your audience’s attention, it’s also ground zero for competition.

One of the biggest factors when it comes to people unsubscribing from your lists is that they’re simply being overwhelmed with content that doesn’t relate to them. Thankfully, there are a few easy ways to fix that by targeting your content more dynamically.

Types of Content to Send to Each List

Newsletters often go out to anyone in your email list, but some do a good job of separating their newsletter lists from their general email lists, so only the people who want the newsletter actually get it. But you can take this a step further by actually creating targeted newsletters based on niche topics and segmenting your list further.

One way to implement this strategy is to include separate opt-in messages in your welcome email, also known as an opt-in bribe.

WelcomeEmailOptIns

Each link in your welcome email could lead to a different list so your subscribers are essentially telling you exactly what they want from your emails. Here are a few different types of content you can send to varying lists:

  • Welcome Email
  • Expectation Email
  • Tools and Resources Email
  • How-To Email
  • Getting to Know You Email
  • Unexpected Freebie Email
  • Exclusive Content Email
  • Basic Content Email
  • Archive Email
  • Curated Email
  • Newsletter
  • Buzz-Building Email
  • Testimonial Emails
  • Favorite Things Email

The truly important thing to remember is that the type of content you send out should reflect the list it’s being sent to. You wouldn’t send a welcome email to someone who’s been a subscriber for years.

Likewise, you shouldn’t send a newsletter to someone who just wants to know about events (unless your newsletter is all about your events).

Sometimes targeting certain content to different groups is a matter of trial and error, so it’s important to keep track of open-rates and watch your demographics (and other factors) closely to see what works and what doesn’t work.

Final Thoughts

When it comes to improving your conversion rates, there’s really no better tool than email marketing. But what you do with your content and your segmented lists makes all the difference between effective and ineffective marketing.

First, if you’re not segmenting your lists, get on it ASAP.

Second, once your lists are segmented, make sure that every email is where it’s suppose to be and every one who has opted in to your lists wants to be there.

Finally, make sure that the content you send to each list is relevant to the interests of those lists. If you’re not sure if it’s engaging enough, try targeting your email opt-in links in your welcome emails (or any email) to narrow down the field.

3 Major Speed Hacks for Busy Developers

Web developers sometimes get the short end of the stick when it comes to building websites.

They’re not quite as lauded as the designer (unless they’re also doing the design), but without them you wouldn’t have much in the way of functionality.

Truly, developers are the heart and soul of a website, and they understand one simple principle: Even the simplest website has a lot of code.

Which means that if you’re working as a developer, you’re going to be busy.

Now, there are a lot of ways you can build a website quickly, like using a CMS or a static site-generator. But sometimes you have to handle code the old fashioned way, and you just need a little help.

The good news is that there are a few things you can do to make building a website faster and more efficient than ever. Let’s take a look.

#1. Use Browser Tools

It should go without saying that if you’re building a website, you’re going to spend a lot of time on the web. So, as long as you’re there, why not put your browser to work for you? Here are a few popular options for browser add-ons that can save you time.

FireBug and Chrome DevTools

Sometimes you’ll run into problems with your code not displaying properly on the front-end. Instead of searching through lines of code, you can quickly find the problem by using a browser extension like FireBug (for Firefox) or Chrome DevTools (for Chrome).

chromedevtools

Each allows you to inspect, edit, and monitor your code in any web page to see where things are working (as well as where they’re not working).

Web Developer Toolbar

Available for Firefox, the Web Developer Toolbar gives you a few options for editing style sheets in real time. You can also perform a variety of other helpful tasks straight from your browser’s toolbar, including disabling problematic JavaScript and CSS, quickly validating HTML links, and more.

ColorZilla

Have a designer or client that’s super picky about the color of a font or element? Well, don’t sweat it. Available for both Chrome and Firefox, ColorZilla lets you select the exact color of an image or element and gives you the right color code. It can also be used to add and edit gradients in addition to some other helpful features.

colorzilla

Wirify

Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. It’s a great way to get a high level understanding of an existing website.

InstantWireframe

There are plenty of other browser tools that can help speed up your coding process. CreativeBloq has a list of 29 tools for handling various tasks directly from your browser of choice.

#2. Use Off-The-Shelf-Code

A lot can be said for a CMS that gives you pre-made templates to work with, but that’s not always an option if you’re coding a site from scratch.

That being said, coding a site takes a lot of work even with a template, so if you’re looking to save time and you’re not cornered into a particular template or design already, consider using a pre-made CSS library, boilerplate, or framework to help you out.

Bootstrap

Bootstrap is a powerful and popular front-end framework that gives you clean typography, form elements, and almost everything you really need to create a modern and mobile-ready website.

bootstrap

Grunt

Grunt is a boilerplate – a template for code – that gives you hundreds of plugins to automate just about any task. Many developers shy away from boilerplates because they either don’t know how to use them or they don’t know about them. But boilerplates like Grunt can help take care of recurring issues, hand off projects to other developers, and improve your process overall.

Grunt

Skeleton

Skeleton is another boilerplate framework that makes it simple to create a grid-based site. Their grid includes up to twelve columns and shrinks with the browser/device at smaller sizes. The syntax is also fairly straightforward, making coding response times faster.

skeleton

#3. Use Project Planning Tools

One of the biggest time wasters when it comes to coding is having to go back and repeat a task because it fell through the cracks the first time around. That’s why having a great plan in place from start to finish can save huge amounts of time for developers.

If you’re really looking to save time, you can use project planning tools and checklists to make sure that you’re covering all your basis so everything stays running smoothly.

Writemaps

Writemaps is a tool that helps you quickly create a sitemap and gather content before starting your project. It also gives you the ability to preview your sitemap with clients so they can approve everything before you start, saving you plenty of energy in the long run.

writemaps-slide1

Trello

Trello is a helpful project management tool that lets you create cards for each of your templates and elements so you can keep track of everything in one place. It’s also helpful if you’re working with a team of developers and designers, as you can assign different people to different cards, set due dates, and create notifications for tasks yet to be completed.

Trello

Web Developer Checklist

While technically this could fit into the browser tools category, Web Developer Checklist is an extremely helpful plugin for planning out your project, so we’ll include it here. This extension allows you to check to make sure your pages are following best practices when it comes to SEO, usability, accessibility, and performances, making it great for catching anything you’ve missed before your clients notice.

webdevchecklist

Final Thoughts

Keeping track of everything you need to do to build a website can be tough, but with the right tools, you can save massive amounts of time and energy.

If you’re constantly jumping from your back-end code to your front-end site to see if things are looking the way you want them to, try using tools that make your job a little easier. FireBug can help you detect major issues, while the Web Developer Toolbar can help you fix things up in real time.

If you’re tasked with building a site from the ground up and you’re not sure where to start, try using an off-the-shelf boilerplate or pre-made framework to save you time fiddling around with little stuff.

Finally, make sure you’re not falling victim to the biggest time waster of them all – poor planning. Use tools that help you track tasks, projects, and even team members if necessary, whether it’s through a browser extension like the Web Developer checklist or an external app like Trello.