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   
Plugin configuration
Part 2:   
Creating your donation form with Gravity Forms   
Connecting to Stripe or PayPal   
Testing transactions
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.

There are several ways to dequeue Gravity Forms' default styles; Zack Katz has an excellent blog post detailing the ways to dequeue them.

However, because Gravity Forms' styles are somewhat useful, we keep them enqueued and then modify them. Here are the modifications we make:

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.

Good Luck!

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.

Still need help? Contact Us Contact Us