One powerful feature of peer-to-peer fundraisers is the ability to allow your volunteers to create their own branded fundraising pages on your website. You can do this with GiveWP and Caldera Forms.
But First, Why?
The power of peer-to-peer fundraising is in getting your volunteers and/or audience to be excited about your cause, and empowering them to raise funds on your behalf. Instead of you and your staff constantly reminding people why they should give to you, you allow others to tell a story of why they are invested in and passionate about what you do. In many ways, it’s a compelling validation of your cause others might receive much more genuinely simply because the plea came from someone who is not paid to be excited.
But what about the “how”? Conceptually, what you need is a form on your website that will create a draft of a GiveWP form. Forms creating other forms — sounds funny right? But in Give, a form represents a campaign or fundraising drive. This tutorial will show you how to let supporters of your cause suggest a campaign and by doing so, create a draft GiveWP form that will be used to raise money for it. It might sound complicated, but if you simplify it, it’s just about “mapping” fields to each other.
So, first things first, here’s what you need to make this happen:
- Caldera Forms — available for free via your Plugin directory. See their website for full details.
- Caldera Forms Custom Fields add-on — Available for purchase here. GiveWP users get 15% by using the discount code GiveWPP2PCaldera .
Generally speaking, Caldera Forms and its Custom Fields add-on is intended to do exactly this for any type of Custom Post Type. To that end, CalderaWP has a great general-use tutorial you can follow here.
Caldera Forms is a great form building plugin for WordPress. It really can create pretty much any kind of form that you need. GiveWP, on the other hand, is designed to provide everything you need for online donations. In this case, Caldera Forms powers the supporter registrations (a great use for a form builder) while GiveWP continues to power your donations.
This tutorial will very specifically help you to understand how to get the fields to map to your Caldera Form correctly. That’s the magic necessary for being able to create any front-end submission form you want for your peer-to-peer campaign.
Watch or Read
Below is a full text explanation, as well as relevant and important links. If you are more of a visual person, you can watch the tutorial here instead:
Step 1: Create a Caldera Form
Now that you understand the tools you will be using and the principles of why, let’s make it happen.
Once you have Caldera Forms and the Caldera Forms Custom Fields add-on installed and activated, you need to create a new Caldera Form. Remember, what’s happening here is the Caldera Form is going to be creating new GiveWP forms in “draft” mode.
One great feature of Caldera Forms is the ability to import forms. For example, if you want to get a head start on this whole thing, you can import this file here and have a fully functioning Caldera Form that populates a GiveWP form for you automatically:
Once you import that into Caldera Forms, you should have a form that looks like this:
With that form imported, you’ll notice there are basically three types of fields that need to be mapped:
- Some fields are mapped in the Caldera Forms Custom Field “Processor.” These fields are mapped to default WordPress post fields, like the title or the featured image. Since a GiveWP form is a WordPress post, you can use these for the GiveWP form title and similar fields.
- Some fields are dynamic fields you want the volunteer to fill out. They are mapped directly to custom fields within the GiveWP form field options.
- Lastly, there are hidden fields that are also mapped to GiveWP form field options. They are hidden because you need these settings changed from the GiveWP default options, but you don’t want the volunteer to change them at all.
With that in mind, here’s an explanation for each field of that imported form:
- First and Last name — A WordPress default field: The title. Map that as the “Post Title” in the Caldera Form Processor settings.
- Email address — You’re not currently mapping that anywhere, but you’ll need it in your Caldera Form entry in order to contact the volunteer that their form is live.
- Form Goal — A GiveWP form option: The form goal amount. Map that as
_give_set_goalas the “Slug” of your field.
- Your reason for raising funds for XCharity — A GiveWP form option: The form content. Maps that as
_give_form_contentas the “Slug” of your field.
- Your Profile Image — A WordPress default field: The featured image. Map that as the “Featured Image” in the Caldera Form Processor settings.
- GiveWP Goal Enabler (a hidden field) — A GiveWP form option: Enables the form goal. Map that as
_give_goal_optionas the “Slug” of your field.
- GiveWP Custom Amount Enabler (A hidden field) — A GiveWP form option: Enables the custom amount. Map that as
_give_custom_amountas your “Slug” of your field.
- GiveWP Minimum Amount (a hidden field) — A GiveWP form option: Forces a minimum donation amount for this form. Map that as
_give_custom_amount_minimumas your “Slug” of your field.
- GiveWP Content Enabled (a hidden field) — A GiveWP form option: Enables the form content option. Map that as
_give_display_contentas your “Slug” of your field.
Step 2: Identify GiveWP Form Settings That You Want Populated
Whether you want to change the defaults of the form you just imported, or you have GiveWP Add-ons that have additional fields that you want auto-populated, you’ll need to understand how to find the field information and where to put it in Caldera Forms so they are properly mapped.
For example, let’s say you want the GiveWP form to be generated with one of the display methods (modal, reveal, all fields, or button). You can do that in one of two ways. Either you don’t want to let the volunteer decide what the display method is (in that case you’d create a hidden field), or you do want them to choose their display method, in which case you’d create a select field with the values as the options. Here’s how you’d do both of those.
First, get the option name from your GiveWP form. While in the GiveWP form edit screen, right-click directly on one of the “Display Options” options, then select “Inspect.” That will open the browser inspector. Then find the “name” of those options. In this case, the name is
_give_payment_display. If that’s a bit unclear, review the video tutorial above, where I spell that out very clearly.
If you are not giving them the option to choose their display method, then add a hidden field to your Caldera Form, and add
_give_payment_display as the “Slug” and your chosen display method as the “Value” — in this case “modal.”
If you do want them to have a choice, then add a select field to your Caldera Form, give it the
_give_payment_display “Slug,” and add the following three options:
- modal (as the “Value”) || Popup (as the “Label”)
- reveal || Reveal on Click
- button || Button Mode
Let’s do another example, this time with a GiveWP add-on. For example, a common aspect of peer-to-peer fundraisers like this is communicating with your donors on the progress of the fundraiser. You might want to do that via our MailChimp add-on.
Perhaps there’s a specific list that you want your donors opted into for all of these forms. Our MailChimp add-on allows you to choose a specific list from your MailChimp account per form, like this:
In this case you need to add two hidden fields: one to enable the MailChimp integration for this form, and one to enable the list you want.
As before, you’ll right-click on the checkbox to get the name of that option. In this case, the enabled checkbox is
_give_mailchimp_enable, so that’s the “Slug” for your hidden field, and the value is “enabled.”
The second hidden field is the name and value of the list you want checked. In this case, the name is
_give_mailchimp, which you set as the “Slug,” and the value is the ID of the MailChimp list “481323b727.”
You could give the volunteer the choice of which form their donors should be opted into with a select field as well, by simply adding a select option with the “Slug”
_give_mailchimp and each option would have a name and value of your lists that you want them to choose from.
Now that all your fields are mapped, make sure that you set both an Admin notification email (In your Caldera Forms “Form Settings” section) to you and a confirmation email for your volunteer. With Caldera Forms you can populate any of these fields into that message however you like.
Most likely, you’ll want to notify the volunteer when you post the form live. You’ll find that in the Caldera Form entry, but you could also add their email into your Admin notification email for your convenience.
Developer Ideas (Optional):
If you are a developer, you might already be thinking of ways you can improve this process for your clients. Here are a few things I’d suggest for a simple custom functionality plugin to make everything a little smoother:
- If you’re handy with triggering emails in WordPress, perhaps just automate that by hooking into the publish_post action and emailing the supporter automatically.
- Add a metabox to the
give_formspost type (using our Settings API here) and conditionally show the Email address of the supporter directly in the form edit screen, so when the Admin pushes the form live, they can just copy/paste or click that email to email the supporter that their form is now live.
Using a Different Form Builder?
We personally really like Caldera Forms, and their free Custom Fields add-on makes this very easy for you to accomplish. But perhaps you’re already using a different form plugin.
Fortunately, this type of functionality is built into the major form plugins and there are some great tutorials for this out there. The details will be a bit different, but the underlying concept and functionality are the same.
- Chris Lema has a good tutorial on doing this with Formidable: http://chrislema.com/create-wordpress-pages-automatically-formidablepro/
- Ninja Forms wrote a tutorial for their popular plugin:
- The team at Yoast wrote this great tutorial on doing this with Gravity Forms as well:
Dream Big and Build Big!
We at GiveWP believe in dreaming big! Peer-to-peer fundraising is very powerful and effective, but it’s also very complex. This front-end form submission is just the tip of the iceberg in terms of all that peer-to-peer does. We are just beginning the vision process for what a full-fledged peer-to-peer add-on would look like in Give, but front-end submission is an important step. This will get you there in the meantime, but we’d love to hear from you regarding what features you’d like to see in a powerful peer-to-peer add-on for your cause.