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.

Your Form Design, Our Backend

One of the reasons that FormKeep is so popular with web developers and designers is that it’s easy to style your form exactly the way you want. Unlike alternatives that require you to use their form templates and layouts, FormKeep makes it easy to layout and style your form exactly the way you want without worrying about building a backend to receive your form data.

Material Design Screenshot
Learn About Clean Form Layout

Modern web design and form layout principles are always changing and, of course, design preferences vary depending on the developer, designer or target user. Material Design’s website https://material.io offers a great overview of how to style an impactful HTML form. Check out their HTML design overview by clicking here.

To learn more about how to capture your form data on the backend in a database or connect it with another application or receive your form data in email, check out formkeep.com. Once you set up a FormKeep free trial account, it’s easy to connect your form with FormKeep.

All you need to do is update the action attribute. Your form tag should look like this:

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

FormKeep Named to List of Top 20

 

Today, FormKeep was named as one of the top 20 form builder tools by Hubspot.

At FormKeep, we believe web designers, marketing teams and customer specialists have better things to do than write another boring form backend. With FormKeep it’s easy to design a simple form and post data to the FormKeep backend.

To learn more about how to save time and effort by using FormKeep, visit formkeep.com. To learn more about HubSpot’s Top 20 Best Form Builder Tools for 2018, visit https://blog.hubspot.com/marketing/form-builder-tools

Announcing Shubox.io and File Upload Support

 

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

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

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

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

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

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

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

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

Keep on uploading!

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

FormKeep and Zapier Connect Web Forms with over 1000 applications

FormKeep Connects to 1000s of Popular Applications Like Salesforce, Google Docs, MailChimp, Intercom and Slack

FormKeep and Zapier Connect Web to the World.

We know that getting your work done requires many different web tools. In fact, the average mid-sized business uses between 10 and 16 apps and, for enterprises, there can be hundreds or thousands of apps running various workflows. You have your email app, CRM, note-taking tool, emarketing platform, cloud storage tool, team communication app, along with project management tools and more. Sometimes, it can be a struggle to get them all working in tandem. Now that FormKeep has 1,000 integrations, you can choose your favorite tools and easily integrate them with FormKeep.

Thanks to our Zapier integration, FormKeep connects to 1,000 other web tools and applications. Now you can connect data submitted via forms on the web to all kinds of applications and workflows that reside in places like Slack, Google Docs and Salesforce. You can use Zapier to connect with your FormKeep data via codeless integrations called “Zaps”. Zaps will automatically send information from one tool to another, so you’ll spend less time manually transferring data between your business tools and can dedicate more focus to creative, big picture tasks.

Boost Your Productivity with Popular FormKeep Integrations

No matter what other apps you use, chances are you are looking for ways to use web forms to take data from customers and employees via the web and connect that data with the applications you use to run your business. Here are some of the most popular integrations that FormKeep users already use to be more productive.

The New Year is the perfect time to evaluate your processes and find ways to boost productivity. Try out some of the Zaps above or view more ways to integrate FormKeep.