Responsive Donation Forms

Responsive donation forms automatically adapt to any screen size on desktops, tablets, or smartphones, allowing donors to enjoy a seamless experience wherever they give. This design approach eliminates frustrating zooming or scrolling, making the process simple and accessible for everyone.

Benefits for donors and organizations

A responsive form isn’t just a design choice. Responsive forms are a best practice that directly impacts donor trust and conversion rates. With mobile giving on the rise, donors expect forms that work flawlessly on any device. When your donation form is optimized for all screen sizes, donors are less likely to abandon the process, leading to higher completion rates and more contributions.

Why you should implement responsive forms

Responsive design improves usability, readability, and engagement, ensuring donors feel confident and supported. By prioritizing accessibility and convenience, your organization can maximize donations and strengthen relationships with supporters.

Responsive Page Wrappers

In addition to making your form responsive, you must also make the Page Wrapper around the form responsive. See Responsive Wrappers and Layouts for instructions.

  1. While creating or editing a donation form, go to Identify Donation Form and select Responsive Form Layout.

  2. Under Design Donor Screens, choose Customize Look and Feel from Related Actions.

  3. Select a responsive Page Wrapper.

    • If using a standard wrapper, pick your responsive Page Wrapper from the list.

    • If using a custom wrapper, select Override the default Page Wrapper and select your custom wrapper.

  4. Optional Paste CSS specific to this form in the provided text box. This CSS will override the wrapper’s styles only for this form, without affecting other resources.

Note: Standard Donation Level Element does not allow configurable column layouts in responsive forms. Layout is controlled by responsive CSS and follows best practices.