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.

Looking For A Step By Step Guide to Building an HTML Form?

Check out this blog recently published by Abhishek Jakhar. This detailed blog is full of information about how to get your HTML form up and running!

There are detailed code examples covering a broad range of form topics.

You can read the blog directly by clicking here.

And, don’t forget, once you’ve built your form, you’ll need to connect it to a backend to begin collecting data. If you don’t want to host your own server or tap into your Node, Python, Ruby or PHP skills, you can easily connect any HTML form to a cloud backend using FormKeep. What’s more, once your form is connected to FormKeep, it’s easy to store, secure and connect your data with 1000s of other systems via Zapier.

All you need to do is update the action attribute. Your form tag should look like this paying careful attention to update the underlined area of the highlighted URL with the token provided to you within FormKeep (Trial or Paid account):

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

If you would like any help hooking up your form to FormKeep, please contact support@formkeep.com.

Guide to Styling HTML Forms

One of the most appealing things about using form backend solutions like FormKeep is that, as a web designer or web developer, you can focus your energy on user experience and functionality. You can avoid the burden of building and maintaining your own backend infrastructure.

A large number of our customers choose FormKeep over other solutions because we’ve decoupled the backend from the front end. These customers can style their form exactly the way they want to, using any tool they wish. Complete freedom of expression; no more wrestling with a front end form-builder to get the results you require.

This, of course, begs several questions:

1. What are the foundational rules and principles for styling HTML forms?

2. Where can I find examples of well-styled forms?

In this blog, we provide some pointers to some great resources we have found on these topics.

Rules and Principles of HTML Form Styling

To a certain degree, smart HTML form design and styling is context sensitive so there are no cardinal rules. That being said, we have frequently referred to some nice and comprehensive resources on the web that can help you hone your skills. Here are some of our favorites:

Mozilla: Styling HTML Forms

Mozilla: Advanced Styling for HTML Forms

3 Best Form Design Practices for Your Design Process

Samples of Well-Styled Forms

There are many examples of good and bad forms all around the web. You may have some favorite examples or examples you don’t like. Here are a few places you can find some good looking form examples including sample code:

10 CSS HTML Form Designs

Top 36 Free HTML5 & CSS3 Contact Form Templates 2018

Two CodePen Examples (HTML Forms and Ultra-Clean UI ‘Contact Us’ Form)

Connecting Your Form with a Backend

Of course, once you have a nicely designed form, you need a place to send the data where it will be secure, manageable and can connect with other systems like Google, Salesforce, Hubspot, ZenDesk, Slack and others.

With FormKeep, to make this form active on your website, simply copy the provided html and CSS and customize it as much as you want. Then, all you need to do is update the action attribute. Your form tag should look like this paying careful attention to update the underlined area of the highlighted URL with the token provided to you within FormKeep (Trial or Paid account):

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

See how with our sample CodePen by clicking here:

See the Pen Sample “Contact Us” Form Template You Can Customize by FormKeep (@formkeep-samples) on CodePen.

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.

 

Sample “Contact Us” Form Template You Can Customize

At FormKeep, we make it easy to use your own form HTML and use our backend to capture, store and process your data.

In this example, we have developed a simple Contact Us template that includes the following elements: First Name, Last Name, Email, Subject and Newsletter Subscription Checkbox.

Below the Submit button you can see plenty of other attributes implemented that you can copy and paste to fit your needs. In this example, you’ll see radio buttons, drop down list, email fields, phone number, check boxes, color selectors and many more.

You can edit the html on the left of the CodePen and see the resulting form on the right.

See the Pen Sample Contact Form (With Extra Controls) Styled by FormKeep (@formkeep-samples) on CodePen.

To make this form active on your website, simply copy the provided html and CSS and customize it as much as you want. Then, all you need to do is update the action attribute. Your form tag should look like this paying careful attention to update the underlined area of the highlighted URL with the token provided to you within FormKeep (Trial or Paid account):

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

You can also update this token in the CodePen example directly and, then, when you press submit on the sample form, 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.

If you have any suggestions for this form template, please send them to support@formkeep.com.

Thank you!

The FormKeep Team

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

Announcing Shubox.io and File Upload Support

 

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

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

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

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

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

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

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

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

Keep on uploading!

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

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.

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.