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 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.

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">