Responsive Donation Forms

In the context of websites and digital resources, responsive means that the layout and content automatically adjust to fit the screen size and device type—whether it's a desktop, tablet, or smartphone. Responsive design ensures that users have a consistent and accessible experience regardless of how they access the site. This approach improves usability, readability, and engagement by eliminating the need for zooming, scrolling, or switching devices.

Why responsive donation forms matter

Responsive online donation forms are best practice because it directly impacts donor experience and conversion rates. A responsive form allows donors to easily complete their contributions from any device, which is especially important as mobile usage continues to rise. When forms are optimized for all screen sizes, donors are less likely to abandon the process due to frustration or poor formatting. In short, responsive design helps maximize accessibility, trust, and donations.

Make your Page Wrapper responsive

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.

Make your donation form responsive

  1. While creating or editing a donation form, under Identify Donation Form, select the Responsive Form Layout.

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

  3. Select your responsive Page Wrapper. If you are using a custom Page Wrapper, select Override the default Page Wrapper and choose your custom wrapper.

  4. Optional Paste Custom CSS code specific to this form into the text box. This code will override the custom Page Wrapper code without altering the appearance or behavior of other resources using this wrapper.

Note: The Standard Donation Level element does not include configurable column level layouts on responsive donation forms. The layout is controlled by responsive CSS and conforms to best practices.