Javarevisited
Published in

Javarevisited

How to Create Donation WordPress Website: Ultimate Guide

More than 20% of endeavors in the U.S. start and fail in the first year, reaching the threshold of 50% within five years. Luckily, there is a way to overcome this problem and check any project’s relevance. I mean crowdfunding.

Crowdfunding projects have a long history. Remember the Statue of Liberty, Pebble Time Smartwatch, Everyday Backpack by Peak Design, the Brake Free ultra-bright LED signal and many others. If you have a great idea, you can not only raise money this way but create a fundraising platform for your business needs:

  • fully control design, content, SEO, etc.;
  • promote future projects;
  • adjust ad campaigns and trace analytics;
  • install certain widgets and plugins as a pop-up to make your idea more understandable;
  • modify it according to modern trends.

It looks too complicated only at first glance 一 you need just WordPress, free Elementor, some plugins, and a good tutorial.

Today, I’d like to explain how to build a crowdfunding site using Crocoblock plugins, particularly JetEngine, JetFormBuilder, JetThemeCore, JetPopup, JetTabs, and Elementor free version. These plugins are compatible with many free and paid WordPress charity themes, and you can use them further for other projects.

You can check how the results on the donation demo website.

General Specifications for Crowdfunding Platforms

You can build a crowdfunding site for one project or a platform for many projects. These sites/platforms envisage a complex structure and a lot of functions:

  • for statistics and finance (i.e., detailed project information, statistics, and reports on fundraised money);
  • for processing money (including different payment systems);
  • to manage user credentials (including registration);
  • to manage fundraising campaigns/projects as a whole.

The primary characteristics of crowdfunding platforms are:

  • amount of funding raised;
  • number of successful transactions;
  • number of platform attendance;
  • the funding model used (type of crowdfunding);
  • fee charges from the project initiator;
  • some platforms have requirements for their members, i.e., specific citizenship or legal status.

How Does This Crowdfunding Platform Work?

All crowdfunding sites/platforms envisage similar design and functional features (the Figure below shows the general scheme):

crowdfunding platform operation scheme
  • The homepage presents a list of projects or a listing grid with all the projects.
  • Each project has its own page/post with detailed information about its mission, a team, development stages, possible profit, etc. Besides, every project’s page has a donation form in a pop-up.
  • Users choose the project they want to donate to and then enter the sum.
  • Then the site redirects the user to PayPal to make the payment.
  • After a successful payment, the site will add a CCT item to the database for further statistical processing and display the total sum donated to each project.

Custom Post Types and Other Features You Need

According to the previously presented scheme, you’ll need the following:

  • Custom Post Type to store the information about projects, including metadata (description, donation goal);
  • Custom Content Type to gather generalized information about all donations: project, sum, date, user name, etc.;
  • Forms to accept a donation and to add a credential to the donation base;
  • Single Page to store the information for every project, including metadata (description, donation goal);
  • Query Builder to pull and process data from the database (i.e., for the project’s statistics);
  • PayPal Gateway to make the payment by connecting the WordPress form with the PayPal account;
  • Tables Builder to display information about all successful donations;
  • Dynamic Tag to show various data calculated dynamically, including data from SQL queries.

Let’s consider them in detail.

Building the Website Structure

Let’s build the site structure consisting of the CPT Projects, CCT Donations, and a Form.

The CPT Projects (according to its name) intends to store detailed data for each project (description, photos, team members, the amount needed, etc.).

crowdfunding CPT projects

The CCT Donations (according to its name) refers to donations data, grouped by the project, date, user data, etc.

crowdfunding CCT donations

The Form is meant to add records on donations to the donation base.

Projects

Let’s use the JetEngine plugin to create a custom post type. This CPT has the following meta fields:

  • Total to display the total amount the project needs to collect;
  • Short Desc to present a short project description displayed on the homepage;
  • Description to present the project’s complete information on its single page.

We’ve added only necessary meta fields, but you can add all meta fields you need including photos, videos, links to the social networks, etc.

Donations

This custom content type aims to store the donations data for further statistical proceedings (i.e., the number of people who donated money, percentage of the needed total, the gathered sum, etc.). Here are the used fields and the data they contain:

  • Amount — to present the sum donated by the user to a specific project;
crowdfunding CCT amount field
  • Project — which represents the project to raise money for;
crowdfunding CCT project field
  • Show on project page — to specify whether to show or not the donation in the statistics;
crowdfunding CCT show on project page field
  • Name — to display the user’s name who donated in the donation list.
crowdfunding CCT name field

WordPress form

To build the donation form, we’ll use the JetFormBuilder plugin. This form will be displayed on the project’s page and collect the project-related data.

Thanks to it, it will be possible to:

  • raise money through PayPal;
  • save data on each donation to the CCT;
  • add saved data to the donations base.

The form should contain the following fields:

  • Project ID is a Hidden field to store the ID of the project. This field has the “Current Post ID” as a Field Value.
project_id field crowdfunding site
  • Amount is a Text field that will display the sum to be donated.
  • Show your name in donations list? It is a Select field with two possible options (Yes/No).
show name field crowdfunding site
  • Name is a Text field to indicate users and display their names.
name field crowdfunding site

Here is a pitfall 一 some users would like to save their anonymity and do not show their names among other contributors.

For this case, you should wrap the Name field in a Conditional Block. See the screenshot below to configure it correctly.

conditional logic crowdfunding site

So, the next step is setting up the PayPal gateway.

The last step is configuring the Form to save payments to the Donations CCT after every donation that goes through. To do this, add the post-submit action Insert/Update > Custom Content Type Item. Then press the “Edit” button to match the appropriate form fields with the CCT fields.

edit form crowdfunding site

Turn on the option “On successful payment” for the Insert/Update post-submit action.

payment gateway settings crowdfunding site

Project single page

As crowdfunding sites/platforms envisage many projects with the same fields, let’s create a single template using JetThemeCore and try the Flexbox Container from Elementor.

  • We need to use a flexbox container to create a box with a featured image and texts to display the project statistics.
project single page crowdfunding site

Edit the flexbox container as follows: the featured image has the Background aligned to the left of the grid.

container single page crowdfunding site
  • To display the Project name, use the Dynamic Field widget.
dynamic field crowdfunding site

Anyway, you can add any image, text, or video. Put this form into the pop-up using JetPopup to avoid overloading the form visually. So, when the user clicks the “Donate” button, the pop-up with the form will appear.

Basically, you can apply everything you want to spruce up the form. For instance, use the JetTabs plugin to add tabs at any post position (i.e., Description, Donation List, and Statistics buttons).

Project statistics

Project stats are crucial because it’s not enough to simply gather the information; one should process it. Crowdfunding projects envisage the following statistics: donations amount, total sum, and percentage of collected funds.

  • Amount of donations is the amount of Donations CCT items with the current Project ID in the Project ID field;
  • Total gathered funds are the sum all Amount field of all Donations CCT items for the specific Project ID;
  • Percentage of gathered donations is the percentage of the amount needed for the project, mathematically is the sum of all funds divided by the Total meta field value for the current project and multiplied by 100.

You can use SQL queries to carry out these calculations. Since the crowdfunding site envisages real-time data input, use the Dynamic Functions tag.

Therefore, the site will display real-time data and dynamic calculations obtained by pulling data through SQL queries.

Create SQL query

The SQL query creation using Query Builder is not a trivial task, so let’s look at it in detail. Here you have to take the input data from the database, group them, and make calculations.

Add the following options:

  • Query Type: select the “SQL Query” type, not Custom Content Type (even though we get data from CCT), because this data will be calculated further.
query builder crowdfunding site
  • From Table: specify the table to get data from — jet_cct_donations. This table stores information about CCT Donations (check the table naming in the CCT settings).
CCT settings crowdfunding site
  • Where (query clauses): select only posts from the desired project and use Object ID macros to get the project ID.
query clauses crowdfunding site
  • Group Results by Project ID: switch on this toggle and select the project_id column so we can use the Calculated Columns option next.
group results crowdfunding site

Configure the Calculated Columns option

After setting up all options, you can use the Calculated Columns option. This option adds columns to the SQL query to store necessary calculation results.

Some words aside: regular columns of the query results table store static data from the database. You need the additional feature — Calculated Columns — to add new columns with dynamic data to query results. To calculate such dynamic data, you can use data from other SQL query results columns. This feature works best with the Group By option.

For the crowdfunding site/platform, group all items by the Project ID field. Also, specify to display only items for a specific Project ID. Thus, it will be possible to calculate the amount, sum, and max/min value for all CCT items with the same Project ID field.

To calculate the total donation sum for each project, add the new Column ーCalculated Column. This Column uses the Column _ID field and applies the function COUNT to calculate the total amount of all CCT items according to the request.

calculated columns crowdfunding site

Add the Calculated Column to calculate the total sum of all donations. This column uses the Amount column data from the table and applies the function SUM. Therefore, you get the total sum of all Amount fields in all CCT items within the specific project.

CCT columns crowdfunding site

Percentage calculation is more complicated. We have to get data from the meta field. To do it, use the Amount column again and apply a custom function for results processing. Then add the math expressions SUM(%1$s) to be calculated to the custom function body.

amount calculated crowdfunding site

For the considered case, the custom function SUM(%1$s) calculates the total amount of all CCT items which fit the request. The next step is dividing this value by the data from the Total meta field for the current project. To do this, use the current_meta macro: %current_meta|total%.

The last step of project statistic managing is displaying the calculated data using the dynamic tag:

  • donation amount;
donation amount calculated field crowdfunding site
  • sum;
sum calculated field crowdfunding site
  • percentages.
percentage calculation field crowdfunding site

Donations table

To sort out the donations list in this subsection, create a new query for getting data to be displayed in the list. Then specify the Query type field as “Custom Content Type Query” by CCT Donations. Besides, set the needed condition in the Where (query clauses) field.

content types query crowdfunding site

The Show on project page field with the turned-on “Yes” value makes it possible to get data on donation sums for the specific project. The next step is displaying all donations from users who choose to show their names on the donations list.

show on project page field crowdfunding site

Therefore, create the query and show all data in the table using the Dynamic Table Builder module.

dynamic table builder crowdfunding site

Then choose the previously created “Donations list” in the Data Query field.

donations list query

The next step is setting the needed columns and adding the table to the Single page.

columns name

Lastly, add the project information to the Listing Grid on the homepage.

Conclusions

Nowadays, crowdfunding is not only fundraising but a way to know whether a project is relevant and exciting. If you place a project on big platforms like Kickstarter or Indiegogo, there is a big chance to lose it among other decent projects.

Fortunately, there is no need to develop a crowdfunding site with a complex structure and multipage code.

You have two options:

  • install any free/paid WordPress theme or free plugin to build your crowdfunding platform with functionality according to the used theme/plugins;
  • use multi-functional plugins and themes to develop many sites (regardless of their purposes) according to your needs because crowdfunding sites envisage CCT, CPT, statistics and calculations, money transfer, etc.

The second way is more appropriate because successful crowdfunding projects need a lot of additional functions, which free plugins do not offer. Often, themes and plugins focused on limited functionality cannot be used for all stages of crowdfunding project promotion (planning, pitching, promotion, perks, and permanent contact). Therefore, fully-fledged plugins give you more freedom making SEO and updating possible.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lana Miro

Lana Miro

117 Followers

I’m passionate about website design & development. Working as Content Manager at @Crocoblock. Here is my Twitter account: @Lana_Miro