00:00:05:41 - 00:00:32:10
Donations are essential for many organisations, particularly Charities, and Not-for-Profits. Creating engaging, user friendly donation forms that align with your brand is crucial for success. In this tutorial, we'll explore the exciting new styling options in the Form Transaction block The foundation of all donation forms. Let's dive in! I've started with a basic donation form and added a transaction block.

00:00:32:14 - 00:00:59:08
While it's functional, it doesn't quite match our branding. Let's explore the style options to transform it. First, let's look at font customisation. Our brand uses Source Sans Pro for emails, so I'll select that and increase the size for better visibility. We can also add bold styling, italics, underlines and adjust colours to match our brand. Now for the exciting part button styling.

00:00:59:12 - 00:01:27:32
We have three states to work with. Main, the buttons default appearance. Hover how it looks when someone moves their cursor over it and Selected the styling after it's been clicked. We can fine tune the border style and radius to create the perfect shape button. Looking at our donation amounts, I notice they're a bit uneven. Let's set a minimum width to create a more balanced professional appearance.

00:01:27:36 - 00:01:55:28
The other amount field is important, but fills two dominant. I'll reduce the block's max width to 40% for a more harmonious design. For a polished look, I'll centre align the block on the page and also the buttons alignment in the block. SwiftFox offers various spacing options like space between, space around and space evenly giving you complete control over the layout.

00:01:55:32 - 00:02:20:22
And then we have it. Let's preview our work. Notice how smoothly the hover and selected states transition, and how the entire form now looks professional and on brand. Thanks for joining me in this tutorial. For more tips on creating engaging forms and optimising your donation process, check out our other videos in this course. And don't forget to try these styling options yourself.

00:02:20:26 - 00:02:22:04
Your donors will thank you for it.