By: Prabhat
March 31 2018

How to Create a Drupal Webform to Collect User’s Feedback

Forms are responsible for collecting user feedback, contact information, and other related information of a user, and therefore an important piece of functionality. For an admin, a webform can turn out to the best solution than creating custom forms.

Drupal 8 has a great alternative for building forms, through Webform. An admin or even an editor can easily add and edit a webform in a Drupal website. Drupal 8 core also provides a contact module which allows us to set up a sitewide and user-specific contact form.

While the Contact Module in Drupal 8 provides limited functionalities, Webform modules allow you to create your own form with any possible number of information you are seeking.

Getting Started With Drupal Webforms

Following are some of the ways with which you can install Webform module on your Drupal website:

Using Drush

  • Download the file (extracted from the administrative block) and paste it into the Drupal/module folder.
  • Download and enable the Webform module with the following three commands and then download all the required libraries:
  1. drush dl webform
  2. drush en webform webform_ui
  3. Drush webform-libraries-download
  • An alternate method is to download the libraries and after extracting the libraries. Then paste them into the modules folder. Download the module from Drupal.org.
     
  • After installing the libraries go to the Extend section and search for the Webform module if the module is not clickable then download contribute module files from the given below.

Creating The Feedback Form

We will start by making a simple web form that takes feedback from the user. This form can be easily made with the help of contact form but we don’t get many functionalities and in order, to get those functionalities we have to edit the form. But here we start our form from scratch, we can add entities according to our requirements.

Step1: Go to structure and search for the web form (we have already installed and enabled webform above). 

administrative toolbar in drupal
Administrative Toolbar

Step 2: Click on ‘Add webform’ button and fill the required details.  

Your details may include title, description, category, and whatever information you want to seek from your user.
adding webform in your drupal site. "add webform" is highlighted

adding elements in the webform
Adding the elements in the webform

        
Step 3: After filling all the required information press the 'save' button.

Step 4: Now you need to add various fields to the web form. For this click on the 'add field' button and search for the fields that you want to add.

(Note: If you want to make sure the users enter their name, phone number, email, etc correctly then use the ‘Name’,’Phone Number’,’Email’ elements. These elements add an additional confirmation to the field. Choose your fields wisely in order to make your form effective.


 adding various fields in the form

(Note: If you want to add ‘Captcha’ in your feedback form then you need to install the captcha module and enable it before using it in the form.

Step 5: Click on the view tab to see the form. I would suggest you open the form in another tab. If you open the view tab in admin mode then you won’t get to see Captcha working.

mockup of webform

(To keep the matter simple we are using the default values of the fields. To make full use of different fields we can set the values according to our uses.)

There are certain things that we need to changes before proceeding further. Following are the things:

Mark the required fields in order to make the field mandatory. When applying the required field, your form will look something like the screenshot below

selecting the required field to make it mandatory

After you have applied the fields, your form will look something like the screenshot below

selected fields are marked with red astrick
The fields selected in the previous step are marked mandatory with a red asterick.

Testing the Form:

Step 1: To test the form click on the 'test' button. 

testing the form; adding mock information

Step 2:  After clicking on the send feedback button you can see the data in the 'result' section. Your data will look something like the image below:

checking the results in the results section

Step 3: The Download sub-tab allows you to export the submissions in a variety of ways and it is possible to filter the data based on data or submission ID so that an individual doesn’t need to download all the data in one go.

Exporting the results in a csv format
Summing Up

In this article, we learned to create a webform and its related entities. If we talk about a web page coded in HTML, JavaScript, CSS it takes a lot of time and coding but here with the help of Drupal module we skipped that part and made this form without breaking a sweat. 

Let us know in the comments below how you found this article.