Amp up your Giving Form's visual appeal.
Form or function... Why not both?
iDonate Giving Forms offer the ability to customize form elements with Custom CSS. This lets organizations take full control over the look and feel of their Giving Forms, so that they fit seamlessly into their surrounding styles.
A Quick Primer on CSS
To those less familiar with CSS, here is a brief summary of how CSS functions.
Each element on an HTML page has attributes, such as height, width, position, color, etc. Each element also (ideally) has its own unique label, be it a class name or ID.
This means that you could logically make a statement like "I want to adjust the attributes of this element that has this class name." That's CSS in short.
A quick example: Chaning the color of an element with a class name of edit-element:
.edit-element{
background-color: rgb(0,255,0);
}
CSS is its own world, and there's no way to impart all its capabilities in just one article. To those who want to learn more about CSS, the web is absolutely teeming with talented individuals who regularly share their knowledge of the language. A great place to start is codepen.io, where front-end developers showcase their creative usages of CSS.
How to Determine Element Class or ID
The first step of creating a CSS statement is to find the label of the element you want to adjust. This can be tricky, but luckily, modern browsers include developer tools that make the process much easier.
To begin, open the Developer Tools window. Then, select the 
icon. This will allow you to mouse-over elements to see a preview of their attributes. Click the element you wish to adjust. This will update the Developer Tools window so that the element's attributes are visible.
You can then copy and paste the element's label into the CSS interface, and enter your CSS statement. Select Update to apply your changes.