CSS Quick Reference

The basic locations of Giving Form elements

The table below illustrates the CSS queries that target the high-level elements of the Giving Form.

Be aware that certain CSS Class queries will affect multiple Giving Form elements.  These will be marked with a ✓ under Multiple Class Instances.

It is also worth noting that these are high-level class names and ID's, so to fully customize Giving Form elements, it will often be required that you find more specific classes and ID's.  For more information on how to go about doing so, please see our article detailing how to determine classes and ID's.


Giving Form Element CSS Class CSS ID Multiple Class Instances
Header GF-Header    
Custom Content GF-CustomContent  
Gift Button GF-GiftOptions__button  
Payment Option Button GF-PaymentOptions__button  
Donor Info: Prefix GF-BillingInfo__select--prefix Prefix-select-id  
Donor Info: First Name GF-BillingInfo__textfield--first-name    
Donor Info: Middle Name GF-BillingInfo__textfield--middle-name    
Donor Info: Last Name GF-BillingInfo__textfield--last-name    
Donor Info: Company Name GF-BillingInfo__textfield--company-name    
Donor Info: Email GF-BillingInfo__textfield--email    
Donor Info: Phone GF-BillingInfo__textfield--phone-number    
Donor Info: Country GF-BillingInfo__select--country    
Donor Info: Address 1 GF-BillingInfo__textfield--address-1    
Donor Info: Address 2 GF-BillingInfo__textfield--address-2    
Donor Info: City GF-BillingInfo__textfield--city    
Donor Info: State GF-BillingInfo__select--state    
Donor Info: Postal Code GF-BillingInfo__textfield--postal-code    
Donor Info: Card Number   card_number  
Donor Info: Card Expiration GF-CCPaymentInfo__expiration-date    
Donor Info: Card CVV   cvv-form  
Button: Recurring Option GF-RecurringOptions__button  
Designation Dropdown GF-DesignationPicker    
Cover Transaction Fee   GF-CoverTransactionFee  
Give Anonymously   GF-GiveAnonymously  
Custom Field GF-CustomField GF-CustomField
Company Matching   dtd-search-box  
Email Opt In   GF-EmailOptIn  
Give Now   GF-SubmitButton  
Label: Designation GF-DesignationPicker__Title    
Label: Custom Field GF-CustomField__heading  
Label: Email Opt In GF-EmailOptIn__heading    
Footer GF-Footer__text    
Impact Statement Text impact-statement