Building a WordPress Donation Form (Part 4)
The team at INN Labs has researched and experimented with various tools for building donations forms on WordPress sites and we've defined a standard set of forms, payment processors, and integrations that you can use.
This article is part of a series which shows you how to create a donation form on your WordPress site using Gravity Forms which integrates with either Stripe or PayPal, and MailChimp.
Here's what you’ll learn about in this 4-part series:
| Part 1:
What you should know
Getting started: Installation
| Part 2:
Creating your donation form with Gravity Forms
Connecting to Stripe or PayPal
| Part 3:
Integrating with MailChimp
| Part 4 (this article!):
Styling your forms
Styling Your Forms
The forms that you've set up above will work as-is, but they're not customized to your brand. Gravity Forms' form HTML is complex and contains some weird opinions. The stylesheets that Gravity Forms includes are similar: weirdly scoped, curiously specific, and often a bit perplexing.
However, because Gravity Forms' styles are somewhat useful, we keep them enqueued and then modify them. Here are the modifications we make:
- On the INN form, we applied these styles, derived from this LESS source code
- On the MTD form, we applied these styles, derived from this LESS source code
These example styles are scoped to the form IDs and they also depend on a wrapper class that can be added to your form settings but they may not be immediately applicable to your form if the form ID or CSS class is different. We hope that these are at least useful as a starting point.
Still feeling a bit confused? Need some help with custom styling?
We're happy to work with you to get you up and running! Get in touch to discuss how we can help.