Building Crowdfunding Website with Crocoblock on WordPress

28Apr 2022 by Moonthemes 226 Comments

In this manual, I would like to replicate crowdfunding functionality using Crocoblock plugins, such as JetEngine, JetFormBuilder, JetThemeCore, JetPopup, JetTabs, and Elementor free version.

Setting the Goal

The main task was to create a website to gather money for different charitable projects with detailed project information, statistics, and reports about collected funds.

Check out the demo website.

NOTE:

Please help us to gather money for real projects to support Ukrainians now. We’ll transfer all donations to the project you choose.

Now, let’s get started with the detailed instructions.

Website Structure

To start with, let’s build a structure. For a crowdfunding platform, we need:

  • Custom post type called Projects – to store the information about the project and meta data, such as description, the amount needed, etc.
projects custom post type
  • Custom content type called Donations – to store information about donations, such as amount, project, date, and user data.
donations custom content type
  • Form – to carry out a donation followed by a post-submit action for adding new CCT Donations after submission.

Crowdfunding Use Case Logic

Before replicating the crowdfunding platform, we need to understand the general logic. 

  1. Our homepage will display a listing grid with all the projects. 
  2. Then users can go to each single project page and donate.
  3. We’ll display the donation form in a pop-up on the single project page.
  4. Then users enter the amount they want to donate.
  5. After this, users are redirected to PayPal to make the payment.
  6. A new Donations CCT item will be added to the database if the payment is successful.
  7. Thus, all donation data will be used for calculating statistics and displaying people who donated to the exact project.

Now, let’s go through every component of the crowdfunding project.

Custom post type Projects 

As custom post type is the most known JetEngine feature, I won’t stop there for a long. For Projects meta fields, I’ll add:

  • Total – the desired total amount per project that we need to gather.
  • Short Desc – quick project overview displayed on the homepage listing grid.
  • Description – full project description displayed on each single project page.

Custom content type Donations

The main goal of this CCT is to store information about all donations and gather project statistics (how many people donated, the money gathered, percentage of needed amount). 

The fields we need in this CCT are as follows:

  • Amount – the sum of donations;
amount custom content field
  • Project – the project collecting donations;
project custom content type field
  • Show on project page – a Select field to choose whether to show or not the donation in the statistics list;
cct select field
  • Name – user name that will be displayed in the donations list.
name custom content type field

WordPress form

To create a WordPress form, we’ll use JetFormBuilder. Our form should accomplish two tasks:

  • donation payment via PayPal;
  • saving information about each donation to CCT.

So, we’ll need these form fields:

  • Project ID – a Hidden field that will store the project ID, which has been donated to. Thus, the form will be used on the single project page. As a Field Value, we’ll use “Current Post ID.”
hidden form field
  • Amount – a Text field for displaying donation sum.
  • Show your name in donations list? – a Select field, where users can choose whether to show or not their names.
show your donation name select field
  • Name – a Text field for indicating user name.
user name form field

NOTE:

User name should be shown only if the user chose to show their name in the donations list at the previous step. For this, we need to wrap the Name field in a Conditional Block and configure it as shown below.

name conditional field block

After creating the donation form, we need to set up a PayPal gateway.

Finally, we need to configure the form in a way to save donations to a dedicated CCT Donations after it’s submitted. 

For this, add the post-submit action Insert/Update > Custom Content Type Item. Then press the “Edit” button and match the form fields with CCT fields.

form post submit action custom content types

Important:

We need to add a new CCT item only after successful payment. Thus, during payment gateway configuration, we need to specify that Insert/Update Custom Content Type Item should be added only after successful donation.

successful payment condition

Project single page

The next step will be to gather all project information on one single page. For this, we’ll create a single template using JetThemeCore and try the new Elementor experiment – Flexbox Container. 

  • We’ll create a box with featured image and project statistics using a flexbox container.
flexbox container

I want the featured image to be as a container Background to the left of the grid:

featured as a background image
  • Project name will be displayed via the Dynamic Field widget.
title displaying via dynamic field

I don’t want to overload the page visually with the donation form. I’ll put it into a pop-up using JetPopup. Thus, after clicking the “Donate” button, our pop-up with the form will appear.

We’ll add tabs at the bottom of the main project information using the JetTabs plugin: Description, Donation List, and Statistics.

Project statistics

The most interesting and complicated part is project statistics: donations amount, total sum, percentage of gathered donations.

Firstly, let’s figure out what we call statistics:

  • Amount of donations is the amount of Donations CCT items that contain the exact project ID in the Project ID field.
  • Total gathered funds are the sum of all Amount field of all Donations CCT items that contain the exact Project ID.
  • Percentage of gathered donations is the sum of all funds divided by the Total meta field value for the current project and multiplied by 100.

We can obtain all this data using SQL queries. We’ll use the dynamic tag Dynamic Functions, which allows displaying various data calculated dynamically, including data from SQL queries.

Create SQL query

Next, we’ll create an SQL query with Query Builder that will take the information from the database:

  • Query type: SQL, not Custom Content Type (even though we are getting data from CCT) because we need to crunch the numbers further.
query type sql
  • From table: jet_cct_donations. This table stores information about CCT Donations (you can check the table naming in the CCT settings).
select data from cct table
  • Where (query clauses): we need to limit the selection to only posts from the desired project. To get the project ID, we’ll use Object ID macros.
query clauses
  • Then we need to Group Results by Project ID to use the Calculated Columns option next.
group results

Configure calculated columns option

After setting everything up, we can finally use the Calculated Columns option. It will add columns storing the necessary calculation results to the SQL query.

NOTE:

Regular columns in the query results table contain static data from the database. The

Calculated Columns option allows you to add new columns containing dynamic data to query results. Such dynamic data can be calculated based on data from other SQL query results columns. It works best in combination with the Group By option. Read more here.

For instance, we group all items by Project ID and display only items with a certain Project ID. This means we can count the amount, sum, and max/min value among all CCT items with the same Project ID. 

Therefore, to get all donations amounts for each project, we’ll add a new Calculated Column based on column _ID and use the function COUNT to know the amount of all CCT items that fit our request. 

calculated column id with count function

To count the sum of all donations, we’ll add the Calculated Column based on the Amount column from the table and use the function SUM. That’s how we’ll know the sum of all Amount fields in all CCT items within one project.

calculated column amount with sum function

Calculating percentages is a more complicated process, as we need to get data from the meta field to use them to make calculations. Let’s take the Amount column one more time and use a custom function for results processing. Next, we’ll add math expressions to be calculated to the custom function body.

define custom column using function

In our case, SUM(%1$s) gets the total amount of all CCT items, fitting the request. 

Next, this value should be divided by the value of the Total meta field for the current project. However, we’ll use the current_meta macro to get a certain value: %current_meta|total%.

Finally, we need to display all the information using the dynamic tag:

donation amount using dynamic tag count _id
projects sum amount
display percentages via dynamic tag

Donations table

Now, let’s sort out the donations list. Before creating it, we need to create a new query for getting data to be displayed in the list.

In this case, the Query type would be Custom Content Type Query by CCT Donations. Don’t forget to set the needed conditions in Where (query clauses).

query type custom content type

We need to get donations from a specific project with the “Yes” value in the Show on project page field and display all contributions from users who choose to show their names on the donations list.

set up content type query settings

After creating the query, let’s show all data in the table using the Dynamic Table Builder module.

jetengine dynamic table builder module

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

data query

Set the needed columns and add the table to the single page.

table columns

Finally, we can add project information to the homepage’s listing grid.

Sum Up: Testing 

As I wanted to create a fully workable crowdfunding platform, we’ve decided to create a PayPal account (Daria, our Content Manager) to collect all the donations and then send them to the dedicated project you choose.

So, don’t hesitate to test the platform; donate to the charity project you like, and we’ll make sure to transfer the funds. After one month, we’ll share the report with you.

226 thoughts on “Building Crowdfunding Website with Crocoblock on WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *