Create a Contact Webform Using Drupal 8 Webform Module

Posted on July 11th, 2020

In this knowledgebase, you learn the steps to create a contact form using the Drupal 8 Webform Modules. The Webform module in Drupal 8 is a flexible and powerful open-source that helps to create and manage complex forms. It also acts as a submission manager for Drupal 8. A form helps the website owners to collect the relevant information about the website visitors quickly. The addition of a form to your website is a complex process, but the Webform module of Drupal 8 makes it easy. Some of the features offered by the Webform module are:

  1. The Webform module helps to create any webforms and duplicate the existing template.
  2. It helps you to publish the Webform in different ways, such as a node, block, or page.
  3. This module helps to collect and review all the submissions.
  4. It helps to export these submissions in a CSV format.
  5. This module helps to send the confirmation and notifications of your website.

Download and Enable the Webforms Module in Drupal 8

  1. First, download the ‘Webform module’ by visiting the official site: https://www.drupal.org/project/webform.
  2. Next, go to the Drupal 8 dashboard and click the Administration option.
  3. Switch to the ‘Modules’ tab.
  4. Click the ‘Install new module’ option to install the Webforms module.
    Note: If you do not see the ‘Install new module’ option on the page, then go to the module tab and enable the ‘Update Manager’ module.
  5. Open the modules tab and click the checkbox next to Webform to enable the Webform module.
  6. Then, click the ‘Save Configuration’ button to confirm the operation.

There is an alternative option to download the Webform module using the Drush. Run the following bundle of command to download and enable the Drupal 8 Webform module.

# drush dl webform
# drush en webform webform_ui
# drush webform-libraries-download

Webform Module Interface

After the Webform gets enabled, you can see the Webform interface. This interface page has an introduction video that you can watch to know about how to manage forms using the Webform module. To open the Webforms module page, follow the below steps:

  1. Log in to the ‘Drupal’ interface as an ‘admin’ user.
  2. Navigate to the ‘Structure’ option under the ‘admin’ drop-down.
  3. In Structure, select the ‘Webforms’ option to open the Webform interface.

Steps to Create and View a Webform

1) Open the Webform interface.

2) Click the ‘+ Add webform’ button available on the top left-side corner of the Webform module interface.

 

Contact Webform

 

3) This button opens a setup page. In the setup page, fill all the details regarding the form you are going to create.

  • First, fill the title and an optional description of the form that you are going to create in the ‘Title’ and ‘Administrative description’ box, respectively.
  • Select the category of the form from the drop-down. If you are creating a custom form, then select the ‘other’ option from the drop-down and then fill the category in the below box.

 

4) After that, click the ‘Save’ button to move to the next screen.

Contact Webform

 

5) In the next screen, you can add the ‘elements’ or ‘contents’ to your form by using the ‘+ Add element’ option. Also, you can add pages to your form using the ‘+ Add page’ option on the same screen.

6) To add some elements to the form, click the ‘+ Add element’ button. This button directs you to the ‘Select an element’ screen. In this screen, you can see all the types of elements that you can add to the form. For the list, select the element and click the ‘Add element’ button next to that. You can search for the elements using the search bar at the left top corner. If you want to add elements for usernames and email addresses, then you can add the ‘text field’ and ‘email field’ element, respectively.

 

Contact Webform

 

7) In the configuration page of the form, you can customize the aspects of the fields selected, and also you can set different conditions for this field.

8) After setting the changes, click the ‘Save’ button to save the changes.

9) Repeat the same process from Step 6 to 8 to add an email field.

10) Once you added the elements, the main form displays all the added elements. On the main page, you can edit or sort these elements.

11) If you want to change the label of the submit button, you can do that using the form screen. In the form’s screen, click the ‘Customize’ button next to the Submit button(s) subheading to change the label. On the next page, change the label and click the ‘Save’ button.

12) If you want to add any pages to your form, then you can add that also from the main form’s screen.

13) Now the form creation is complete. If you want to view the created form, then you can click the ‘View’ tab on the top of the main form’s page. This page displays how the form appears on the website.

Final Word!

A form helps the website owners to collect the relevant information about the website visitors quickly. The addition of a form to your website is a complex process, but the Webform module of Drupal 8 makes it easy. We hope this knowledge base was helpful to you. Please comment below for any questions or queries. If you are an InterServer customer, please reach out to our support team for further help.

Leave a Reply