Customized Donation Forms - Beginner

Melinda Noack

Hi All,


I'm pretty new to Luminate and even newer to API, CSS, Java, etc. so I've been creating very basic donation pages through Luminate's Donation Forms.  There's such limited customization to the fields, design, etc. so most of our pages end up looking like this: https://secure2.convio.net/tndc/site/Donation2;jsessionid=00000000.app20119b?df_id=1742&mfc_pref=T&1742.donation=form1&NONCE_TOKEN=A5A2A251A45C77119C05568D6133C106


I really need to create some better-looking and branded donation pages, and in particular, one that's geared toward monthly giving. Right now, we have that tiny box to check for a monthly donation and that won't cut it.


Any help and instructions for a beginner would be really appreciated.


Thanks!

Melinda 

Brian Mucha

Try adding an HTML Caption to your form. These allow you to add simple text blocks to your form.


Captions allow html tags, so you can use these to add a <style> block to your form. This is a simple way to add CSS to a stock form without fooling with the page wrapper or linking external css files.


Try adding a caption with:


<style>

    .donation-level-container-generic-repeat .generic-repeat-label-checkbox-container { background: yellow; padding: 5px; }

    .donation-level-container-generic-repeat label { color: red; }

</style>


This trick was the first way I modified our donation forms. 


When you exhaust the possibilities here, the next step is probably getting access to your Page Wrapper. This is where the 'theme' of your site is created - with headers and footers and all that. Editing the wrapper and any external CSS files linked there will affect all the pages on your site, rather than just the single donation form. 



EDIT: If you are just starting with html and css, I recommend getting familiar with your favorite browser's dev tools. This inspector allows you to see all the source code, and more importantly it displays all the CSS affecting the selected item. So right click on a headline and choose "Inspect" in Chrome and you will see which style sheet and rule is making your headlines blue rather than red, or whatever. You can even try out new rules to see what will happen live before editing any actual code in Luminate. (How does it look if I make it green?)

https://developers.google.com/web/tools/chrome-devtools/