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 | ✓ |