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

Google Sheets Integration with FormKeep


Google Suite apps are the next big thing. Many people base their entire workflow within the Google Suite apps. The live editing features of Google Sheets makes it the go-to choice for teams collaborating on projects. Now imagine being able to see updated form stats and submissions without ever having to leave the Google Suite. All of your workflow in a single place! FormKeep’s latest integration with Google Sheets makes this possible in only a few steps.

Quick Integration Setup Video


All of Your Submission Data In One Place…And It’s Updated Live

FormKeep’s Google Sheets integration gives you all your submission data in a single place. All of the latest submission data from your forms is at your fingertips and can be accessed with ease. By linking your FormKeep account to a Google Sheet you will completely cut out the tedious steps of logging into your FormKeep account and refreshing the page to see your live form submission data. With the Google Sheets integration there’s no need to export to an external spreadsheet. All the data you need will funnel straight into your Google Sheet in real time! As the form owner you have full accessibility to customize which form data goes into your Google Sheet and where in the sheet it sits. Watch the video above for a full guide to rearranging form data in your Google Sheet.

Form Data with the Google Sheet accessibility you love

We launched a Google Sheets integration with our tool because we love the accessibility of Google Sheets. As the sheet owner you have the option to give your team full editing access to change form submission data and arrange where the form data comes in. However, you can also choose to only give your team the “read-only” permission so that they can see the form data live but cannot edit the location of output or the form data itself. 

A Match Made in Heaven

FormKeep is the best way to collect data from online forms without the hassle of running your own servers. Static sites using Jekyll, Hugo, Gatsby, or GitHub Pages can easily collect data from HTML forms, save the data here on FormKeep and also sending it over to Google Sheets for additional processing.

Setup in a Few Simple Clicks

Connect your Google account and you can send your form submissions directly to any Google Sheet. Set headers in the sheet to match the names of the submitted data. See the Data Integrations tab under each Form to select which Google Sheet tab to append submissions. Only non-spam submissions will be sent.



Slack Integration with FormKeep

FormKeep’s latest integration with Slack makes staying on top of form submissions and maintaining strong communication with your team easy!

After integrating FormKeep and Slack, new responses are sent straight to the Slack channel of your choice. The integration allows for easy pairing of specific forms and Slack channels, ensuring that the right people see the data submitted from your website.

With FormKeep and Slack, you’ll be able to

  • Send form responses to multiple channels and teammates
  • Select if you want the form fields to appear in your Slack message
  • Easily search Slack for form submissions

Slack Integration Video

How Teams use Slack with FormKeep

Customer Support

FormKeep’s integration with Slack allows for live notification the moment a customer needs help. Additionally, you can choose to see the content of the support form in the Slack channel of your choice. As a result of these features, FormKeep’s latest integration with Slack ultimately leads to a better customer experience. After all, one of the most prominent characteristics of a good customer support team is consistent timely responses to support requests.

Managing Feedback

Understanding where your product can improve is vital to the expansion and success of that product. Setup a form that prompts users to review your product and provide valuable feedback. Attaching a Slack channel to this form will give you access to live feedback, directly from your customers, about what could be added to your product. Being responsive to customers who are willing to share their opinions about your product adds to your brand image.

Easy Setup

Connecting your form to Slack easy to configure and control!

Important Data to the Right Place

If your team is already working in Slack, having to go to another system to check submissions breaks workflow. Bringing another data source into the original channel removes the hassle of switching between systems.

Creating a donations page with FormKeep

The standard for payments on the web these days is Stripe. It offers a very easy way for designers and developers to collect credit card payments on any website. At FormKeep we strive to make it very easy to collect form submissions from any website too. If you want to collect some extra data from the customer (or donor), send them a follow up email, and be notified about payments, integrating FormKeep and Stripe can make this very straight forward.

To illustrate this we will build a simple donations website integrating FormKeep and Stripe.

Accepting payments through Stripe requires a backend, because Stripe helps you avoid storing credit card data directly (which is almost a must, to handle compliance). The logic is broadly this:

  1. You post your user’s payment data to Stripe, along with a public key and Stripe builds an expiring token for the specific card and amount.
  2. On your backend (so you don’t expose your private keys) you instruct Stripe to charge the card using the given token and your private key
  3. Then you can do whatever else you need (store some data, redirect to another page, send some emails).

So as you might see, there is a missing link here: we don’t have a backend to handle this. Thankfully, all this can be handled by serverless functions, which are becoming very pervasive around the web. To keep things simple, we will use Webtask.io for this example, but there are many providers to suit different needs. Webtask.io is just very easy to get up and running and is enough for what we want to do.

Our final product will have four parts:

  1. A FormKeep account and form where you will store the information of all the donors, and set up a “thank you” email for them.
  2. A Webtask.io account with a single function to handle the backend requirements to charge through Stripe.
  3. A Stripe account where the payments will be collected (we will use the test environment for this, but you will need to get your account approved and fully set up to accept real payments)
  4. A simple, one-page donations website (a simple html document, which you can then publish to any hosting service you like).

1. Create a FormKeep form

First off,  create your FormKeep account if you don’t have one, and create a form to store your donor’s information. Go to the setup tab, and grab the URL for your form (the form’s “action”).

2. Post data to FormKeep from Webtask.io

Now we’ll write a function to post arbitrary data from Webtask.io to FormKeep. We need to create a Webtask.io account and go to the Webtask.io editor. There we’ll choose to create an empty function and call it “formkeep-stripe-checkout”.

Next, we’ll add a secret for our form’s URL and call it formkeepUrl, by clicking on “Settings”/”Secrets”/”Add Secret”.

We’ll also need to add webtask-tools, express and axios as dependencies by clicking on Settings/NPM Modules/Add Module. webtask-tools allows us to pre-compile special kinds of functions as Webtask.io functions, we will use express (a Node.js web framework) so that we can control the request and response better than with plain Webtask.io functions, axios is a promise-based http library that works great both in the browser and in node.js, so it’ll help us keep the code clean and simple.

Now we can add the code to handle an HTTP POST request to our function, and in turn POST data to FormKeep, you can add this directly in the Webtask.io editor:

If you run the function with  Webtask.io’s runner, or by hitting the URL (you can do it from your browser) and check your FormKeep dashboard, you should see a new submission.

3. Create a Donation form with Stripe “checkout”

First we need to create a Stripe account and get the test API keys.

We’ll also need to get our function’s URL from the bottom of the Webtask.io editor.

Now, on any text editor, we can add the HTML markup for the donation form (replace your Webtask.io function’s URL and your Stripe publishable key), we will be using Stripe’s “checkout” feature, which renders a simple checkout form, and handles posting the payment information, receiving the token from Stripe and posting the form to the specified URL (in this case, the URL for our Webtask.io function):

If you open the file in a web browser, you should see something like this.

To make things look a little nicer, you can add the following CSS in a file named stylesheet.css under the same directory as the index.html:

Your site should now look like this:

4. Set up the Webtask.io function to make the actual charge

We’ll add the Stripe API secret key to the Webtask.io secrets like we did before with the form URL (Settings/Secrets/Add Secret), and call it stripeApiKey. And then we add stripe as a dependency like we added axios (Settings/NPM Modules/Add Module”) to help us communicate with the Stripe API, and body-parser to help us parse the form from the request.

Now we need to make a few changes to our Webtask.io function, and we’ll have a donations site up and running:

That’s it! If you open your html file on a browser, click the donation button, enter a fake email and one of Stripe’s test credit card numbers (like 4242 4242 4242 4242) with a random expiration date and a random three number CVC and you should see a success notice.

Then on your Stripe dashboard you should see a charge in the test payments and on your FormKeep dashboard you should see the donation info.

How all this works

1. The Stripe “checkout” posts the credit card info directly to Stripe which returns a token.
2. On success, the Stripe “checkout” posts the rest of the form data to the Webtask.io function.
3. The Webtask.io function makes the charge with the token and the secret key, using Stripe’s API.
4. On success, the function posts the rest of the data to FormKeep for storage.

More things you can do

  • Set up FormKeep emails to send a thank you email to donors.
  • Collect some more user data, like a name or address.
  • Do some validation on the data on the backend function, skip making the payment if a name isn’t given.
  • Use the custom checkout integration to show the user a success message without leaving the page.
  • Deploy index.html to the web using something like surge.sh.

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.

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.

Podcast: Go Deep on FormKeep and Furious Collective’s Venture Production Model

This week thoughtbot featured Furious Collective in their weekly podcast called Giant Robots Smashing Into Other Giant Robots.

In this podcast, David Kloba & Rob Meinhardt, Co-Founders of Furious Collective, discuss the mindset and methodology of their venture production studio, recount their adventures over the past year of growing FormKeep after having acquired it from thoughtbot, and offer advice to founders preparing to sell their product or company.

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.