How to Create Custom Form Fields with the Visual Donation Form Builder

Creating custom form fields with the Visual Donation Form Builder is a quick and easy way to customize your forms for your organization’s unique needs. You can create forms and gather important data in just a few simple steps while presenting elegant, clean forms that your donors will love working with.

Choosing where to locate the field

First, you’ll need to determine where to place the custom field on your form. You can do this by referencing the name of the section node on your donation form. You will have the option to place your custom field either before or after your section node.  The following is a list of the section nodes that a donation form typically has:

• donationAmount: This node contains the donation amount block as well as the donation frequency block (if you have the Recurring Donations add-on active)
• name: Includes the first name and last name fields for the donor.
• email: Contains the email address field.
• phone: Contains the phone number field.
• billingAddress: Contains the billing address fields.
• company: Contains the company name field.
• comment: Contains donor comments.
• anonymous: Contains the “Make this an anonymous donation”  field.
• tributes: If you have the Tributes add-on active, this node will contain all the fields that are relevant to Tributes.

Adding the field

The following example shows how to add a text field after the email section node:

add_action('givewp_donation_form_schema', static function (Give\Framework\FieldsAPI\DonationForm $form) {

    $field = Give\Framework\FieldsAPI\Text::make('favoriteColor')

        ->showInReceipt()

        ->label('Your favorite color:')

        ->placeholder('Your favorite color')

        ->defaultValue('Red');

    $form->insertAfter('email', $field);

});

This code will display the following form with custom fields (favorite color in this case):