How to use the Webform module to create custom forms for your Drupal Website | Pixel Clever

The Drupal Webform module by Nathan Haug aka “quicksketch” is in my book rates up there in the top ten most important Drupal modules in existence and it’s not that hard to use once you understand how it works. This is a brief tutorial designed to help people get a handle on the Webform module quickly so they can start using it to add web forms to their website. Note: This tutorial is written in the context of Drupal 6. There may be minor differences for Drupal 5 installations.

Once the Webform module is installed and user permissions are set then you will have a new link added to your Navigation menu under “Create Content” that reads “Webform”. Simple enough. Click the link and it will take you to create your new page.

Webforms are a bit different then other content types because the creation of the form is broken up into several stages. The first stage looks just like any other node creation page, with the distinction that instead of a “Body” you have a “Description”, and an additional field called “Confirmation message or redirect URL”. You must add the title as always.
The Description field is where you place the text that you want to be visible at the top of the web form to give instructions as to how to fill out the form etc… For an example of the description field you can visit my contact page to see what I am talking about.

The “Confirmation message or redirect URL” field is also important in that it gives you a chance to decide what users will see immediately after submitting a form. If you enter a URL for an existing page on your site the user will be redirected to that URL after the form submission. This can be useful if you have multiple forms on your site and you don’t want to edit the confirmation messages separately.

E-mail to address” will default to the main admin email on the site, but if for instance you wanted to use the form to allow people to send a message to their congressman or something like that then you could enter the congressman’s email here.

E-mail from name” Defaults to the name of your website, however you could change this to have it show as coming from the user who filled out the form once you have added an email form to the field, but alas I am getting ahead of myself here, I’ll come back to this once we have the fields in place. Same goes for the “E-mail from address” as well as the “E-mail subject” fields.

Webform advanced settings offer some interesting possibilities for validation and such, but that goes beyond the scope of this tutorial for now.

Go ahead and save the form, and you will be taken to the “Form Components” page.
The name field for a new component is the label that the user will see to the left of the form field. For our use here let’s call that first field “First and Last Name”. Under “Type” you have a number of options for field types, for now we will leave it set at textfield which is a single line field. You can choose whether or not you want the field to be mandatory (which for a name I always make it mandatory) and you can choose whether you want the result of the field to be sent in the email to you or whoever is destined to receive it. (In the case of the congressman you probably would want to uncheck this box.) Now click add and you are taken to yet another configuration page to fine tune the field you just created. Personally I don’t like this behavior since I almost never make any changes in this page. The “Parent field set” field is the only one that is of interest to me when creating a new page due to the fact that in the version of Webform that I am using the drag and drop functionality for the changing the parent field set isn’t working correctly. At any rate if we had fieldsets in place we would probably want place this new component under the correct fieldset, but for now we aren’t messing with that so just click submit and you will be taken back to the Form components page.

Now that we have a “First and Last Name” field let’s add an email field. As might be expected we’ll use the word “Email” for the Name and email under the Type. We set the field as mandatory and we add it.
We go through these steps as many times as needed to build your form, then when you feel like it is ready (or when you just want to see the progress) click the publish button when on the Form components page. Yes, I know this may not seem completely intuitive to have a submit button right next to a publish button. Most people click the submit button thinking that this will finish the process only to find that their page doesn’t show to visitors. In order to be visible to the outside world the webform module requires you to click the publish button.

Now that it’s published you can click view and see the new page you have created. If you want to add components you must click the edit tab and then click on the “Form Components” sub tab. If you are running Drupal 6 and for some reason you don’t see the sub tabs it is most likely a theme issue. This happened to me after converting a theme from Drupal 5 to Drupal 6 and it took me a while to figure out that there was a theme function in the template.php file that no longer worked as expected in Drupal 6.

Now that we got some fields into place click on the edit page so that I can explain some those other configuration options that I said I would get back to.

If you have added an email field then you can now set the “E-mail from address” to be sent from the user’s email. Like I said before, this is useful for email campaigns and such where you don’t want your own email to be the sender email. You can also customize the name that the email was sent from by using the “First and Last Name” field that we created. The “E-mail subject field can also be customized using the results of any fields in the form. So basically what this allows you to do is to determine dynamically what the outgoing emails are going to say, who they are going to look like they are from, and what the subject of the email will be. Cool stuff if you ask me.

Now while webform will prevent your personal email from being taken directly there are still spammers that create programs to automatically fill in your forms with spam. You can slow them down or stop them by using the Captcha module for Drupal. I install Captcha on all sites these days, though I intend to switch to Mollom once it has complete webform support.

That’s all for now, I hope that this tutorial has given you a good foundation for working with the webforms module.