In this example we are going to create a simple Webform that allows a user to update a set of custom contact fields that have already been created in CiviPlus. A Field Set to hold Education and Certification Details used for Contacts has been created with the following details:

The article here will explain how to create custom fields if you don't already know.

The stages to create our simple Webform are:

Each stage is described in more detail below.

Go to the Self-Service Portal and navigate to Content -> Add Content -> Webform.

You will see a "Create Webform" page where we complete some basic information about this new Webform:

Click the Save button to actually create the new Webform.

Once you save the Webform basic information you will see a page with various tabs that allow you to complete the Webform configuration. The purpose of each is described below:

This is where you define how the Webform is going to interact with the CiviPlus system, and so it is often best to configure this tab first. When you check the Enable CiviCRM Processing option the left of the page page shows a number of different CiviPlus entities that you can configure. Depending on what types of data you want to collect with the Webform you might need to complete several of these sections, in our simple example we are only interested in the Contacts section.

A Webform can be associated with multiple contacts in CiviPlus, for example you may want to display/capture details of an individual and the organisation that they work for, in which case you would set the Number of Contacts to 2. Or perhaps you want to allow someone to enter details of up to five new individuals, in which case you would uld set the Number of Contacts to 6 (details of the person filling in the Webform plus five others). A separate Contact tab will be created on the left for each contact that needs to be configured, but in our example we can leave the Number of Contacts as 1 and so a single Contact tab will be shown.

By configuring the Contact page we can specify what fields are displayed on the Webform and how they are processed in CiviPlus when the submit button is clicked.

Contact Type

Different contact types will have different fields associated with them, and so we need to tell the Webform which type this contact is. In our example we select "Individual", but note that if we had chosen "Organisation" a different set of fields and options would be displayed.

Label

A generic label of "Contact 1" gets created by default, but it's best to replace this with something more meaningful as it will make the Webform easier to understand when configuring and displaying to the end user. . We will use "My Details" in this example.

Contact Fields

This is where we start to populate the Webform with fields from CiviPlus. Checking the Existing Contact option tells the Webform that the details we are about to complete belong to person who may already stored in CiviPlus, and so any changes or new fields should be recorded against this contact. It it turns out that the person is in fact not already known to CiviPlus then a new contact record will be created. First Name and Last Name are the minimum contact fields that you should select - but in you want to display and update any of the other "standard" contact fields then just select them as well. Current Employer is used when you want to show a contact's Organisation details as well as Indvidual details (as mentioned above, you would need to set Number of Contacts to more that one in order to do this) - in our simple example this is not needed.

Matching Rule

This is where you specify how CiviPlus is to handle recognising an existing contact to avoid duplications being stored. This is a whole topic in itself covered in this article , but luckily the "Default Unsupervised" rule will suffice in 99% of circumstances

Number of Gift Aid Declaration Fields, Enable Tags and Groups Fields, Number of Address Fields, Number of Phone Fields

We will skip over these options as they are not necessary for our example. Suffice to say that if you wanted to include any of these field types on your Webform then choose the number of each you need and then select the individual fields you want displayed.

Number of Email Fields

This is an important option to select if we want the Matching Rule described above to work and avoid duplicates being created. We have already chosen the First Name and Last Name fields in the Contact Fields section, and by choosing to display the Primary Email field Location we can ensure that when submitted the Education and Certification Details will be recorded against the right contact.

Number of Website Fields, Number of Instant Message Fields, Enable Members Directory Information Fields, Number of Custom Insurance Fields

We will skip over these options as they are not necessary for our example.

Enable Education and Certification Details Fields

Finally we get to the part where we can select the contact custom fields are are interested in. When we choose "Yes" for this option we will see all of the fields in the Education and Certification Details field set previously created in CiviPlus and we can choose which ones we want to include in the Webform - all of them for this example.

The completed CiviCRM tab for our example is shown below.

Once the CiviCRM tab has been completed and saved the CiviPlus fields get added to the Webform, which you can then further configure by visiting the Webform tab.

Under Form Components you can see a list of the CiviPlus fields that will be displayed on the Webform. You can edit these fields and change aspect such as whether to show/ hide the field label, make it disabled or mandatory etc. Depending of the type of the field there can be some very sophisticated options available, such as default values determined by the relationships between fields, validation and so on.

You can also add additional components, such as HTML Markup for images and other rich text blocks, or page breaks, and the position of fields in the form can be adjusted by dragging vertically, or horizontally to move them in/out of field sets i.e. groups of fields.

As an example of the sort of field configuration you can do, we are going to make a slight change to the Graduation Year field. Because this is a date field, by default the date picker will show a full calendar from which a particular date (dd/mm/yyyy) can be selected. We want the user to just pick a particular year, so we will edit the field so that this happens.

We go to the row in the list of fields that shows Graduation Year and click the Edit link.

Then, on the page that follows we find the section labelled Hide, and select Day and Month so that these will not be options that the user can choose.

Now we click the Save Component button at the bottom of the page to commit the change, and don't forget to click the Save button on the Form Components page itself if you have change the order of anything in the list.

.

There are a great many other things that you can can configure for each of the Webform components, so please refer to the article on Complex Webforms to see how to do this.

The Conditionals tab allows you to create conditional logic for displaying or hiding specific form fields based on user inputs. This feature enables the Webform to dynamically adjust which fields are visible, depending on the data a user enters. By using conditionals, you can make your forms more interactive, streamlined, and relevant, only showing fields when certain conditions are met.

Please refer to the article on Complex Webforms to see how to configure this tab.

The Form Validation tab allows you to set up rules and conditions to ensure that the data users input into the Webform meets specific requirements before submission. This helps to maintain the accuracy and integrity of the information being collected.

Please refer to the article on Complex Webforms to see how to configure this tab.

The Emails tab allows you to configure automatic email notifications which are triggered when the Webform is submitted. This feature is designed to send emails either to users (such as form submitters) or to administrators when certain conditions are met.

Please refer to the article on Complex Webforms to see how to configure this tab.

The Form Settings tab contains various options that allow you to control the behavior, appearance, and functionality of the Webform itself. It helps customise how the form behaves for users when they interact with it and allows you to configure high-level settings related to submissions, security, and user experience.

For our example we are just going to make one configuration change from the default Form Settings. Since our Webform is so short we don't really need the Progress Bar, and so we will uncheck that option on the page and Save the Configuration.

Please refer to the article on Complex Webforms to see how to configure the remainder of this tab

From within the Webform configuration page you can click the View tab to see what the Webform will look like. The url at the top of the page can be used to make the Webform accessible for anyone else - the page below shows what a registered user called Ali Farley might see. Note that Ali's name and email address have been automatically filled in so that when he clicks the Submit button the details he has entered will be automatically stored against his existing contact record in CiviPlus. If an anonymous use was completing the form then a new contact record would be created using the name and email details entered into the Webform.

Finally, this is the page that Ali will see once he has submitted the form.