How to pipe FormKeep data to a data warehouse using Stitch

Create reports and visualizations with data from FormKeep and other sources by using a data warehouse

FormKeep provides form endpoints for developers and designers. You can point your form at a FormKeep URL, publish it to your site, and start collecting data without writing code for the form back end. Once you have some data, chances are you’ll want to combine it with data from other SaaS applications and internal databases. For instance, if you have a form to gather shipping information, you might want to take the data you get and augment it with information in a shipping platform such as Aftership or Shippo. Or if you’re soliciting product feedback, you might want to combine the answers with customer information from Salesforce. You could then correlate data from related applications to surface insights and gain business intelligence.

The best approach for joining information from multiple sources is to create a data warehouse that consolidates all of your data in a single location. Most businesses nowadays use cloud data warehouses for that purpose.

To populate the data warehouse, you can extract the data you have in SaaS applications and on-premises databases and load it using an ETL (extract, transform, load) tool. Once the data is available, analysts can use it to create reports.

In this post, we’ll walk through the process of connecting FormKeep with a data warehouse and a business intelligence (BI) tool to create reports.

Three tiers of the data analytics architecture

Data sources like FormKeep form a foundation for a data analytics stack that comprises three tiers: ETL software, data warehouse, and BI software.

Stitch provides a simple, powerful ETL service for businesses of all sizes. Signup is simple — you can be moving data from one or more sources to a data warehouse in five minutes.

The last few years have seen the emergence of cloud-native data warehouses like Amazon Redshift, Google BigQuery, and Snowflake. Because they run on cloud infrastructure that scales quickly and cost-effectively to meet performance demands, they can handle transformation using the same hardware on which the data warehouse runs.

Finally, to unlock the value of your data, you can connect a BI or data visualization tool to your data warehouse and create reports that analyze data from multiple sources, which you can share via browser-based dashboards.

Setting up a data warehouse

Let’s set up a three-tiered data analytics stack, starting with the data warehouse. If you don’t already have a data warehouse, choose one that meets your needs. If you choose Redshift, BigQuery, Snowflake, or one of the other destinations Stitch supports, you can also follow the setup steps for your data warehouse in the Stitch documentation.

Setting up Stitch for ETL

The next step is setting up an ETL pipeline to move data from your sources to the data warehouse. Stitch makes extracting data from a source and loading it into a data warehouse easy. To get started, visit the signup page, enter your email address, then enter your name and a password.

Add an Integration

Next, add FormKeep as an integration within Stitch. Click on the FormKeep icon to get started:

Enter a name for the integration. This is the name that will display on the Stitch Dashboard for the integration; it’ll also be used to create the schema in your destination.

When you click Save, Stitch will generate a webhook URL:

Configure FormKeep to send the data to Stitch

Click the Copy button to copy it, then switch back to your FormKeep account. Choose the form you want data from and, in the Settings Wizard, choose Webhooks. Paste the webhook URL, click Next a couple of times, then Finish.

Now all future form submissions will be replicated to your data warehouse — but first you have to connect the data warehouse you set up to Stitch as a destination. Click on the Destination link at the top of the Stitch dashboard.

Add a destination

Suppose you’ve chosen an Amazon Redshift data warehouse. Clicking on the Redshift icon brings you to a screen where you can enter your credentials:

Now all the pieces are in place, and the data is ready to flow.

When you visit your Stitch dashboard, you’ll see that your integration is marked Active, Continuously Replicated.

From the dashboard you can also do things like adding integrations from other data sources. The Stitch documentation walks through the process for each one.

What happens if your form changes after you set it up? Stitch will see any new fields and add them to your data warehouse, populating them with data that we receive moving forward. Fields that are removed will still exist in the warehouse, but they’ll no longer get values once they’re removed from the source. If you change the type of field, Stitch will add a new column to the data warehouse to hold the new data, and keep the old data around under a different column name. The exact details depend on which data warehouse you use; the process outlined in the data loading behavior section of the Stitch documentation for each data warehouse.

Connecting BI software to your data warehouse

The final stage of the process is connecting an analytics platform to your data warehouse. If you don’t already use BI software, you have dozens to choose from, including such popular options as Tableau, Looker, Microsoft Power BI, and Google Data Studio.

That’s all there is to it. Using an ETL tool like Stitch to move data from FormKeep and other sources into a data warehouse lets you leverage the power of BI tools to correlate and report on all of your valuable data. Give FormKeep a try today!

How You Can Do More With Surreal CMS and FormKeep

Introduction

Surreal CMS is a great service that allows you to edit your static site directly in your browser. You still maintain direct control over the source and layout of your website, but by just adding some simple tags to the pages, you get an interactive CMS!

In this blog, we will cover some basics about how to add a Contact Us form to a Surreal CMS enabled site and use the Include feature to make it the same on all our pages.

Using Surreal CMS gives you the simplicity of a static site while giving you the ability to quickly make updates to your site on the fly. FormKeep allows you to capture email registrations or surveys without having to manage a backend database yourself.

Basic Forms In Surreal CMS

Here a Contact Us form that you can use on your site. We’re going to use some of the advanced features from both Surreal CMS and FormKeep.

Let’s walk through the Surreal CMS features

First, you’ll see we used the cms-include tag in the top div along with a specific id. This allows us to use this same Contact Us form on many pages and anytime we update the content on one page it will change on all of them. That’s perfect for the contact us section of our site, because we always want them to look the same and be sent to the same FormKeep form.

Next you’ll see that we’re using the cms-editable class on the title and labels of the form elements. This allows us to edit these values directly from Surreal CMS without having to drop down directly into the HTML code. Great!

You can add any additional fields you’d like to capture on your form, just make sure they have a unique id and name, and use the cms-editable class to indication which ones you want to be able to edit.

For extra credit, you can take a look at the documentation about Lockable and further control what is editable.

Let’s walk through the FormKeep features

Now that we have the form setup and editable, let’s talk a bit about FormKeep. The first thing to look at is the action tag on the form element itself.

When you create a form endpoint on FormKeep, you’ll get a unique action url for that form. You’ll replace the https://formkeep.com/f/exampletoken with the real one from your form.

Then when someone submits your form the data will get sent to FormKeep. It will store the data, also saving any images or documents uploaded, check to make sure it’s not spam and then send you an email with the information.

You can create multiple forms for different pages, but in this case the contact form is the same across all our pages, so we just need one form.

Pro tips!

You might be tempted to add the cms-editable on the <form> element itself, but right now Surreal CMS doesn’t handle that tag directly. (Give them a shout out if you want this feature, they’re always adding things!) So you’ll want to follow the example above and use spans, divs and labels to manage the editable blocks on your form.

FormKeep will accept any fields you send it, so you can change your form fields at anytime and it will start saving the new fields immediately. No other changes needed. It also supports reCAPTCHA in addition to the regular backend spam detection, if you are really having trouble with spam.

Here’s some additional CSS you can use to style the form to look better than the defaults:

Enhancing Form Data Management and Integration

In each of these cases (and many others) you may benefit from using a form backend like FormKeep alongside your Surreal CMS site. With FormKeep, 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

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

If you would like help getting FormKeep setup with Surreal CMS, feel free to reach out to our friendly team at support@formkeep.com.

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.

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

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.

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

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

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

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

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

But how do you tell that to your client?

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

clients

Certain Forms Work Better Than Others

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

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

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

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

multistepform

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

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

How to Convince Them You’re Right

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

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

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

Speak from Experience

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

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

Show, Don’t Tell

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

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

social-proof

Keep It Consistent

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

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

Offer It Like an “Upgrade”

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

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

Don’t Be Rude

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

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

Final Thoughts

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

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

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

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

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.