Re-Balancing Design and Development
Codux aims to bridge the widening gap between designers and developers in the modern web era, fostering a collaborative environment where creativity meets code.
Chris’ Corner: Hard Things
Julia Evans has an extremely relatable and extremely charming talk in Making Hard Things Easy. Julia has a way of putting her finger on technology concepts that are notoriously difficult and making them easier to understand. She does this both by sharing her own tactics, like learning a reduced set of options or commands, as well as by producing very approachable guides.
I like her formula: infrequent use + lots of gotchas = disaster.
(As a CSS guy who regularly hears people complain about CSS, this tracks.)
Another trick to avoiding that disaster is… using computers! Tools like linters can help you fix (or avoid) the very mistakes that can make a technology frustrating or error prone. She uses the tool ShellCheck, which I’d never heard of, as an example to avoiding problems in Bash scripts. Then, sharing when you find tools like this that actually help you. I found that last bit especially interesting. It’s good to be “intellectually honest” about sharing tools that really have helped you, not tools that seem like they could help you, because they look nice or whatever.
Speaking of hard things… you know what can be hard? Refactoring. I’ve probably over-repeated this, but David Khorshid one said “It should be called legendary code not legacy code”, referring to the idea that code that is in production doing work, even if you think it might be sloppy, inefficient, inelegant, is literally doing the job it needs to do. Whereas some theoretically rewritten wonderful code has yet to prove itself.
Code refactoring may cost a fortune if not done right. A dysfunctional revamped system or new features coupled with incorrect rewrite is, with no doubt, damaging. One can argue to what extent.
Refactoring code can be very dangerous, so it’s worth being very considerate about what you’re doing. A few of Miroslav’s points:
✅ Isolate improvements from features. Do not apply them simultaneously.
❌ Do not mix expensive cleanups with other changes. But do that for small improvements.
This makes me think about TypeScript.
TypeScript is (uh, obviously) newer than JavaScript, so there is a good amount of code out there that has been refatored into TypeScript. Whether than was worth it or not is up for debate. People that love it might say that a refactor like this actually makes the code safer, and they probably aren’t wrong to some degree, although it wouldn’t be hard to argue that any refactored code has risks.
There is also cost to the TypeScript itself. Build tooling and whatnot of course, but also the syntax itself. Remy Sharp has made the call that his own personal code isn’t in TypeScript, partially for this reason:
A “well crafted” definition, type or interface (still no idea when I should use each), is often a huge cognitive load on me.
Being presented with lots of double colons,
<T>when I’m not sure whatTrefers to, a wall of interfaces and more is an upfront cost on me, the reader.Often the types will be tucked away in other files (probably good) but working out the argument required to a function call often leaves me distracted in the task of understanding what’s required rather than making my function call.
I feel that. I’m slowly getting better at TypeScript myself, because at CodePen we’ve decided to take advantage of it when we can. I can see the value in it fairly regularly, but I’m also fairly regularly frustrated by it and question the hours lost. I’ve felt this way for years, and I’m still not quite sure what to make of that.
One of the reasons you might be refactoring something is because you’ve decided on some new abstractions. A classic, in my experience, is that you’re adding, dropping, or changing a framework. The old one just isn’t doing it anymore, times have changed, and you either want to go vanilla or move to something more modern. There is probably some kind of axiom where any sufficiently large codebase is always undergoing at least one refactoring per hundred thousand lines of code or the like.
Have you read the Hammer Factories thing? It’s a pretty satisfying read, save for a few dated stabs at comedy that read pretty misogynisticly. Sometimes you just need a hammer, is the thing, it’s clearly the right tool for the job, but the industry wants you to you some all-in-one hammer, wait, no, a hammer factory, wait, no, a factory for building hammer factories, wait, no…
It feels true to me that front-end specific work has always been treated as lower-value than back-end work. Don’t hate me, but part of me feels like that’s fair. I’m a front-end guy myself and actually think it’s extremely valuable, but ultimately most products real value lies in some kind of unique back-end magic. The problems on the back-end, on the whole, are harder and riskier and scarier, and that translates to higher paying roles. Of course there is tons of nuance here. A product with a very decent back end and total garbage front end is likely to have problems catching and may outright fail because of a poor experience for the people actually using the thing, and making an experience people love is weighted toward the front end. Or as Josh Collinsworth recently wrote:
In many ways, CSS has greater impact than any other language on a user’s experience, which often directly influences success. Why, then, is its role so belittled?
There used to be a time where if you knew both front end and back end you were a unicorn and it was considered very rare and you were a powerful force in this industry. Now unicorns are dead. We call that “full stack” now and it’s all but expected that you are one. Especially if you’re skilled in the front end, you can’t just say that, you have to say “full stack” or your job prospects ain’t looking great. Then the actual expectations of full stack mean that you’re good at the JavaScript stuff, you’re fine with the work that connects that JavaScript client work with JavaScript on the server, and you know enough front end to use a design system, library, or hack some workable things together.
It’s just a thought, anyway. It solidified in my mind reading Andrew Walpole:
The full-stack developer was borneth!
It looks great on paper, especially to the payroll department: One person to fill traditionally two roles. But in reality, we know it doesn’t work that way. It may be a role for a technology generalist to thrive in, but one person’s effort is finite, and consistent, quality development across the entire product development spectrum requires focus and expertise. Nevertheless, start-ups soaked up the efficiency, and in a tumultuous churn of web tech it was a decent defense.
There is a new Node.js website and it’s always fun to read a little behind-the-scenes. That would be a hard job but it looks like they did a great job.
How to Create a Recurring Donation Form in WordPress (Step by Step)
Do you want to create a recurring donation form in WordPress?
The right WordPress plugins allow you to easily accept recurring donations on your website. That way, your organization can gain consistent funding to help with budget planning and executing long-term projects.
In this article, we’ll show you how to create a recurring donation form in WordPress.
Why Create a Recurring Donation Form in WordPress?
Recurring donations are contributions made by donors on a regular basis to support a non-profit or cause.
Instead of a one-time donation, supporters opt to set up automatic payments at specific intervals, like weekly, monthly, quarterly, or annually.
When running a non-profit organization, your donors are the heart and soul of your cause. One-time contributions are great, but they might not give you the predictable funding source you need.
Recurring payments provide a reliable income stream so that you can better budget and allocate financial resources. For example, you can better plan where your marketing efforts will go or how you could use that money to help those in need.
Plus, it also adds convenience. Donors can make automatic payments without manually initiating each payment. Most contributors may forget to submit a donation, so a recurring form lets them opt-in, and the payment processor will charge their card automatically.
It’s a good way to gamify contributions as well. For example, you could create a membership site using a plugin like MemberPress. The more donors contribute, the better rewards they can earn. You could add a leaderboard, and the top contributors become your VIP guests at events and receive extra recognition or other perks.
With all that said, we’ll dive into three different ways to create a recurring donation form in WordPress. Feel free to use the links below to jump to each method.
Creating a Recurring Donation Form in WordPress with Charitable
The best way to start accepting recurring donations is with Charitable. It is one of the most trusted plugins for non-profits to grow through online fundraising.
Besides building your donation form, they offer a wide range of features. For example, they include addons like Newsletter Connect so you can keep donors up to date using your email marketing service.
You can also leverage peer-to-peer fundraising, which is great if you have multiple projects or causes to support. This will allow users to choose which opportunities they want to donate to.
Plus, they offer $0 in transaction fees, meaning all of your donor’s generous donations won’t be taxed by the software.
To get started, you’ll need to download the Charitable plugin. For more details, check out our tutorial on how to install a WordPress plugin.
Once activated, you’ll need to go to the Charitable » Addons page. Then go ahead and click on ‘Install’ or ‘Activate’ next to the ‘Charitable Recurring Donations Addon.’
In addition, you’ll need to go to the Charitable » Settings page.
Under the Payment Gateways tab, click on ‘Connect with Stripe.’
Here, you’ll be taken to a setup wizard. Simply follow the walkthrough process by entering the email that is connected to your Stripe Account.
If you don’t have one, you’ll need to create one to start accepting donations.
Once you’ve connected your Stripe account to Charitable, you’ll be redirected back to the settings page.
Under Connection Status, it should say that your Stripe is ‘Connect In live mode.’
Next, we can move on to creating your donation form. Go to Charitable » Add New.
Then, a pop-up will appear, asking you to name your campaign. Give it a name and then hit ‘Create Campaign.’
Next, you’ll be taken to a window that shows you all of the available templates you can use so that you don’t have to start from scratch.
That said, they also have blank, simple 1- or 2-column layouts you can use if you don’t see something that fits your use case.
For this example, we’ll use the ‘Club / Organization’ template. Hover over the template and click ‘Create Campaign.’
You’re now ready to start editing the look and feel of your form. You can add additional form fields, edit texts, add buttons, images, and videos, or tinker with the layout.
Everything is drag and drop, so to add a form field, just drag it from the left-side panel to the right-hand editor in the position you’d like it to be.
If you want to edit an existing field, just click on the element in the editor.
Then, you can make adjustments as to what appears on the form, like the text, colors, alignment, etc. All customizations will show up in the ‘Layout Options’ tab.
Next, you’ll head over to Settings » Donation Options. Here is where you can toggle all of the options when it comes to defining the donation parameters.
Scroll to ‘Recurring Donations.’ Then turn on the option ‘Allow Recurring Donations. In addition, it’s a good idea to turn on the ‘Allow Recurring Custom Donations’ as well. That way, donors can set a custom amount that they’re comfortable with.
You may want to choose the ‘Recurring Donation Amounts’ under the Default Tab to encourage repeat contributions. If you’d like to give donors complete freedom, you can allow donors to choose their donation period.
If you continue to scroll down the page, there are also options to customize the default period and select how often donors should be billed.
This will depend on your specific cause, but in many cases, it’s good to set donation periods to at least a month or longer.
If you’re happy with how the recurring donations form looks, you’re ready to publish. Just hit the ‘Save’ button first.
Then, select the dropdown menu under draft and click on ‘Publish.’
Once you’ve published your fundraising campaign, you can now embed the form onto any page or post.
Click the ‘Embed’ button at the top.
Then, choose ‘Select Existing Page’ to add it to a page on your website. Or if you don’t have one set up yet, hit ‘Create New Page.
From here, just choose the page to which you’d like to add the form.
Once you’ve landed on your WordPress page’s edit screen, click on the ‘+’ icon.
Then, find and add the ‘Charitable Campaign’ block to your page.
Select the campaign that you’ve just created.
Finally, hit the ‘Publish’ or ‘Update’ button to add the recurring donations form to your page.
Make sure to preview the form live to ensure that everything is working.
You might want to submit a test payment as well so that you can check that all donations go through to your Stripe account.
That’s all for creating a recurring donation form using Charitable!
Creating a Recurring Donation Form in WordPress with WP Simple Pay
WP Simple Pay is another good choice for accepting recurring payments. With over 13+ payment methods and 135+ currencies in 45+ countries, they offer the most flexibility.
That’s because you’re not just limited to credit card payments. For example, you can accept mobile payments such as Apple Pay, Google Pay, or even Venmo payments. In addition, they support ACH Direct Debits, Afterpay, Klarna, and others.
Step 1: Install the WP Simple Pay Plugin and Connect Your Stripe Account
To begin, you’ll need to download the WP Simple Pay plugin. Once activated, you’ll need to go through the WP Simple Pay Setup Wizard, which will walk you through the process step by step.
It’ll also lead you to connect WP Simple Pay with Stripe. All you’ll need to do is enter the email address that’s linked to your Stripe account.
But if you don’t have an existing Stripe account, then you can just set one up.
Now, you’re ready to create a donation form. Navigate to the WP Simple Pay » Add New page.
Step 2: Create Your Recurring Donations Form
You’ll be directed to select a template. Choose a template that fits your needs. For this tutorial, we’ll select the Mission Trip Fundraising Form. Simply hover over the option and select ‘Use Template.’
Once you’ve chosen the template, you’ll be sent to the form builder to configure the options inside.
You can feel free to customize the title and the description of the form. As for the ‘Type,’ you can leave it as an on-site payment form.
Also, you can choose to add a CAPTCHA to the form to avoid spam from bots.
From here, you can navigate to the ‘Payment’ tab to ensure you charge recurring donations.
Under the ‘Price Options,’ expand the dropdown options for each donation amount. Or if there’s a different payment amount you’d like to add, click ‘Add Price.’
Once you’ve expanded the dropdown, feel free to give it a label if necessary or leave it blank. Then click on the ‘Subscription’ button instead of one-time, so that all donors will charged on a recurring basis.
In addition, make sure to check the box “Allow amount to be determined by user” if you want to give them the flexibility to choose their contribution amount.
Setting a minimum amount is a good idea, too, since that ensures you at least get a contribution that is meaningful to your cause while still allowing donors the freedom to pay an amount they’re comfortable with.
Then, scroll to the ‘Billing Period’ and select the frequency of each payment. You can choose to charge the donor daily, weekly, monthly, or yearly.
For the invoice limit, you can set a limit on how many times they will be charged. This is good if you’d like to send an end date for recurring payments. For instance, if a mission trip has a defined deadline, you can choose to charge donors monthly payments up to 12 times. You can also leave this option blank.
Additionally, you can give users a free trial option or add a setup fee.
At the bottom of the screen, you can also select the various payments you’d like to accept.
More payment options can improve your conversion rates and allow more contributors to choose their preferred payment method.
If you head over to the Form Fields tab, you can also customize the field options in your donation form. Just expand each field to make adjustments.
If you want to add a field to the existing form template, just select the dropdown menu next to the ‘Add Field’ button.
For instance, if you wanted to contact all donors via the phone, you could ask for their phone number. Or, if you want to send all donors a gift package for large contributions, you can ask for a shipping address.
It’s a good idea to also add a thank you message once donors have made their contribution. It gives them confidence that their funds have been received.
Just go to the Confirmation Page tab and type the message you want to appear after they’ve made their donation.
Step 3: Publish the Recurring Donation Form.
Once you’re happy with the recurring donations form, you’re ready to publish it.
On the right side of the screen, hit ‘Publish.’
Next, go to your donations page or any existing post or page to which you’d like to add this form.
Click on the ‘+’ icon and select the WP Simple Pay block.
From there, you can choose the form you’ve just created.
And then click on ‘Publish’ or ‘Update.’
Make sure to preview the form to see if everything looks right and that donation payments are going through to your Stripe account.
There you have it for this method!
Creating a Recurring Donation Form in WordPress with WPForms
You can also use WPForms to accept recurring donations. WPForms is the best WordPress form builder with 1,500+ templates, including a variety of donation forms.
It’s a good method if you need to also create other forms, such as contact forms, opt-in forms, multi-page forms, user registration forms, surveys and polls, etc.
Step 1: Connect WPForms to Stripe
To begin, download the WPForms plugin. Upon activation, go ahead and WPForms » Settings. Then, head over to the Payments tab.
The default currency is configured to US dollars; however, you can change it to any currency if you’d like. Then scroll down and click the ‘Connect with Stripe’ button. This allows you to connect WPForms to your Stripe account to collect credit card payments.
From here, you’ll need to enter your email address or create a new Stripe account.
Make sure to follow the instructions laid out in the Stripe Connect setup wizard to finish the process.
After you’ve gone through the process, you’ll be sent back to the WPForms setting page in your WordPress dashboard.
In the Payments tab, you’ll see a green checkmark indicating that Stripe is connected to WPForms.
Once connected, you’re ready to start building your recurring donations form.
Step 2: Create a Recurring Donations Form
Next, go to WPForms » Add New. This takes you over to the drag-and-drop editor to build your new form.
Go ahead and enter a name for your form so that you can keep track of it should you have to make edits in the future.
Then, search and select the Variable Donation Form template. There are other donation form templates you can also use, so you might want to experiment with them to see which is right for you.
Click on ‘Use Template.’
Now, you can customize the form and add any additional fields that make sense for your donations page.
You can edit any existing field by clicking on the element and then making the changes under the ‘Field Options’ tab.
Since you’re automatically charging donors credit cards, you probably want to make it crystal clear that you’ll be taking recurring payments.
You can make a note in the description tab as a disclaimer.
You can also go to the ‘Add Fields’ tab to add any additional fields that aren’t already on the form template.
For example, there’s a wide range of options you may want to consider, like adding a reCAPTCHA for security measures or a phone number if you plan on contacting your donors individually.
Simply drag the buttons to the editor to add the desired field option.
Step 3: Enable Recurring Payments
Next, head over to the Payments » Stripe tab. Then, turn on the option to ‘Enable recurring subscription payments.’
Once activated, you’ll have more options appear. You’ll be able to edit the Plan Name, which is a title that appears in your Stripe transactions.
Also, you can edit the Recurring Period. This is how often the credit card will be charged for recurring donations. In the dropdown menu, select the time periods available, such as daily, weekly, monthly, quarterly, semi-annually, or annually.
Once that is done, all you have to do is add the form to any WordPress page. Click ‘Save’ at the top to save all the changes you’ve made.
Then, click on the ‘Embed’ button.
Assuming you already have a donations page, you can choose ‘Select Existing Page’ and pick the page you want to add the form to.
But if you don’t have one, hit the ‘Create New Page’ button.
Now that you’re on the page, click on the ‘+’ icon.
Then, add the WPForms block to the page.
From here, select the recurring donations form you’ve just created.
Then hit ‘Publish.’
Lastly, go ahead and preview the page to make sure that everything looks good.
Also, check that you can accept payments to your Stripe account.
On the WPForms Payments page, you’ll be able to see all of the total payments, sales, and subscriptions you’ve received.
That way, you can track the performance of your donation form.
We hope this article helped you learn how to create a recurring donation form in WordPress. You may also want to see our detailed guide on how to speed up your WordPress site or our tutorial on how to start an online store.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Create a Recurring Donation Form in WordPress (Step by Step) first appeared on WPBeginner.