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. 

Why and How You Should Set Up Personalized Emails for Your Forms

With more people doing online activities these days, there’s a big chance they’ve probably come across online forms when making online purchases, signing up for email lists, or even just giving feedback about a product or their most recent customer service experience.

Online forms are commonplace on websites, landing pages, blogs, and it’s fun to think that 74% of companies use web forms for lead generation, with 49.7% stating online forms are their highest converting lead generation tool.

Sadly, some folks feel that some online forms aren’t really useful for them. To them, forms might just be there to get information and they’re not going to get much from that interaction. Some forms might even be a pain to fill out especially if there’s way too many fields or that they can’t access it through their smartphones. There’s a lot of reasons why not everyone likes forms, and we shouldn’t add more by coming off as impersonal. 

This is why in the digital space we have today, personalization is now more important than ever. People are looking to connect with their companies and be able to reach out and not just be another number on a statistic. Forms that take the extra step to engage with their subscribers benefits not only from a customer experience, but allow to develop a relationship for the long term.

Personalized emails are important, here’s why

There’s a huge win here. Did you know that people often return to a website if the company reaches out to them through email to re-engage with them after submitting to a form? Surprisingly enough, while some form builders do send automated emails after form signups, there isn’t really much to make a more personalized approach.

87% of consumers admit that having more personalized experiences, both online and in-store, would increase brand loyalty and help with them sticking around. While automation is important, you need to make sure it doesn’t come off as just another email. Emails are one of the best ways to reach out to interested parties, keeping them up-to-date on new content, special promotions and offers you’re running, as well as new products or features launched. 

Which type of emails deliver better email engagement rates?  In a world where everyone opts to send HTML emails, a plain text message does stand out. Plain text existed before HTML, which explains its simplicity and a more direct, personalized approach to messages.  Did you know that plain text emails has improved click-open-rates of 11% over HTML? Also, with a statistical significance of 86%, plain text surpassed HTML in click-through rates at a higher 8%.

This is why FormKeep makes it a point to collect the necessary data for your email marketing efforts simple and easy. From creating a simple contact form (or any other type of form for that matter) you can send campaigns to submission to help drive traffic to your website and make an opportunity to re-engage with people after they’ve left.

How to personalize your forms using emails

Let’s go with an example. 

Say you made a simple contact form for your fresh apples delivery business. 

You have the standard fields: email, message, a few drop down menus to categorize the reason they’re reaching out, order numbers, name and contact information. 

When the emails come, you’d want to confirm to your customers that you’re on the job. Unfortunately, a simple “Thanks for your email. We’ll get back to you soon” won’t do any good. This is a sure fire way to get bad customer feedback, or them not going back to your site ever again. 

So, we need to automate and personalize, but how can we do that when we haven’t even read the emails? Using FormKeep, we offer liquid tags. This is a way to call information found in the forms your customers send emails with. 

Let’s start with a proper greeting. How about adding the customer’s name? We can do that by adding a {{submission.name}} tag. Other bits of information like their {{submission.order_number}} can be called in a similar way, and be just added to your email. Let’s say Rodger has sent in this message to you and filled out the Name field like so:

But wait, what if they put in their full name? Luckily, liquid tags let you manipulate how to read them, and some simple tricks can be used to solve problems. If the given name is more than 1 word, a code like Hey {{submission.name | truncatewords: 1, ""}}! lets you find the first word in the name, and use it like a first name. 

Now, while “getting back to them” is what we mean, customers want to know if you really understood their problem. Well, if they used the Reason drop down menu in your form, we can add a {% case submission.reason %} condition in our reply to give different sets of advice. Tada! Your emails can now provide apologies for Technical Support, or thanks for a Sales Inquiry. 

Now some customers don’t have time to waste, and rush their emails to us. Information is key when finding out what the customer wants, so if they haven’t given you important information, you best let them know. You can check {%- if submission.order_number == "" -%} (if their submission’s order number is blank), so that they can get back to you even before you read their incomplete email.

Finally, formatting your emails show your customer that you wanted to be sure they can properly read the email. While fancy pictures and HTML can be added using FormKeep, you can also use markdowns to style up your plain text. Not everyone appreciates a cluttered, overly dressed up email, so simple symbols and font styles are encouraged.

As a bonus, Formkeep also allows for some simple math and scripting, so there’s enough functionality here to make billing calculations, randomized quotes, and holiday greetings.

Here’s the final personalized email that we’ll send back to Rodger:

The biggest takeaway here is that you can help form connections with your subscribers with just one simple tactic: personalization. And this goes way beyond just addressing your customers or prospects by their first name – there’s so much more you can do when you take that extra step to re-engage with people who took time to fill out your forms. 

Oh, and here’s the complete Formkeep code that you can copy paste into the Emails tab for your own forms!

Hey {{submission.name | truncatewords: 1, "" | capitalize }}!	

We've got mail! Thanks for sending in your question
{%- if submission.order_number != "" -%}
  {{submission.order_number | prepend: " for your order #"}}
{%- endif -%}
.

The entire team has gotten a copy of this and it's been printed out and put on the CEO's desk for his nightly customer review in between reading the Wall Street Journal.

{% case submission.reason %}
  {%- when "Billing Support" -%}
     The billing team has been put on notice that you need some help, they're on their way!
  {%- when "Technical Support" -%}
     We're sorry about that, we're so busy growing sometimes our code gets ahead of our heads, we'll look into this immediately.
  {%- when "Sales Contact" -%}
     We're so excited that you're looking to do more with our product, we'll be in touch today!
  {%- when "Refund" -%}
    Oh noes! Please let us know if there's anything we can do to make this right, we're looking into your account now and will
    reply with the details soon.
  {%- else -%}
    We'll get back to you soon with a thoughtful response and possibly a crayon drawing from our kids (who are stuck at home here anyway with us!)
{% endcase %}

## Thought of the day
{% capture secondsOfNow %}{{ 'now' | date: "%s" }}{% endcapture %}
{%- assign random = secondsOfNow | modulo: 5 -%}
{%- if random == 0-%}
An apple a day keeps anyone away, if you throw it hard enough.
{%- elsif random == 1 -%}
If you never tasted a bad apple, you would not appreciate a good apple. You have to experience life to understand life.
{%- elsif random == 2 -%}
Millions saw the apple fall but Newton was the one who asked why.
{%- elsif random == 3 -%}
Anyone can count the seeds in an apple, but only God can count the number of apples in a seed.
{%- elsif random == 4 -%}
For an apple you can't reach up and pick, you have to climb that tree; the tree won't bend down for you!
{% endif %}

## Your Message Summary
_(we'll ignore any typos of course!)_

- Message: {{submission.message}}
- Reason: {{submission.reason}}
- Order Number: {{submission.order_number}}
- Name: {{submission.name}}
- Phone: {{submission.phone}}


You can add images <img src='https://formkeep.com/images/formkeep_logo_email.png' width='128px'>

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.