Warning: count(): Parameter must be an array or an object that implements Countable in /mnt/stor08-wc1-ord1/694335/814258/www.danielmelbye.com/web/content/wp-content/plugins/iwp-client/api.php on line 40

Warning: count(): Parameter must be an array or an object that implements Countable in /mnt/stor08-wc1-ord1/694335/814258/www.danielmelbye.com/web/content/wp-content/plugins/iwp-client/api.php on line 40

Warning: Cannot modify header information - headers already sent by (output started at /mnt/stor08-wc1-ord1/694335/814258/www.danielmelbye.com/web/content/wp-content/plugins/iwp-client/api.php:40) in /mnt/stor08-wc1-ord1/694335/814258/www.danielmelbye.com/web/content/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
4 donation form designs that deliver results #sm4sg

    4 donation form designs that deliver results #sm4sg

    You may want your website to accomplish a variety of organiz\sational goals, but a steady stream of online donations are an essential goal for all not for profit websites.

    For that reason, donation pages continue to be a central part of nonprofit website design. If you’ve succeeded in designing a great donation process, that guides website visitors to your donate page and makes it easy for them to donate, then you are likely to increase the amount of income your raise online.

    However before you even get to the visual look (the user interface) of your design, the more critical design work involves understanding how you will organise and present your form fields to make the process as easy and clear as possible. There are four ways that charities can capture information within donation forms. Choosing the right one can be critical to creating a good donation process

    Single page donation forms

    All donation information fields are placed on a single page.

    donation single

    The good:

    • there’s only one submit button to press
    • a single URL gives access to all form fields
    • it doesn’t force a fixed order of completion
    • you benefit from context of neighbouring sections
    • progress is self-evident

    The bad:

    • long forms can be overwhelming and off-putting
    • it’s less well suited to branching or non-linear flow
    • how do you save partial progress?
    • can be harder to track analytics like drop-off rates
    • making validation errors usable is harder

    Multi step form

    Many charities opt for a multi-step donation process that breaks down the donation form into small bite sized chunks. By guiding donors through a series of pages with small bits of information you can simplify the process.

    donation steps

    The good:

    • it’s easier to handle branching and dependencies between questions
    • it’s easier to let the user save progress
    • a transaction can feel more manageable
    • easier to guide a user through an unfamiliar process
    • easier to capture analytics like drop-off rates for each section

    The bad:

    • harder to show progress
    • uers have to click more to progress through the questions
    • you lose the context of neighbouring questions
    • you need to build a seperate page to review and edit questions
    • doesn’t naturally handle non-linear processes like looping, adding and removing

    Accordion donation form

    All information fields are placed on a single page, but each new question only appears once the previous section has been completed.

    donation accordian

    The good:

    • can handle branching and dependencies between sections
    • users can review and edit previous questions at any time
    • can help guide a user through an unfamiliar process
    • user still benefits from some surrounding context
    • progress is clear

    The bad:

    • Implementation and interface is more complex

    Done well, option 3 is a hybrid of the other two that has benefits of both the other options. Within this hybrid option there are still some important design decisions to make. For example:


    For more complicated transactions, some combination of the other options might be your best bet.

    donation hybrid

    Again, done well this can give you the benefits of both the single page and wizard approaches. It also allows you to create a sense of rhythm to the overall flow, which can help people to understand when they have moved into a different part of the transaction, and break up the monotony of filling in forms.

    As always, these design decisions must have a strong, user-centred rationale behind them. Choose a structure for your donation forms that most naturally fits the way people need to use them.



    I kinda dig the single form donation Daniel.

    Even though it takes a bit to get through the page the 1 URL idea resonates with me.

    When I need to scroll through page after page – donation-wise, or heck, buying-wise – I find myself nodding off lol.

    At best, I’ll make the donation but I love the simplicity of having one page to scroll through.

    Living in the tropics and in areas where I have a sometimes spotty connection – and many times a less than powerful connection – I like getting all information I need from one page because I know not if the next page I have to visit will be there when I click forward.

    Cool breakdown ;)


    Thanks for your feedback. I am interested to know what everyone else’s experiences are of these different types of form

    Leave a Comment

    Your email address will not be published. Required fields marked *

    Leave a Reply to Daniel Melbye

    Get in touch

    Your relationship with your photographer should be special and one of open communication and ideas. Tell me all about your wedding hopes & dreams.