GiveWP Launches Standalone Donation Form Block for Stripe

GiveWP quietly released its new plugin, Donation Form Block for Stripe, in the WordPress directory last week. It is a standalone block that allows users to accept donations almost instantly. No complicated setup. Just install, activate, connect to Stripe, and play.

I named the GiveWP plugin my favorite of 2019. The team behind the donation plugin has consistently produced top-tier plugins and extensions, and I have long been of fan of the company’s work. It did not take me long to install and activate its latest plugin.

Donation Form Block for Stripe is essentially a lite version of GiveWP. The primary product is far more powerful and has an entire ecosystem of extensions built around it. In general, it is geared more toward charities, non-profits, and other fundraising efforts where users might need more flexibility, reporting, and integration with third-party systems. It can be overkill for someone who merely needs a simple donation form.

The one-off donation form block is better-suited for those “buy me a coffee” scenarios than well-organized fundraisers. I am glad to see GiveWP tackling this side of the donation arena.

Inserting the block is as easy as adding any other. However, before using it, users should connect their Stripe account, and the plugin provides a handy button for doing so in the block sidebar:

Donation form in the WordPress editor in the middle of connecting it to Stripe.
Connecting to Stripe.

The Stripe connection persists, so it only needs to be configured once. From that point, everything is relatively straightforward. Plug in a few details and publish.

In a couple of minutes, I had created and published a fictional fundraiser for cleaning a local basketball court.

Fictional donation form for cleaning a local basketball court.  Has a header image, text, and buttons for donating various amounts.
Full donation form on the front end.

As much as I love the idea of this block, I was not entirely happy with the user experience. However, keeping in mind that this is version 1.0.x, it has a ton of potential.

GiveWP’s donation form managed to break nearly every one of my block-related cardinal sins while still managing to be an exceptional product.

Users must add an image, custom text, and donation field text via the block options sidebar. This means there is no Rich Text input, so users cannot even add simple bold and italic styles. It also feels unintuitive working from the sidebar instead of modifying the fields directly from the content canvas.

Form block in the content canvas of the WordPress editor but its fields are in the sidebar for editing.
Text editing in the sidebar instead of the block in the content canvas.

A more ideal approach would have used the “inner blocks” feature to put Heading, Paragraph, and Image/Cover blocks — locked in place — into the main donation form. It could have done the same with the buttons and other form elements via custom blocks.

Ultimately, most of the problems are related to control over the design. One of the worst things block plugins can do is overrule everything the theme styles on the front end.

Do not get me wrong; blocks should ensure quality control over their own output. Their functionality should be unencumbered, and their layout should work well regardless of the theme.

However, this donation block takes its duties a step too far, using JavaScript to inject CSS into the page and doubling up on the specificity with !important. Even if a theme wanted to integrate with the block, it is next to impossible to style the donation form elements. Is there really any reason that the inputs are required to have 2px, solid, rounded borders?

And, why are my theme and user-registered colors not even available for the single color option provided?

Colored buttons in the WordPress editor inside of a donation form.  The sidebar color option shows custom colors instead of theme/user-registered ones.
Theme colors not selectable.

That is what frustrates me the most — not just with this block. WordPress has built this standardized system that allows communication between the platform, plugins, themes, and end-users. It lets developers build output that should always be customizable. By no means does it cover every aspect of design. However, the foundational components are in place. Colors and font sizes have been around for over three years. Extended typography and border controls are available now.

There is no way to make a wide or full-width form. The block does not support alignments, and even when wrapping a Group block, the plugin limits it to a maximum width of 650 pixels.

Some of these problems are similar to the issues I was writing about nearly two years ago with the release of GiveWP 2.7. I would have liked to have seen them addressed on an entirely new plugin release from the outset.

Despite my complaints, the plugin does the one thing it must do correctly, at least as good as anyone and better than most. It makes accepting donations as simple as inserting a block into a page, customizing a handful of fields, and hitting the publish button. If the dev team never added another enhancement, that would be all most of its users need.

6 responses to “GiveWP Launches Standalone Donation Form Block for Stripe”

  1. Hey, thanks for the write up Justin! You hit the nail on the head as to why we built this block. I also enjoyed reading your suggestions. Using inner blocks to edit the content right in the block sounds obvious now that you said it. I’m going to experiment with that and also adding more rich text editing features.

    We do plan on adding a lot more flexibility in the near future. As you mentioned, this is only version 1.0.x and we haven’t perfected anything yet.

    The VERY opinionated styles is my doing and was done on purpose. One thing I’ve learned from GiveWP is that themes can wreak havoc on various elements, especially forms, headings, and spacings. When I see this happen in the wild, it pains me to see it. Most users are helpless to fix it also, unless they have some CSS skills.

    That’s why this go-around I decided to experiment with CSS in JS using Aphrodite. This achieved the super consistent look across the dozens of themes I tested with. However, I understood going into it that some developers may not be too happy to see that. Let’s be honest, I also cringe when I see ! important used in CSS.

    There’s likely a nice middle ground wherein the style specificity can be modified per block so that the theme has more control. I’m going to think about this more and see what I can come up with.

    We’re excited for this block and have a nice roadmap of features to work on. Some of those features thanks to you and this post. Cheers!

    • I hope that I didn’t put too much work on your plate. :)

      I agree that some themes in the wild can wreak all kinds of havoc. Leaning on the global styles system is that middle ground in many ways. It’s the universal language in which both plugins and themes can speak.

      Just using the block’s Primary Color as an example. I would display the theme (and user-defined) color palettes there if registered. If not, fall back to the plugin’s color palette.

      You could enable the font, color, border, and align block options with a few flags in block.json. This would allow both themes and users to modify at least some of the output without breaking things.

      For the things that WordPress does not provide design tools for or the block does not have options for, there are way of still speaking the same language through theme.json. The plugin can — while still controlling the experience — let themes customize specific things. As an example, the Markdown Comment Block lets themes use the custom key to overrule styles. This offers a tightly-controlled experience where the plugin can style go hyper-specific with styles but let themes integrate with it.

      • You’ve given me a LOT of ideas and I’m excited to learn more about how to balance the need for consistent, good looking styles between themes, while also providing the flexibility people are a looking for.

        To be honest, a lot of what you. mentioned with the theme.json and block.json flags were unknown to me. That’s literally one of the main reasons I started building this… to learn more while also providing a solid, light-weight solution.

        Let me get back to work on this for a few weeks and crank out a few more releases. I think you’ll be even more pleased with what you see next!

        • I’m excited! Feel free to DM me on WP Slack (@greenshady) or email me sometime if you want to run through any ideas or need any help. I cannot say that I am a great block developer, but I can always point you to things I’ve built or others have as examples. I know more about the theming side of things.

  2. I love GiveWP and use it a lot. I’ve got somewhere around 25 licenses supporting nonprofits, so I’m a huge fan.

    One thing I don’t love though and worthy of mentioning in your review is that this is not a “free” plugin. Yes, you can download it for free, but GiveWP is going to take 2% of your donation if you are connected via Stripe. And I get it, developers need to develop and eat, it’s why I pay for dozens of licenses, but I feel like the detail is important enough that GiveWP should make it more obvious.

    • Hey Greg! Thanks for your support over the years.

      You’re correct that the plugin will charge a 2% fee if you want to use it for free. We are trying to support and grow our team and we believe this fee pretty competitive. It sounds like you understand that.

      We do display a notice in the plugin about the fee that I believe should be clear to the admin. Let me know if you feel that isn’t obvious enough. We also included text in the readme. Of course, we don’t want to blare it from the rooftops, but we also don’t want to bury it. I think we have found a nice middle ground but we’re less than a week from launch so things are still a bit up in the air.

      To be clear, the fee goes away if you have an active license for GiveWP or simply have the Stripe add-on installed. It doesn’t even have to be active.

      We’re hoping here to bring folks into our ecosystem and provide them with some really cool block-based donation forms without the need for an our full platform.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: