FormKeep 2019 in Review

Thank you for making 2019 a great year for us! We’ve been listening hard to all the great feedback from our customers and we have been regularly releasing new features and improvements.

Below we’ve highlighted the more interesting changes this year driven by your needs. Thanks for all the feedback and keep it coming! Please send anything you’re looking forward to seeing in 2020 to support@formkeep.com.

File Upload Support

Your forms can now upload images and documents directly to FormKeep and we’ll take care of them. The email notifications will include a link to the uploaded file, or you can send them directly to third parties for additional processing.

Form Designer

This year a lot of effort was spent on delivering a simple and easy to use Form Designer, allowing you to quickly create forms and start collecting submissions from your customers immediately.

Collaborators

Many of our larger customers who have many people working together wanted a simple way to share Forms between their team members. Under the Collaborator tab on a Form you can now control who has access to edit the form, or just have access to the Form submissions.

Slack and Google Sheet Integrations

These were two of the most popular requests from our customers, so we’ve integrated directly with them, making it super simple to send your submissions to these providers. We continue to support thousands of other integrations as well.

Server Side Validations

There’s a lot of ways to protect against spam and we’ve added a commonly requested way to specify which fields need to be filled out. Combined with our industry leading spam solutions, validating this on the server-side allows you to protect better against spam bots and scripts.

Email Response Tags and Attachments

We’ve expanded your ability to format automatic response emails by supporting replacement tags in the body and subject fields. This allows you to include information from the Submission into the response. You can now also attach a file to be sent directly to your customer.

New Pricing Plans

Last year we introduced some entry-level price offerings. Some customers asked for a simple HTML form to email support without all the integrations and other bells and whistles. On the flip side, we’ve also added pricing support for large scale customers who need thousands of forms under a single account. We’re happy to talk about any custom needs you may have, just reach out to support.

Everything Else

We make constant improvements to the site every month, these are just the top feature requests that were driven by our customers. Thanks to everyone for their feedback and continued support.

Please let us know what you want to see in 2020 at support@formkeep.com

How You Can Do More With Weebly Forms

Introduction

Weebly is a wonderful website and ecommerce service that hosts millions of businesses online. Weebly tools make it easy to build a professional, mobile-optimized site and grow your business with integrated marketing and advanced analytics.

In this blog, we will cover some basics about how to add a basic form to a Weebly site and, also, how to expand Weebly’s native form capabilities with FormKeep.

Basic Forms In Weebly

Though most users build static web pages on Weebly; the service does offer a simple form way to add a form to a web page. To add a simple Newsletter Sign-Up Form or Contact Form all you have to do is drag the corresponding icon from Build menu (i.e., Build/Basic/Contact Form or Build/Basic/Newsletter Form) as shown below:

html form, weebly
Weebly Form Actions

In this example, we have added a simple Contact Form to one of Weebly’s standard templates (highlighted in red). This form includes name, email and contact fields.

html form, weebly form, contact form
Simple Weebly Contact Form

Once the form is in place, there are a number of configurable options. Click on the form element within the Weebly designer and then click “Form Options” to reveal the Form Options panel. Here you will have options for configuring the email that will receive data from the form, Google Captcha spam protection, opt-in and some other settings as you can see below:

html form, weebly form, contact form
Weebly Form Options

Once your form set up and you’ve pushed your website into production, your form can begin receiving data. When users submit information via the form you created you will receive an email that notifies you and contains the form data. You can also log into Weebly and access the data by clicking on the form element in the page designer and selecting “View Entries”. Here’s what the data looks like when you access it via the Weebly console.

html forms, weebly forms, form data, contact form
Weebly Form Data

Weebly’s built-in form builder is very powerful and simple to use. It makes form building easy for many users. However, some users are looking for opportunities to do even more with the Weebly forms. We will explore some of these opportunities in the next two sections.

Controlling The Look And Feel Of Your Forms In Weebly

As powerful as the Weebly form builder is for most users, some users want to exert fine grain control over the look and feel of their form. For example, the default form in the example above is a bit hard to see against the background used in the selected template. How can a designer make this form pop out against the background?

html form, weebly form, form design
Form Enhancement Opportunities

Weebly does not offer fine grain control of these elements in the standard form options area. However, Weebly does offer a relatively simple way for developers and web designers to control the look and feel of their form element. Rather than using the included form builder, designers who would like more control can use the Embed Code functionality within Weebly. Rather than dragging the Contact Form or Newsletter Form icons onto your web page, simply drag the Embed Code icon as shown.

html form, weebly form, custom form
Embed Code and Custom HTML Form


With this embedded control in place, the designer or developer can now custom-craft an HTML form to fit their needs and design preferences. In this example, we used the following HTML to design an enhanced form for this template:

See the Pen Weebly HTML Form Example by FormKeep (@formkeep-samples) on CodePen.

The result, when this code is placed in the Edit Custom HTML widget within Weebly is a form with different styling than the native form tool would normally allow. In this case, the form is formatted with a background that allows the form to become more visible against the template background. See the comparison below.

html form, weebly form, styled form, form comparison
Weebly Form Comparison

Obviously, when using the Custom HTML capability within Weebly, the design possibilities are bounded only by your imagination and design sense.

One thing to keep in mind if you use the Custom HTML capability is that you will have to designate a place for your form data to POST information for storage and processing. Weebly normally handles this for you. However, FormKeep makes this easy. You can learn more about how to do this at the bottom of this article. Read more below or click here to skip directly to the appropriate section.

Enhancing Form Data Management and Integration in Weebly

As we discussed earlier, Weebly handles your form data by default in two ways: 1) an email is sent to a designated email address each time a form is completed with the data from that form and 2) the data is accessible via Weebly’s interface when an administrator selects “View Entries” in the form widget.

For many applications, this is adequate. However, if any of the following apply to you then you may be looking for some more advanced data handling capabilities:

  • Lots of Data:
    If you are receiving a lot of data in each form or many form submissions, it may not be convenient and manageable to receive all of the information in an email.
  • Data Routing:
    If you want to route the data to more than one person, it may not be convenient or secure to share the log in credentials to Weebly or route the data through a single email address.
  • Integration with Other Applications:
    If you would like to pass your data on to another system you will need a point of integration that is not available in a standard Weebly form.
  • Excess Spam:
    Google Captcha will reduce but not eliminate spam. Or, you may decide not to use Google Captcha. If you don’t want to flood your email inbox with spam submissions, you may want a data management rather than email solution for handling forms.
  • Field Validation:
    If you would like to use custom field validation logic, you can do that with a custom HTML form.
  • Many Forms On Separate Pages:
    If you have a long form or multiple forms broken across several pages, you may wish to view all the data in one place.

In each of these cases (and many others) you may benefit from using a form backend like FormKeep alongside your Weebly site. With FormKeep, instead of routing your form data to Weebly or to email, your data will be stored, secured and accessible in the cloud. From there, you will have a variety of tools to help you manage your form data and route it in a variety of different ways.

One popular way that designers and developers use FormKeep is using WebHooks or integration via Zapier to feed data to other applications like Hubspot, Constant Contact, Google Gmail, Salesforce, Slack or Mail Chimp (and thousands of others). You can search for over a thousand different integration points between FormKeep and other applications on the Zapier web site (pictured below):

html forms, formkeep integrations, zapier, zapier integrations
FormKeep Integrations – Zapier

In order to take advantage of advanced data routing capabilities available in FormKeep you will have to place your own custom form into your Weebly page and then point that form to FormKeep.

You can read more about how to create a Custom HTML form within Weebly at the top of this page (Click Here)

Enhancing Weebly Forms with FormKeep

One thing to keep in mind if you use the Custom HTML capability within Weebly is that you will have to designate a place for your form data to POST information for storage and processing. Normally, Weebly handles this for you with their standard form tools. However, fear not! This is where FormKeep makes life easy.

Let’s review an excerpt from the form code from the CodePen example above. At the beginning of the form you will notice this syntax (Click Here to View Above):

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

All you need to do is update the action attribute in your form. Your form tag should look like the example above paying careful attention to exampletoken to the token provided to you within FormKeep (Trial or Paid account). You can create one of these tokens for free by signing up for a free trial account at FormKeep Free Trial.

Once you’ve created your HTML form and configured the action attribute, the data will be posted directly to your FormKeep account. From there, you have the option to configure many settings such as spam suppression, thank you pages and re-directs as well as integrate your form with thousands of other applications via Zapier.

You can experiment with this in the FormKeep demo environment in CodePen by clicking here.

If you would like help getting FormKeep setup with Weebly, feel free to reach out to our friendly 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

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">

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.

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.

The Quickest Ways to Modify and Optimize Your WordPress Themes

Do you remember the good old days when creating a website meant spending countless hours coding everything from scratch? Of course not, because you’re a WordPress developer, which means you have access to themes.

The great thing about themes is that they come pre-packaged with thousands of lines of code someone else spent time developing, which is truly life saving when it comes to time management. The downside to themes, however, is that someone else created them, so if the theme doesn’t match up with all of your needs, you’re going to have to put in a little extra work.

But the great thing about WP is that you don’t have to sacrifice your precious time to customize and optimize those themes. In fact, depending on your needs, there are several quick ways to make sure your theme has everything you need.

Pre-Optimization Cleanup

Before you really get into the nitty-gritty of optimizing your WP site, you can save quite a bit of time by going through your out-of-the-box theme and cleaning it up. (Actually, you can do this at any time of the process, but it’s arguably more helpful before you start working on a new theme).

Clean Up Messy Code

wp-codesnippets

Developers and programmers have a reputation of using messy code. But, to be fair, they often have a lot to do in a short period of time, and going back through hundreds of lines of code isn’t always on the agenda. It’s a “code first, ask questions later” sort of approach, which saves time but isn’t always the most productive in the long run.

Messy code in your theme can make it harder once it’s time to modify major sections of the site. Messy code can be anything from mixed coding styles, spaghetti code that can only be understood by the original creator, or unextendable code that just doesn’t play well with others.

Some things to look for when it comes to cleaning up code – even in a fairly clean, freshly downloaded theme – include hiding unnecessary or unused shortcodes (the good news is there’s a plugin for that), unwanted media (another plugin), and underused tags (did we mention there’s a plugin?). You can find more easy ways to cleanup areas of your theme at wpmudev, too.

You should also continue cleaning up your code as you go along, especially if you’re one to leave yourself comments or pieces of code that you plan to come back to later (but eventually forget about). At some point you should revisit your style.css file in your Theme folder and do some stylesheet housekeeping.

Ongoing Optimizations

Of course, once you start getting into heavier modifications to the site, you will inevitably wind up with more stuff than you really need on your site’s backend. All of the clutter can really bog down your overall speed, so the best way to optimize your theme is to get rid of all the extra stuff that came with it (or that you added).

Hide and Remove

A few immediate things you’ll want to remove include unused plugins. While you’re bound to keep a few around for functionality (and to clean up your code, don’t forget), there are just some plugins that you will have test driven with unsuccessful results. Ditch them as soon as possible.

Like we mentioned above, you’ll also want to remove any code (shortcodes, tags, etc.) that doesn’t add value to your site. You can use plugins to take care of them quickly. But you should also consider removing things like certain elements from your headers and even old themes that you’re keeping around “just because.”

In terms of usability, you can also hide parts of the dashboard or the visual text editor to give yourself a more seamless coding experience. Basically, if you don’t really need it, find a way to get rid of it. For things that build up over time like new code or plugins, like your mom used to say – if you’re done using it, put it away.

Selection_036

Source: WP-Optimize

Optimize Images

Images are a major part of your site, and not to beat a dead horse, but they’re important to your usability. But WP doesn’t always optimize images as well as it should.

For example, WP often adds layers of compression to their images. So, if you’re using the internal image editor to crop or edit a picture, the resulting image will be saved multiple times. Those images will also include their own attachment pages that quickly eat up space on the server if your site is image heavy.

One way to optimize is to pre-compress and crop images (using free tools) before you upload them. You’ll be saving yourself time later on when you’re trying to figure out why your site isn’t running as quickly as it should.

TinyPNG

Source: TinyPNG

Matteo Spinelli’s Cubiq.org blog also has some suggestions for practically handling images and removing attachment pages, among other things. And don’t forget that there are plugins that can help with a variety of optimization needs to save time.

Backup and Upgrade

Of course, one of the most absolutely essential components to optimization is backing up all of your data as you go, and then cleaning it up periodically as extra data piles up.

Again, there are plugins that can help you backup your database with little to no effort on your end.

Your database will also accumulate unnecessary data over time from things like revisions, spam comments, or even data from plugins that you’ve removed. All of this data can really bog down your site, so after you’ve made a backup, consider using plugins like WP-Sweep or WP-Optimize to remove the excess.

And you should always make sure that your site is running the latest versions of your theme as well as your plugins. You can easily update each from your dashboard, so that’s a no brainer.

Ongoing Modifications

Finally, at some point you will probably need to make some larger tweaks to your site. If you’re working with a child theme in particular, you’ll probably end up creating additional styles and hooks. While all of that will still take time and energy, there are ways you can optimize to keep your expenditure at a minimal level.

Customization

There are generally two types of developers: one that likes to code everything by hand and one that likes to use editors and plugins to help. If you’re of the latter persuasion, you can always use WP’s built-in customizer API to give you a visual representation of the changes you’re making.

Before you go saying, “Well, duh!” you should know that there’s also a tool available that will help you take advantage of the customizer’s advanced features. Last year Redux and Kirki combined forces to create a framework that works fully in the customizer, giving you much more bang for your buck.

And if you still want to hand code, you can always use plugins like Simple Customize or Simple CSS to aide in your endeavor.

Switching Themes

Of course, there may come a time when your site is ready to move to an entirely new theme, which is a hefty task, but it doesn’t have to take as much time as you think.

Using plugins like All-in-One Migration or Duplicate, you can fully export/import your database, media files, plugins, and theme options. If you don’t mind paid options, you can also go with something like WordPress Theme Switcher.

But whatever method you choose, just make sure to follow all of the above tips by backing up your site, making sure there’s nothing miscellaneous in your code, keeping your images optimized, and using the right plugins to assist the job (and getting rid of the ones that don’t).

Why Your Landing Page Color Scheme is More Important Than You Think

When you think about getting landing pages to convert, what comes to mind? A good design? Copy that grabs attention? A big, bold CTA button?

While those things are all important factors to improving conversion rates, there’s one aspect of your site you may be overlooking, and it could be costing you customers.

We’re talking about color.

Surprised? Don’t be. Improving conversions is all about persuasion. You have to convince visitors to become customers based on only a few elements of your site. The problem with our modern persuasion tactics, however, is that we often focus too much on numbers and statistics and forget that we’re trying to sway real-life human beings. As it turns out, one of the biggest influencers for human decision-making is color.

In fact, there’s an entire branch of psychology dedicated to finding out how color affects human behavior (it’s called color psychology), and studies show that when it comes to converting customers, visuals matter.

In a peer-reviewed study, Dr. Satyendra Singh discovered that it takes a mere 90 seconds for customers to form an opinion of a product and that 62-90% of that interaction is determined by the color of the product alone.

So what does this mean for you? It means that if you’re looking to boost your conversion rates, your color scheme matters.

Here’s what you need to know…

Choose Colors by Target Market

The human brain is designed to be a visual processor. It can digest visual information 60,000 times faster than plain text. This means that the colors you use on your landing pages will be instantly processed by your visitors, so knowing which colors will win them over is important.

But there are several ways you can go about choosing the most affective colors for your site. The first way is by assessing your target market, because different people process colors different ways.

Women Prefer…

In a survey on color and gender, 35% of women said blue was their favorite color, while 33% said orange was their least favorite color. If your target market is primarily women, stick with tints of blue, purple, and green, and avoid earthy tones like gray, brown, and orange.

Men Prefer…

If your target market is primarily men, you should use bold colors like red, blue, greens, and even black (it turns out you still want to avoid earthy tones, though). Use deeper and bolder shades of these colors, as they’re traditionally associated with masculinity (and avoid lighter “feminine” tints).

3-color-targeting-demographics

Source: Kissmetrics

If your market is mixed, however, don’t worry. Both men and women are shown to like popular colors in neutral shades, like blue or green. If you have a mixed market you can also choose colors based on nationality instead of gender, too.

International Markets Prefer…

If your company targets an international audience, be sure you understand how color is viewed in other nations. Americans tend to favor the color blue, for example, while Scandinavian countries prefer multi-colors.

In countries like China, for example, white is used for solemn occasions like funerals, so it isn’t associated with the same “happy” emotions (weddings, purity, etc.) that Americans attach to it, while bold colors like red or yellow are highly favored. Americans love blue for its sense of strength and security, but in some countries it’s symbolic of loneliness and sadness.

If you’re still not sure about choosing a color scheme based on your target market (or your market is too broad or convoluted), you can always choose colors based on your company’s personal branding instead.

Choose Colors by Brand Identity

Branding is an important part to any company, and because certain colors convey certain emotions, you want to make sure that your color choices reflect positive emotions for your business.

Red Conveys…

Red conveys a sense of excitement and boldness and is commonly used to advertise sales. It also ignites ideas of passion and hunger, so if you’re looking for immediate action (like a CTA button or a flash sale), use red.

Orange Conveys…

While not the most popular color, orange still has its place on your landing page if you want to communicate friendliness, fun, and confidence, which is why it’s often used for sports and children’s products. It can be used as an accent, or, if you’re an e-commerce site (think Amazon.com), you can use orange to encourage sales during the checkout process.

Yellow Conveys…

Yellow, arguably the happiest of all colors, reflects optimism, warmth, and happiness. If you want to communicate that your business is family-friendly, go with yellow shades. Oppositely, it’s also the color for warning. If you have elements of your site that need to be read right away, use a yellow accent color. Just make sure you don’t use it as a font color, as it can be hard to read if there’s not enough contrast.

Green Conveys…

Green is the color of tranquility, peacefulness, and nature. If you want customers to know that you’re eco-friendly and low maintenance, using green is a great way to do that. It’s also the perfect color for creative industries (graphic design, web development, arts, etc.) as one study indicates that when presented with flashes of green, people had more bursts of creativity than when shown any other color.

Blue Conveys…

Blue is one of the most loved and most used colors, which can be either good or bad depending on your goals. Blue conveys a sense of security, trust, and connection, which is why sites like Facebook use blue (and most of corporate America). But using blue can also mean you’re just like everyone else, so pairing it with less-used accent colors (like orange or yellow) can help differentiate you from your competition.

Purple Conveys…

Purple, like green, is the color of creativity, but it also conveys a sense of sophistication and wisdom, as it’s often associated with royalty. This is one of those colors that work well with luxury goods and services. It’s also heavily associated with femininity, especially in America, so if your target audience skews toward women, this is a great choice.

Black Conveys…

While black may or may not be an actual color, it is a standard for most text. But it can also be used as a deluxe tone. According to an article from Lifescript, black conveys elegance, sophistication, and power, and is considered timeless and classic. Black can also be used to communicate exclusivity and has an added sense of value.

White Conveys…

White can mean different things to different people, but its primary function when it comes to design is actually to help offset other visuals. It may not have inherent meaning beyond “clean” or “professional,” it’s still a valuable color (or non-color, depending on who you ask).

image204

Source: Neil Patel

Choose Colors Strategically

If you’re still not sure which colors will help you reach maximum conversions, consider the following:

First impressions matter. You only get one chance (90 seconds!) to reach your audience with colors, so if you can’t decide between a bold red or a soft yellow, go for whichever will make the most initial impact. Just remember that you want to make a good impression on first-time visitors without alienating your returning customers, so use bold accents with white space to offset other elements. Keep your look clean, but attention-grabbing.

Use bright colors where action is needed. If color choice makes you panic because your current site feels boring (let’s say you used too many earth tones), don’t worry. Using color strategically is about finding areas that need to stand out. Use bright, bold colors like red, yellow, and orange on your CTA buttons, pop-up buttons, or as visual indicators of action steps (like arrows pointing on something to click). You can keep the rest of your page muted if you have standout colors in key areas to make up the difference.

Contrast your colors for legibility. As mentioned earlier, if you’re using bold colors like yellow or orange for your text, don’t put them on equally bright and bold backgrounds. If your text is muted, like gray or brown, make sure the colors are deep enough so they don’t fade into a white background. If you make content difficult to read, you won’t be converting anyone.

The Biggest Landing Page Design Mistakes and How to Fix Them

If you’re a web designer or developer, you know about landing pages. Chances are, you’ve dealt with your fair share, and you know that a good landing page will capture a visitor’s attention, drive ROI, and ultimately generate conversions that create more business. But what happens if your landing page is poorly designed?

Well, none of those things.

If you’ve been working on landing pages for a while and haven’t seen a significant boost to your conversion rates or leads, you may be making a few fatal design errors.

Today we’re looking at the biggest design mistakes when it comes to landing pages and what you can do to avoid them. Let’s dive in…

Unoptimized Images

If you’re a web designer or developer, you’re probably sick of hearing about optimizing your images. But the reason you hear about it so often is that images are a big deal when it comes to design. Pictures have the power to connect and communicate with your audience and draw attention in ways that words alone can’t achieve. But when your images aren’t optimized properly, they can do far more harm than good.

Uncompressed Images

One of the biggest mistakes when it comes to images on your landing pages is keeping them uncompressed. An uncompressed image – or an image that renders at full size every time the page loads – will cause your site to load significantly slower. If you’ve done your homework, you know that site speed is a major factor in conversions. If the design of your site relies on images (which it should, but we’ll get to that), make sure your graphics are working for you and not against you.

How to fix it? CreativeBloq has a list of compression tools available for designers and developers to help compress images.

Unemotional Images

While file size and type have a dramatic impact on your design, it turns out the subject of your images is equally important to optimization.

When it comes to visual marketing, people love bold images of other humans. Human faces draw more attention than any other type of image on the web, and people tend to mimic the behavior of the images they’re seeing. If you have a picture where a person is looking in a certain direction, for example, your visitors will typically follow the image’s line of site, too.

People also tend to copy the emotion they see in the images. One study conducted by Basecamp actually showed that by featuring an image of a smiling person on a landing page, they increased conversions by 102.5%. Basically, if you’re not using your images to convey human emotion and connection, you’re missing out on a huge opportunity.

How to fix it? Choose high-quality images with an emotional appeal (specifically, happy people) and use graphics that include a line of sight that points to specific content whenever possible.

Content Overload

Of course, when you’re designing a landing page, you should probably be using more images than text anyway. Why? Because people are statistically more likely to skim text-heavy pages, whereas sites with simple designs that minimize text and focus on images are far more likely to engage visitors.

Too Much Text

One of the biggest mistakes when it comes to designing a landing page is including too much static text without enough visually pleasing elements to balance it out. As a designer or developer, you may not have a ton of control over how much content needs to be included on the page, but you can use the design to minimize a text-heavy look.

The best way to do this is using white space strategically to make certain features stand out (images and graphics) while minimizing other features (long paragraphs or unnecessary text). Of course, the best thing for your site is to remove unnecessary copy all together, but if that’s not an option you can always use the layout and design to your advantage.

How to fix it? Incorporate white space throughout your site to highlight specific elements, such as the CTA button or a lead capture form. If possible, eliminate or combine text to make it easier to skim. Jimdo blog has some great recommendations for designers working with text.

Amble-cleandesign

Clean web design and good use of white space by the Amble App site.

Too Many Options

Another common content overload error is presenting your visitors with too many options to click through. One study by Sheeya Iyengar, a social psychologist at Columbia University, found that people react differently when given multiple options versus limited options; specifically, the more options they have to choose from, the less likely they are to choose at all.

What this means for your design is that having too many places to click, multiple CTAs, or a general “cluttered” look will turn visitors away fast.

How to fix it? The easiest solution is to keep your designs simple. Cut away any excess until you’re left with only the absolute essentials. Keep navigation to a minimum (that means eliminating drop down menus wherever possible, too), create one clear CTA per page, and don’t redirect visitors off your page unless you need to.

Ineffective CTAs

Your call to action (CTA) is another major player when it comes to having an effective landing page. But the problem with CTAs is that if they’re not executed well, they’re not going to do you any favors. If you want to really engage visitors, you’ll need to avoid these common CTA mistakes.

Wrong Placement

The biggest mistake when it comes to CTA is location. You’ve probably read endless articles giving you a variety of advice on where to put it – whether it’s above the fold or below or whether it should be on every landing page or a select few.

For the most part, the “right” location will depend on your website design and visitors. Most of the time, you’ll probably want to include a CTA above the fold – or in the top part of your design, incorporated with a strong image or graphic that grabs attention. According to some studies, most people spend around 80% of their time above the fold when they visit a site.

But as we’ve noted before, the location really depends on your visitors. If your visitors already know what you’re about when they come to your landing page for the first time, then having a CTA above the fold is the best thing you can do. However, if all of your visitors will be visiting to learn who you are and what you’re about, then having a CTA after some vital information may be more beneficial.

How to fix it? Know your customer base. Because location of your CTA is important, you’ll need to determine whether or not the people visiting your page have brand awareness of your company, product, or service before they visit your site. Brandwatch has some good suggestions for testing your brand awareness.

Wrong Colors

Besides placement, the next biggest mistake when it comes to CTAs is choosing the wrong color. Surprising? Well, don’t be shocked. In a study called Impact of Color in Marketing, researchers found that up to 90% of snap judgments are based on color alone.

Kissmetrics actually made an infographic about how colors affect purchases. While some studies note that no single color is the “right” choice (because color is often associated with personal experience) they all show that color choice does play a role in conversions.

How to fix it? Choose colors for your CTA buttons associated with the goals of your site and customer base. Blue, for example, is often associated with trust and security, while green works well for the budget-conscious crowd. Here are a few tips from CoSchedule to help you choose the right color for your site.

Firefox-greenCTA

Firefox uses a classic green CTA button for its free product.

Unresponsive Theme

While the other mistakes listed above are certainly faux pas, the number one biggest mistake when it comes to designing landing pages is not optimizing for mobile viewing. In other words, if your theme isn’t responsive, you’re doing it wrong.

This is especially true if a lot of your visitors come from social media and search. According to research, nearly 75% of all Facebook users access the web exclusively through mobile, and half of all Internet searches happen via mobile devices. These statistics are only going to increase as the number of internet-connected devices increase, too.

How to fix it? This really comes down to choosing a good responsive theme for your website as a whole, but you should also optimize each landing page to be designed for mobile use by using images, scroll-friendly layout features, and text that’s easy to convert to small screens.

Final Thoughts

Making sure your landing pages are doing their job can be tough, but there are a few great ways to minimize mistakes and boost conversions.

Optimize your images for fast speeds and choose pictures that people can relate to (i.e. happy!).

Minimize unnecessary content and focus on creating a visually appealing website that’s simple to use, so you don’t confuse or overload visitors.

Create a clear CTA that grabs attention where you need it and works for your purposes by choosing the right color, style, and placement.

Go mobile! Make sure your theme and landing pages are designed to be responsive to all screen sizes.