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.

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.

Here’s Why Your Opt-Ins are Unsubscribing (And How to Fix It)

Email marketing is a hugely valuable tool.

In fact, according to the Direct Marketing Association, email marketing brings in around $40 for every $1 you spend, making it one of the highest ROIs for any time of marketing out there.

It can be reasonably assumed that the whole point in capturing emails and having subscribers is to convert those emails into loyal customers who either buy your product or service or tell their friends to buy your product or service (or both).

list-segmentation-results

Even if you’re just running a blog or a content site, those emails are everything. So what happens if all of a sudden you’re not getting as many subscribers as you once did?

Or worse yet, what happens when people that have already subscribed start to opt-out of receiving your emails?

Here are a few of the most common reasons people are opting-out of your email lists, plus what you can do to stop that from happening.

They’re Not In a List

The biggest problem when it comes to opt-ins is not having opt-ins (or opt-outs) because all of your emails go to all of your subscribers.

Not having any form of segmentation is a one-way ticket to unsubscribers, but if you’re running your email campaigns yourself, it can be tricky to manage all of those lists. That’s where third-party email marketing services can help.

Where to Send Your Form Submissions

If you’re using WordPress, you can use plugins like MailPoet or Newsletter to create real email system that allow you to create newsletters, automated emails, post notifications and more directly from WordPress while allowing you to segment your lists (to some degree, anyway).

If you really want to segment your lists, you can use a email service like MailChimp, Constant Contact, or AWeber (etc.) and integrate them with your CMS of choice using Zapier to create targeted emails to certain lists.

Whichever method you choose isn’t really as important as having some plan in place for your emails once they’ve been submitted on your site.
They’re In the Wrong List

Once you’ve warmed up to the idea of segmenting your lists, then comes the hard part. You have to figure out exactly which emails belong in which list.

The whole point of segmentation is to provide relevant content to the recipients, so if someone opted in to get your monthly newsletter but you send them promotional emails about events instead, your likelihood of unsubscribing is high.

So how do you segment your lists for better results?

How to Segment Your List

Welcome emails should, for example, go to your new subscribers or users. But you can also send a version of a welcome email – either a “we miss you” or “are you still there?” email – to those who haven’t been actively opening your emails.

Keeping track of those lists may be a little trickier, but if you’re using a third-party email marketing service like MailChimp (or similar), they often keep track of those lists for you.

But there are other ways to segment your lists that you may not have considered, including:

  • Demographics – Age, gender, company, position, etc.
  • Sending frequency – Some people want emails more frequently than others
  • Location – Knowing something as simple as a location can help you gauge send times and even personalize subject lines for better open-rates
  • Weather Patterns – Skymosity is a company that can track weather patterns and create automated email campaigns that are deployed by weather-based email triggers, which can be helpful for certain industries (fitness gear, outdoor living, etc.)
  • Email activity – Some people stop opening emails after a certain point, which can be helpful to know in order to send a “we miss you” email to reactivate their interest

brooks_weather_segmentation

Source: Skymosity

There are many different ways to segment a list, but the most important part of that segmentation is not just getting them into a list, but also getting them the right content for that list to keep them engaged.
They’re Getting the Wrong Content

The average email user sends and receives around 105 emails per day, with 81% of those emails containing valid content (as in, not spam). This means that while sending out emails is a great way to capture your audience’s attention, it’s also ground zero for competition.

One of the biggest factors when it comes to people unsubscribing from your lists is that they’re simply being overwhelmed with content that doesn’t relate to them. Thankfully, there are a few easy ways to fix that by targeting your content more dynamically.

Types of Content to Send to Each List

Newsletters often go out to anyone in your email list, but some do a good job of separating their newsletter lists from their general email lists, so only the people who want the newsletter actually get it. But you can take this a step further by actually creating targeted newsletters based on niche topics and segmenting your list further.

One way to implement this strategy is to include separate opt-in messages in your welcome email, also known as an opt-in bribe.

WelcomeEmailOptIns

Each link in your welcome email could lead to a different list so your subscribers are essentially telling you exactly what they want from your emails. Here are a few different types of content you can send to varying lists:

  • Welcome Email
  • Expectation Email
  • Tools and Resources Email
  • How-To Email
  • Getting to Know You Email
  • Unexpected Freebie Email
  • Exclusive Content Email
  • Basic Content Email
  • Archive Email
  • Curated Email
  • Newsletter
  • Buzz-Building Email
  • Testimonial Emails
  • Favorite Things Email

The truly important thing to remember is that the type of content you send out should reflect the list it’s being sent to. You wouldn’t send a welcome email to someone who’s been a subscriber for years.

Likewise, you shouldn’t send a newsletter to someone who just wants to know about events (unless your newsletter is all about your events).

Sometimes targeting certain content to different groups is a matter of trial and error, so it’s important to keep track of open-rates and watch your demographics (and other factors) closely to see what works and what doesn’t work.

Final Thoughts

When it comes to improving your conversion rates, there’s really no better tool than email marketing. But what you do with your content and your segmented lists makes all the difference between effective and ineffective marketing.

First, if you’re not segmenting your lists, get on it ASAP.

Second, once your lists are segmented, make sure that every email is where it’s suppose to be and every one who has opted in to your lists wants to be there.

Finally, make sure that the content you send to each list is relevant to the interests of those lists. If you’re not sure if it’s engaging enough, try targeting your email opt-in links in your welcome emails (or any email) to narrow down the field.

How to Use Integrations to Save You Time Every Day

Software created by startups is innovative and develops much faster than old-school software. But these startups are prone to shutting down, pivoting, or getting acquired just as quickly as they rose in the first place. You might read about a new application, try it out and love it—only to have it get bought out and shut down less than a year later.

Untitled

Since you can’t rely completely on any one software, this modern software landscape encourages you to use lots of applications that do one thing really well, rather than one application that does everything. When you want to try a new application, or the one you were using gets shut down, you can sub it into your existing process quite easily.

This approach brings a new problem. Instead of all of your data being contained within the one application’s database, it’s now spread in 15 different databases. Each time you update one of those databases, it’s now out of sync with the other 14, until you manually update each of them.

Why Integrations?

I’m currently writing this on Dropbox Paper, as I love focusing on the writing instead of a million different formatting options. Once I’m finished writing it here, I’m going to copy and paste it into Google Docs, and then update Trello to let the rest of my team know they can review it and make comments and amendments.

They’ll often message me on Slack to let me know about any required modifications. Sometimes they’ll email me. Once the writing part is done, we’ve then gotta move everything from Google Docs into a few different applications. The blog gets moved to WordPress, the newsletter gets pasted into Drip, and we schedule all our social media posts through Buffer.

Phew.

That’s a lot of applications, and a lot of human interaction between them. Not only does this waste a lot of time copying and pasting information between applications, but it means that information is delayed until someone can pass it along. etc. Not only that, but unless I’ve got all the applications open at all times, I can easily miss a notification and trip up the whole process. Not only that, but copying and pasting has potential for human error, and the more copying and pasting there is, the greater the risk.

This is where integrations come in.

What are Integrations?

Most modern applications provide Open APIs, which allow you to run the software from outside the application. For example, you can create a new Trello card using just the command line. But for most of us, that’s not very useful. What is useful is combining two different applications’ APIs using Webhooks: messages that get triggered upon a certain event, and sent from one application to another.

What this means in non-developer is that instead of using the command line to create a new Trello card, you can take any application you’re already using, and get that to trigger some other application you’re already using. Without changing the applications you’ve learned to use, you can eliminate a lot of the manual work necessary to link them together.

What This Means For Your Business

Entrepreneur Simon Senek, author of “Start With Why”, attended the Gathering of Titans, an annual 5-day retreat for entrepreneurs at MIT, and was shocked that many of the business owners in attendance had lost focus on why they started their business in the first place. They spent their time “poring over financials or some other easily measured result, and fixating on HOW they were to achieve those tangible results”, and had become totally removed from actually leading their businesses.

If you’re still manually generating reports or crossing your fingers that all your online orders have been properly fulfilled, you are spending unnecessary energy on operations that can be easily automated. This is time and energy better spent focusing on your core mission.

Getting Started With Integrations

The two most popular Integration Platforms as a Service (iPaaS) are IFTTT and Zapier. IFTTT allows you to connect two individual applications together using one simple statement: “If this, then that.” Users can create ‘recipes’ that combine the triggers and actions associated with each application, with no coding or technical knowledge required. IFTTT is, however, a more consumer-focused platform, whereas Zapier has a clear focus on small to midsize businesses and enterprises. Since that’s probably you, let’s focus on Zapier.

ddsa

Zapier is an integration service that lets businesses sync data, connect web applications and automate tasks without writing custom code or requiring extensive technical knowledge. Zapier offers a variety of unique pre-built connections called “zaps” and features over 200 online service providers. The Zapier Zapbook includes web apps such as Asan, Basecamp, Buffer, Disqus, Dropbox, Evernote, GitHub, HootSuite, FormKeep, MailChimp, Salesforce, Trello, WordPress, and Google Apps. Zapier recently launched a new API Status Board which monitors the uptime and downtime for every API used by Zapier.

When getting started with integrations, take a look at each of your processes – design, development, sales, onboarding, etc.. Identify any point that involves simply copying and pasting data from one application to another. These are areas that are prone to error and waste time. Of particular importance are points in your processes that block someone’s work until the data is copied across. For example, if your contact form submissions go straight to your inbox, you’ll get a notification immediately. But your salespeople will have to wait until you have time to input the new lead into your CRM. With integrations, they’ll get a notification at the same time you do. You can even turn off your notifications! Your job there is done, and you can trust your salespeople to follow up as soon as they can.

Although today’s iPaaS vendors make it possible to connect many business, social and cloud applications together, iPaaS is not a silver bullet. The extent to which applications can be integrated depends on each application’s API. Basecamp recently released a fantastic new version of their product, but failed to provide an API. This means that users have the unfortunate choice of using the old version and keeping their integrations, or updating to the new version but reintroducing all that manual work.

However, as iPaaS becomes more popular and necessary, the demand for powerful APIs in every application will increase. And as more and more small web and mobile applications are created, the need to bring data and applications together will increase greatly.