FormKeep 2020 Mid-Year Updates: Tab Changes, Features, and More

We’ve been busy here at FormKeep with a lot of new improvements and features. We’ve been working hard on delivering our new Email Campaign feature in the first half and that got the team excited about implementing some additional UX changes that have been bothering us for a long time.

We understand that moving some of the top level navigation elements can be jarring to long time users, but we felt with the introduction of the new Email Campaign feature we had an opportunity to rethink things.

We hope you’re as excited as we are to get things better organized.

What’s New? What Changed?

The top bar has New Form, Integrations, Blog, Support and Account that focuses on the Account Settings, which was mixed in with the past tabs (namely Settings). Before the update, FormKeep had 7 platform tabs for users to maneuver, with Submissions, Setup, Edit, Emails, Designer, Data Integrations and Reports. Over the course of the year, we wanted to define the features and organize the platform which led to some neat changes on where you can access and work on your forms. 

The first tab was Submissions, where one could see the list of submissions collected in the form with their respective fields. Now, it’s called Inbox! Some entries involve messages from those who fill in forms and we thought it’s best to treat them as messages compared to just another entry.

It still keeps the same functions of Submissions, where entries are sorted by fields, and there’s a separate list for spam entries. 

Right after the Submissions tab, the next tab is Email Campaigns

The most recent feature released this year, this allows you to send single emails to your submissions. To find out more about this feature, check out our in-depth FAQ

The Form Designer tab provides a better visual cue on what this tab was about. It still provides the awesome service that people come to FormKeep for, which is to build a form. You can check out our FAQ about the Settings in Form Designer for more information. 

Back then, the Edit tab held most of the controls for your forms. Now, we’re calling it what it is, Form Settings, and breaking them into separate side tabs such as Spam, Field Validation, Redirect, Advanced settings and more.

Emails back then covered how email notifications are set up to know if you received submissions, with a way to create an autoresponder to those who filled in your form. Note that this is different from Email Campaigns, as this feature lets you create a single email targeted to your submissions that can be newsletters, company updates and the like, versus simply responding to a submission. Now, Emails are now called Notifications! This helps you choose if you’d like email notifications when your form gets a submission, send an autoresponder email using HTML Markdowns and Liquid tags. You can check out our previous blog on how to use our email formatting here

What Stayed?

Now that we’ve covered most of the changes, let’s check out those that haven’t really changed much, but still very effective. 

Integrations still remain to be a tab that integrates your form to apps like Google Sheets, Slack, Zapier, and Webhooks. Custom integrations can still be done through Zapier. If you have any other apps that you’d like to integrate to your form, contact us

Reports still provide relevant data about your submissions, and are merged with the Export tab, as we deemed that reports are often exported and don’t need to be separate things. If you’d like to get a CSV of your latest form submissions, go to this tab! The JSON API access for your own internal processes are found here as well. 

Used to be titled Collaborators, we’re now calling it Team and Team members! Teams are still your way of collaborating with your team in managing the forms. You can add your team member to Edit or view the data in the Inbox, Reports, Team, and Setup tabs. Check out our FAQ about this tab to get to know how you can collaborate with your fellow team members. 

The next tab found in the UI, Setup, covers action attributes and embeds for developer needs. While moved to the end, it still functions as it did previously, working to set up quick codes to copy and paste. 

If you’re having trouble with this section, we’re here to help! Reach out to us on our live chat support. 

What Else Is In Store For FormKeep?

We’re always looking for ways to improve and provide more useful features to our users and continuously be a partner in these times. With that in mind, we’ve decided to tweak our Partners Program to feature our customers who have been with us and help promote them in our own little way through our Partners page. We’re eyeing other neat integrations, and we’ll be rolling out a survey to gauge interest for new features, and satisfaction on the current features we have. 

Since our start 6 years ago, we hope to continue offering and providing form solutions, and grow our roadmap to the next year. 

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.