Skip to content

3.0 Contribution Example

Create your webform as shown in Getting Started

Contribution Page

The first request is which contribution page are you going to use?

You must also have your Payment Processor set up. Visit Payment Processors Many onsite payment processors are supported.

The contribution page must be set up in CiviContribute first. Visit Creating Contribution Pages

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.

alt screenshot of Contribution

alt screenshot of Contribution

Now we will select our Contribution Page Donate

alt screenshot of Contribution

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

alt screenshot of Contribution

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

Build

alt screenshot of Contribution 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

alt screenshot of Contribution Build

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

alt screenshot of Contribution Build

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

alt screenshot of Contribution Build

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

alt screenshot of Contribution Build

Click Save Elements

View

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

alt screenshot of Contribution Example View

Test

Now let's test the Form

alt screenshot of Contribution Test

alt screenshot of Contribution Test

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

Contact your payment processor for your specific test visa information.

alt screenshot of Contribution Test

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

alt screenshot of Contribution Test

Let's check in our CiviCRM database.

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

alt screenshot of Contribution Test

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'