2.0 Adding a Custom Field

The custom field must first be created in CiviCRM. Visit Creating Custom Fields to learn all about custom fields.

Once your custom field has been created, create your webform as shown in Basic Webform

CiviCRM Configuration Form

Open your basic webform - Structure > Webform > Basic Webform > Settings > CiviCRM

Just below where we chose our Email field, there is a box for Enable Custom Data Fields. Select yes and any custom data fields you have created will show up here For this example our custom data is called Cookie preference

View

Let’s take a look at how the form looks right now. Select View

But what if we want to re-arrange how the user sees their options?

Build

Click on the Build Tab and let's take a look at our elements

You see that the custom data element is a field set.

We can change from a drop down menu, or listbox, to a radio button selection.

On the cookie preference line, select edit

In the Edit Cookie Preference Element, under Extra, deselect listbox, and save.

Now, let’s look at the new view of our webform

Test

We can then select Test and see how the form will look like when it is filled out. After clicking submit, be sure to check your CiviCRM database to see that the data landed in the correct fields.

Form YAML

YAML is found under Build > Source

YAML for Drop down, listbox,

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_contact_1_cg1_fieldset:
  '#type': fieldset
  '#title': 'Custom Data'
  '#form_key': civicrm_1_contact_1_cg1_fieldset
  civicrm_1_contact_1_cg1_custom_2:
    '#type': civicrm_options
    '#title': 'Cookie preference'
    '#options':
      Vanilla: Vanilla
      Chocolate: Chocolate
    '#default_value': false
    '#format_items': ul
    '#format_items_html': ''
    '#format_items_text': ''
    '#extra':
      aslist: 1
      multiple: 0
    '#form_key': civicrm_1_contact_1_cg1_custom_2
    '#parent': civicrm_1_contact_1_cg1_fieldset
    '#default_option': false

YAML for Radio Buttons

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_contact_1_cg1_fieldset:
  '#type': fieldset
  '#title': 'Custom Data'
  '#form_key': civicrm_1_contact_1_cg1_fieldset
  civicrm_1_contact_1_cg1_custom_2:
    '#type': civicrm_options
    '#title': 'Cookie preference'
    '#options':
      Vanilla: Vanilla
      Chocolate: Chocolate
    '#default_value': false
    '#format_items': ul
    '#format_items_html': ''
    '#format_items_text': ''
    '#form_key': civicrm_1_contact_1_cg1_custom_2
    '#parent': civicrm_1_contact_1_cg1_fieldset
    '#default_option': false