MULTI-PAGE FORM USING DRUPAL WEBFORM MODULE

New webform

Hi Friends, Sorry for not writing many tutorials I am very busy with my new Job.

However I will find few hours every saturday and Sunday to write some tutorial to help you all new Drupalers to know the power of Drupal.

Today I gonna show you how to create multipage form using Drupal Webform module. You can use this method for creating a questionair, product registration, user registration or anything you want as a webform. OK let's get started.

[1] System Requirements

[2] Install and Enable the modules

Install all the modules to your drupal site directory sites/all/modules. (Note: You have to create the modules folder).
After installing the modules login to your site and then go to/admin/build/modules and enable the moules.  Now go to admin/settings/webform
and choose the content type you want to create the webform, by default webform creates a new content type called webform and selected this content type as the dafault webform content type.

After that you get an option to select or deselect webform components such as date, email etc select everything if it is not selected by default.

Below that type in your default email address where you want your form to be send, also from name and form subject. remember this only default you can chnge this option for each form individually. Below that you can see advanced area which I didn't touch because the defult option was fine for me.

Webform-admin-settings

[3] Create the webform

Click create new content and create a new webform, now when you see the new webform content type yo will be surprized because it looks just like any other nodes where are the form components???? Don't worry you can see them soon however inorder to see those form components yo have write the node title and if you want body field too and click save. After saving the node you can see two new button called webform and results have been added next to the edit button. Click on the webform button and now you can see the webform components and other configuration settings.

webform-buttons

First let's add our form components I am creating creating this as just sample you can create however you like.

1) I add a new Fieldset from the select option called Personal Information

2) Next I create textfield for Fullname

3) Next I create E-mail for E-mail

4) Next I create a Date field for Birthday

5) Next I create Page break field called page break

6) Next again I create a new Fieldset from the select option called Questionair

7) Next I create a Select field for a question what's your favourite software?

and then I set this field as mandatory and on the configuration window I deselect the listbox so that I can get the options as radio buttons.

Please look at the sreen shot to learn how to write the select options

Edit Components

Webform-Components

I have created many fields like this and then I click on the Form settings button and here you can set a confirmation message or redirect to a particular URL after the form submission, and then below you can set the form sumission limit per user and finally you can set the access permission and optionally if you want you can set the Advanced settings too and click Save configuration button.

Webform-settings

Next click on the Email button and add the email address you want the form data to be send.

Next go to admin/build/themes and click on Configure button and at the right side column disable the Display post information on for Webform Content type so that users don't see the author information on the webform page. (You can do same for other content type for hiding the author info from users). and click the Save configuration button.

webform-global-settings

Next go to admin/content/types and click on edit button of the Webform content type and on comment settings disable the comment option so that users won't see a comment box below the webform. (Note: if you are disabling the comment settings after creating the webform you have to disable the comment settings from the existing webforms node too.)

New webfrom

Webform-next-page

Due to my busy shedule I havn't re-cheked this document throughly, if you find anything strange or anything not understanding please comment below so that I can fix the problems and help to give you a better solution.

Have a great Drupal development.

Comments

Hello Ciril, I am new to drupal, as a part of our final project in CMS, we are required to build our own Mini Social Networking Site using drupal, The primary features would be,

* User registration
* Be able to logon to my site
* Befriend other members
* Have their own primary photo
* Post their personal information
* Be able to log out from the site
* and the chat module

I'm still reading from your posts here about webforms, can I have some tips from you? I would be glad to see a reply from you, thank you!

Checkout my new video tutorial on youtube!

If you are looking for a community something similar to that I shown in the tutorails then reply me back I will give you the tips and tricks to achive that.

 

Best Wishes

Hello Ciril..

i replied to you because I really want to learn drupal at its very core, on what really drupal could do...I want to explore more,/..Because I'm taking up IT and as our final project in the 3rd year, we need to or make a cms based website...and I've decided to make mini social networking site...

Hey Ciril,

I am a new Drupal 7.0 user too, as I make a webform and put Captcha but it doesn't show on? do you have youtube video?

And the last thing as I also need to make a mini social networking on my final project, so can you let me know your video link?

By the way, I make drupal site already and when our teammate send me the update sql, I import to my myadmin, then my previous webform will disappear and mentioned I should put the webform module on root side of module, It mentioned as below:

Fatal error: require_once() [function.require]: Failed opening required 'C:\xampp\htdocs\ninegirlsaska2/modules/webform/views/webform_handler_field_node_link_edit.inc' (include_path='.;C:\xampp\php\PEAR') in C:\xampp\htdocs\ninegirlsaska2\includes\bootstrap.inc on line 2789

sorry, I know it is so long question, hope you can help me.

Take care !

Fanny

Hi Ciril,

Awesome tutorial!
I have learnt alot from your tutorial. I am new to Drupal and struggling to theme a webform. Can you please help me in styling a webform? I can donate to your contributed time on my project.

Please let me know by email.

Thanks and regards,

Amin

You can create a custom page.tpl file for the webform, and then code it as you wish.

There are many ways to do things,  I think this would be the easiest way for you to design your form.

 

Check the webform module section in the drupal site for more info about theming.

 

Best Wishes