Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Step By Step Guide To Create A Form Using Drupal 8 Webform Module

March 26, 2018

4 Min Read
Drupal 8 webform
Reading Time: 4 minutes

In my previous post, I explained the process of creating a custom block in Drupal 8, this time we will discuss the process of creating forms using Drupal 8 Webform Modules.

As forms are an important part of a website, they help website owners gather relevant information about their users easily and are usually the first thing taught in a web development class.

Adding a form to a website is a cumbersome process, but Drupal has made it easy through its Drupal 8 webforms module.

In this post, I will show you how to easily create a contact form for your Drupal 8 website.

Download and Enable Webforms module

First, download the Webform module. Now install it on your Drupal website and enable it. Another option is to use Drush to download the module through the following commands:

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

Webform Interface

Let’s have a quick look at the Drupal 8 webform module interface. Navigate to admin->structure->webforms to access the module page.

drupal 8 webform interface

On this page, you can watch an introductory video of the webform module as well as one for the management of forms through the given ‘Watch video’ buttons.

Create Your First Form

Now, let’s create an example form to demonstrate the capability of webform module. Click the blue ‘Add Webform’ button on the main webform module interface.

add webform

Now, give your form a title as well as an optional description describing what the form is about. You can also sort your form according to the following categories.

webform details

The webform module classifies the contents of your form as elements. Once you’ve created your form, move to the next screen. Here, you will be able to add ‘elements,’ or ‘content.’ You can also ‘Add pages’ to your form if needed.

Let’s add some elements to the form by clicking the blue ‘Add Elements’ button.

add elements to webform

On the elements’ screen, you can see all the element types to add to your form along with a button beside each element. Let’s add a ‘text field’ element for usernames and an ‘email field’ for email addresses.

PS: You can also find these elements and many more by using the search function.

add an element

Next is the configuration page of your form. Here, you can customize each and every aspect of the selected fields and set conditions for them. Let’s give one field a title and leave all the other settings as they are.

Add text field element

Now, repeat the same process to add an email field.

When you are done adding both the fields, you’ll see that the main form now displays both the elements. From here, you can sort the elements’ order as well as edit each one individually.

sort elements

You can also change the labels for your submit buttons through the form’s screen.

To do so, simply click the ‘customize’ button beside the ‘Submit button(s)’ subheading.

submit button details

View the Form

To view the form, simply click the ‘View’ tab on top of the main form’s page.

View form

Conclusion

That’s all. You have created a basic webform using the Drupal 8 Webform module. The webform includes a ton of options. So, explore it further to know how you can build a full fledge Drupal 8 form for your website.

Hope this post was helpful to you. If you have any queries, just let me know in the comments below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Create interactive Drupal websites easily on the Cloud.

Host your website on optimized Drupal hosting servers.

Hamza Zia

Hamza is a Drupal Community Manager at Cloudways - A Managed Drupal Hosting Platform. He loves to write about Drupal and related topics. During his free time, he can be seen obsessing over Football, Cars, Android and Gaming.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!