Oct
11

How to create a Webform

How to create a new form using Webform – Drupal module.

For example, I want to create a Webform for Student Registration for coming Inter College Sports competition.

Below are the fields which I want to include in the form.

  1. Date
  2. Name
  3. Email Address
  4. Contact Number
  5. Address
  6. Game Name
  7. Single or Team
  8. Describe Your Skills

Please follow below steps:

  1. Create a Webform. Go to Structure -> Webform

  1. Now click on Add Webform and fill required fields then click Save.

  1. Now you will get a success message as the Registration form is created.

  1. Now add the elements (fields) using Add element tab.
  2. For example, our first field is Date, Click on Add element. Type Date in search and select the element.

  • Select Date and fill required fields and click on Save.

  1. The second field is Name, Click on Add element, you will get a popup screen like below.

  • You can filter element using search or else you can find using drag bar. For the name, we need to use Text field element.
  • Fill required fields and click on Save.

  • After clicking save, the element will be add to the form as shown below.

  1. Like this, you need to add all the elements which are required for the form.
  2. Will add a few more fields like Email, Contact Number, and Description.
    1. Email

 

 

  • You can use Placeholder for the field.

  • Contact Number

 

 

  • Describe Your Skills

 

  1. Like this, you need to all your required fields and all will be saved under the form. Even you can arrange fields using row weights. Please see below image.

  1. Now access the page and check page loading or not
    1. Great, Page is looking good and properly loaded.

 

  1. The final step, check the page as Test Submit with Duplicate details.
  2. Fill the details and click on Submit.

 

  • You will get a success message as shown below.

  1. All Students Submission will be available under Results tab under Student Registration Form. As shown below.

  1. That’s it. Like this, you can create more forms based on your requirement.