3.0 Contribution Example

Create your webform as shown in Getting Started

Contribution Page

For Drupal 7 version you need to specify which contribution page will be used (these then provide the receipt text if there is any). Visit Creating Contribution Pages. This step is not required for Drupal 8/9.

You must also have your Payment Processor set up. Visit Payment Processors.

Many onsite payment processors are supported.

We have given this example the Label Donor.

In order to have a successful contribution transaction, you must collect the following information (Contact Fields) from the user First Name, Last Name and E-mail.

Now we will select our Contribution Page Donate

We want the user to be able to input Contribution Amount

We have selected Credit Card as our Payment Processor

Our Payment Processor Mode is Live Transactions

Next, we need to go to the Build to organize our page.

Build

To process the contribution, a 2-step payment process, we need to create a Wizard Page.

Click the Add Page button. We will call this page Donor Details

When you click Save, the new page will show up at the bottom of your elements.

Now we will reorganize the page, by hovering on the multi-direction arrow on the left which give you the drag to re-order option.

Drag the Donor Details line to the top of the elements

Next, we move Donor information so it sits under the Donor Details

We also move the Contribution Amount so it sits equivalent to the Donor Details

Click Save Elements

View

And if we take a look at our Form it looks like this

Test

Now let's test the Form

Remember we are performing a real transaction, using a test visa.

Contact your payment processor for your specific test visa information.

Click Submit, and we receive a confirmation that a submission has been added to our Contribution Example Webform.

Let's check in our CiviCRM database.

Navigate to CiviCRM > Contributions > Dashboard and we see all the necessary transaction information

Remember that your Contribution Page is where you set up sending an e-mail receipt to you donor.

Form YAML

YAML is found under Build > Source

donor_details:
  '#type': wizard_page
  '#title': 'Donor Details'
  civicrm_1_contact_1_fieldset_fieldset:
    '#type': fieldset
    '#title': Donor
    '#form_key': civicrm_1_contact_1_fieldset_fieldset
    civicrm_1_contact_1_contact_first_name:
      '#type': textfield
      '#contact_type': individual
      '#form_key': civicrm_1_contact_1_contact_first_name
      '#extra':
        width: 20
      '#parent': civicrm_1_contact_1_fieldset_fieldset
      '#title': 'First Name'
    civicrm_1_contact_1_contact_last_name:
      '#type': textfield
      '#contact_type': individual
      '#form_key': civicrm_1_contact_1_contact_last_name
      '#extra':
        width: 20
      '#parent': civicrm_1_contact_1_fieldset_fieldset
      '#title': 'Last Name'
    civicrm_1_contact_1_email_email:
      '#type': email
      '#form_key': civicrm_1_contact_1_email_email
      '#extra':
        width: 20
      '#parent': civicrm_1_contact_1_fieldset_fieldset
      '#title': Email
  civicrm_1_contribution_1_contribution_total_amount:
    '#type': number
    '#parent': contribution_pagebreak
    '#data_type': Money
    '#extra':
      field_prefix: $
      point: .
      separator: ','
      decimals: 2
      min: 0
    '#form_key': civicrm_1_contribution_1_contribution_total_amount
    '#title': 'Contribution Amount'
contribution_pagebreak:
  '#type': wizard_page
  '#form_key': contribution_pagebreak
  '#title': Payment
  civicrm_1_contribution_1_contribution_contribution_page_id:
    '#type': hidden
    '#expose_list': true
    '#empty_option': None
    '#extra':
      hidden_type: hidden
    '#parent': contribution_pagebreak
    '#form_key': civicrm_1_contribution_1_contribution_contribution_page_id
    '#value': '2'
    '#title': 'Contribution Page'