Your website looks like your organization: your photography, your fonts, your colors. Then a visitor clicks “Buy tickets” or “Join” and lands on an Altru web form that looks like it belongs to someone else. Some visitors hesitate at that point, and a few leave. For anyone who manages both the website and Altru, that disconnect is a fair frustration.
The good news is that you have more control over Altru web forms than the defaults suggest. The less good news is that the control has a ceiling. This guide covers what you can realistically change, how to approach it without breaking anything, and how to tell when you’ve hit the limit.
Start by sorting what you can change from what you can’t
Before anyone opens a stylesheet, it helps to split the work into three buckets.
Usually within reach
- Text and instructions on the form: headers, intro copy, confirmation messages, and labels in many places.
- Colors, fonts, spacing, and button styling, typically through CSS applied to the form or to the page that hosts it. How and where you can add CSS varies by form type and setup, so confirm what your forms allow before planning a redesign.
- Logos and images, as long as they’re hosted somewhere public and referenced by URL rather than uploaded into the form itself.
Possible, but fragile
- Hiding or reordering elements with CSS. It can work, but you’re styling markup you don’t own. When Blackbaud updates the form, selectors can change and your tweaks can quietly stop working.
- Layout changes like side-by-side fields or multi-column ticket lists. These are often where custom CSS starts fighting the form’s own structure, especially on phones.
Generally out of your hands
- The overall step sequence of the purchase flow.
- The payment section, which is controlled tightly for security reasons.
- Core behavior, such as how the cart works or which wallet payment options appear.
Exactly where each line falls depends on the form type and your Altru setup. If you’re not sure whether something is configurable, check the form’s design options in a test environment or ask Blackbaud support before promising it to your marketing team.
Getting graphics onto a form
Images are the most-asked-about piece. The reliable approach is to host the image on your own website or a CDN and reference it from the form’s HTML or CSS. A few practical notes:
- Use HTTPS URLs only. An image served over plain HTTP on a secure checkout page can trigger browser warnings, which is the last thing you want next to a payment field.
- Keep files small. A large hero banner pushes the actual form below the fold on a phone. A slim logo strip usually does more good than a big photo.
- Don’t move or rename the file later. If someone reorganizes your website’s media library, the form shows a broken image. Put form assets in a folder that’s clearly labeled as in use.
- Add alt text wherever you can, for accessibility and for the times the image fails to load.
Writing CSS that survives
If you or a web developer are adding CSS, a little discipline saves a lot of rework:
- Keep one master stylesheet outside Altru, in a shared drive or version control, with a comment above each rule explaining what it does. When something breaks after an update, you’ll know which rule to look at.
- Prefer broad, simple rules. Setting fonts, base colors, and button styles is low risk. Targeting a deeply nested element by a long chain of class names is high risk.
- Avoid hiding required fields. Hiding a field that the form still validates can leave visitors stuck on an error they can’t see.
- Test on a real phone, not just a narrowed desktop browser. Check the ticket selection, the cart, and the payment step, then complete a test transaction and confirm it posts correctly in Altru.
- Recheck after Altru updates. Put a reminder on the calendar to run through your main forms after each release.
Match the page, not just the form
Visitors judge consistency from the moment they click. A few non-CSS changes go a long way:
- Use the same button wording on your website and the form (“Get tickets” on one and “Purchase admission” on the other feels like two different places).
- Rewrite the form’s intro text in your own voice. Default instructional copy is often the most generic-looking thing on the page.
- Make the confirmation message useful: what happens next, when the email arrives, and where to go on arrival.
Knowing when you’ve reached the ceiling
Styling helps, but it doesn’t change the underlying flow. Signs you’ve hit the limit: your CSS file keeps growing to patch layout problems, mobile visitors still struggle, or the things your team wants (an upsell in the cart, Apple Pay, a shorter path to purchase) are behavioral rather than visual. At that point, more CSS rarely fixes the problem.
That’s the gap our Checkouts product was built for. It replaces Altru web forms with a branded, mobile-friendly checkout for tickets, memberships, and donations, supports Apple Pay and Google Pay, and writes the transaction data back to Altru, so your reporting and records stay where they are.
Quick answers
Can I upload images directly into an Altru web form?
The dependable method is hosting images elsewhere and referencing them by HTTPS URL. If your version offers a direct upload option, test it in a non-production form first.
Will my custom CSS break when Altru updates?
Simple rules for fonts and colors usually hold up. Rules that target specific internal elements are the ones most likely to need adjusting, so retest after each release.
