One of our OSTraining members asked us how to make a user input form in Drupal 8.
We’re going to recommend using the Webform module, which has just had a major update.
Step #1. Install Webform and libraries
- Install the latest version of the Webform module.
- Enabled all the Webform options on the “Extend” page. You don’t need to do this all the time, but it’s useful to see what Webform is capable of. My Webform options looked like the screenshot below:
To create a more advanced Webform there are multiple libraries you can install.
- Go to Reports > Status you can see a wide variety of suggested libraries:
Here are links for the following packages:
- Webform library: CKEditor
- Webform library: Code Mirror
- Webform library: jQuery Geocoding and Places Autocomplete Plugin
- Webform library: jQuery Input Mask
- Webform library: jQuery Timepicker
- Webform library: jQuery Toggles
- Webform library: jQuery Word and character counter plug-in!
- Webform library: RateIt 1.1.1
- Webform library: Select2
- Webform library: Signature Pad
Extract the files and place them inside /libraries/ folder.
Rename the folders so that they match the naming convention, shown in the screenshot below:.
- Go back to Status > Status Reports and run cron.
- Check that Drupal sees and recognizes all the plugins we just installed.
The only alert you should see at this stage is a warning about privacy. If you are collecting sensitive data, you should make sure you have configured Webform to use private files. For more information on how to properly use private files in Drupal, please read “Accessing Private Files“.
Step #2. Building the Webform
Now, as we have fully installed Webform module, we can start building our own form.
- Go to Structure > Webforms.
- Select “Add webform”.
- Give our form a title and a description.
Now we need to add the elements for the webform, which we will collect the user information.
- Click “Add element” and you will see a long list of options:
- “Name” already exists as a predefined field. So select it from the elements list and we can configure it to our needs. You have to give every element a title. We only want the First and Last name, so untick visibility for the other fields. You should also set this to be required.
Now, for the first page, we are going to add the following fields:
- Date (for date of birth)
- Telephone (for this field you would probably want to change the Form display so that it looks a little more obvious that it is a phone number field)
- Status (for the Status field we are going to use a select type field that allows us to add the values we want to be available for our user).
- After we’ve added those fields, we can rearrange them and improve the layout:
We have a lot of fields already, so let’s add a second page to break this one up a little bit and make it look more professional:
- Select “Add page'”. This will create a page break in the form and add the navigation for it.
- You need to tell it which fields to put on which page, so we will also need to make a page for the first-page content. Indenting the fields will automatically add them to a specific page:
Webform comes with a host of extra features, such as conditional logic for fields. The image below shows the “Conditional Logic” you can find by clicking “Edit” for an element:
Step #3. Webform Layout
Now I will go and fill out the form so you can see what a filled out form would look like. If you want to add a custom element for example if you wanted to combine several elements into one type jrockowitz explains here but we won’t be covering that in this tutorial instead for passengers I will simply allow ‘add another option’ Which will still allow the data to be collected in a logical way. In Values, you could add the other fields you want to collect but they will be limited to the field type selected.
Now we have our Multiple page form but it doesn’t look very nice and we have some odd repeat behaviour. So let’s fix that. First lets update the passenger page to add a tick box to create more passengers and clone the name and date of birth fields.
Now we have to edit the name and date of birth field so that when the checkbox is selected the fields become available. We do this by selecting Edit and going down to conditional logic. And below conditional logic to both the name and date of birth field.
A multi-page Webform will look like the image below:
If you would like to improve the layout of the fields without theming, you can use the “Flexbox” options. From the example below, you can see that Flexbox can be used to make forms look more compact: