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.
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.
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.
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.
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.
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.
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.
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.
View the Form
To view the form, simply click the ‘View’ tab on top of the main form’s page.
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.
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.
