Contribution

Contribution Page

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

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

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

Next, we need to provide what type of information we are collecting about this contribution

Contribution

Contribution Amount allows the user to input the amount they want to contribute.

Payment Processor is how this payment will be processed.

Contribution Note allows the user to add additional information.

Payment Processor Mode allows you to select between live or test transactions.

Contribution Source

More information on Soft Credit To and In Honor of visit the CiviCRM User Guide.

Recurring Contribution

If you want to offer recurring contributions, you must first ensure your payment porcessor supports this type of transaction. More information can be found in the CiviCRM User Guide.

Frequency of Installments

Number of Installments

Interval of Installments

Custom Fields

If you have defined any Custom Fields in CiviCRM on Contribution they will show up here. More information on Custom Fields is available in the CiviCRM User Guide

Add Dynamically

Additional Line Items

View

With our choices, our webform now looks like this

Build

These are how our elements look on the build page

Test

Let's test the webform now and this is what it looks like populated with responses.

Form YAML

YAML is found under Build > Source

contact_flexbox:
  '#type': flexbox
  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_activity_1_fieldset_fieldset:
  '#type': fieldset
  '#title': Activity
  '#form_key': civicrm_1_activity_1_fieldset_fieldset
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'
  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'
  civicrm_1_contribution_1_contribution_note:
    '#type': textarea
    '#parent': contribution_pagebreak
    '#form_key': civicrm_1_contribution_1_contribution_note
    '#extra': {  }
    '#title': 'Contribution Note'
  civicrm_1_contribution_1_contribution_source:
    '#type': textfield
    '#parent': contribution_pagebreak
    '#form_key': civicrm_1_contribution_1_contribution_source
    '#extra':
      width: 20
    '#title': 'Contribution Source'