Create forms easily with Drupal’s Webform module

With Drupal, a flexible and powerful content management system, you can empower a community of users to publish and manage a vast variety of content. Among many other features, Drupal supports easy-to-use forms that users can fill out and send to an email address of your choosing. A default Drupal installation does not contain the Webform module, so let’s see how to add and configure it.

You install Webform the same way you install any module. Download the .tar.gz file for the module. Log in to your Drupal site as the admin user. From the Admin dashboard, click Modules -> Install New Module, click the Choose File button, specify the downloaded Webform file, and click Install.

Next, you must enable the module. Click on Modules on the admin menu, make sure the check-box associated with the Webform module is checked, and click Save configuration.

Once the module is enabled, the last step is configuration. On the admin menu click Configuration. Locate and click the Webform settings entry under Content Authoring. Here, first select the content types that can include webforms. By default, only the Webform content type is Webform-enabled. If you want to include Webforms in Articles or Basic pages, click to enable those types. Next, select the types of Webform components to include in your forms. By default, all types are enabled, and I recommend leaving that setting alone – you never know what you’ll need. Finally, set the default email values. Make sure the From address is set to a legitimate address and the From name is set for the sender name. You can also set a default subject, which is used to fill the subject line of form emails. Click Save configuration when you’ve completed the setup. At this point, you should be ready to begin crafting useful forms.

Creating forms

To create a new form you must go to the admin menu and click Content -> Add content, then click Webform from the resulting pop-up. Give the form a Title and a Body, which serve as the form’s title and description, then click Save. You can then begin adding components to the form. Components may be any of six kinds of objects:

    • Date: Allow the user to select a date

     

    • Textfield: Allow the user to fill out a textfield (textfields are limited to a single line, whereas text areas offer multiple lines)

     

     

    • Email: Allow the user to include an email address

     

     

    • File: Allow the user to upload a file

     

     

    • Select options: Allow the user to select from a list of options

     

     

    • Text area: Allow the user to fill out a text area

     

     

    Let’s create a form with two simple components: Name and Select options. First, add the name component to the form. From the Form Components pop-up (which should have appear after you clicked Saved earlier) select Textfield. Type “Full Name” (no quotes) in the New component name field, click the Mandatory check-box to make this component required, and click Add.

    drupal 2 resized 600

    Adding a new component to a webform

    Once you click Save, the full configuration window for the component appears. Here you can add a default value for the component, as well as a description, maxlength, width, label position, and prefix and postfix text. Add the necessary information and click Save Component. You should then be returned to the New Component window for the form.

    Now we’ll create a Select options component for users to choose which operating system they are using. Choose Select options from the TYPE drop-down. For the Label, use “Operating System” (no quotes). Click Mandatory and then click Add. In the full configuration window for the Select Options component, you will see an Options section where you add the selectable options that users can select. The options must be written out in key-value pairs, in the form: nickname|Full Name. Say, for instance, we want to have Linux, Windows, Mac, and ChromeOS be the selectable options. These could look like:

    lin|Linux
    win|Windows
    mac|Mac
    chrome|ChromeOS

    The key on the right side of the pair is the only key passed through the form email. After you’ve crafted your options, you need to configure how to display them. By default, options appear as a select list box (drop-down). You can, instead, set them as radio buttons or check-boxes. If you need users to be able to select multiple options, make sure to check the box marked Multiple. You can also position the Label display above or in-line with the options, or not display a label. Once you’ve completed this step, click Save component.

    The next step is to configure the E-mail to address. To do this, click E-mails, enter a destination email address, and then click the Add button. In a new section that then displays you can set a non-default email from address and configure the email template.

    Drupal

    Configuring email addresses associated with the form

    The email template is the body of the form email that is sent to the administrator of the form (the send to address). The template includes fields such as %date, %username, %email_values, and %submission_url. You can also include other fields, such as %useremail, %ip_address, and %site. Click the Save e-mail settings button and then click on the Form settings button. In the new section that then displays you can configure the form confirmation message as well as a redirect location, submissions limits, form status (open or closed), and submission access (who can submit – any combination of anonymous, authenticated, or administrator users). Make sure to fill out a confirmation message to be displayed after users click the Submit button for the form. By default the redirect location is this confirmation page. You can choose to use a custom URL or no redirect page, in which case you do not need to fill out the confirmation message, but since the message informs users they have successfully submitted the form, it’s good practice to display it.

    Once you’ve filled out your confirmation message, go through the remaining sections. Pay attention to the submission limits, if you do not want authenticated users submitting more than once. With submission access you can limit forms to only users who are logged in to your site. Even if you allow anonymous submission of forms, you can still limit anonymous users to a single submission (the system checks against IP address). To limit users to a single submission, click to enable the Limit to section under Total submissions limit, enter 1, and select “ever” from the drop-down, then click Save configuration.

    At this point, the form will appear in the main content section on the Home page of your Drupal site. If you don’t want it to live in the main section of your Home page, you can make it available as a block. To do this, click the Advanced settings button in the Form settings windows. Select the check-box to make the form Available as block and click Save configuration. Go back to the Edit tab for the form and scroll to the bottom. Here you will find six tabs; click on the Publishing options tab and uncheck the box for Promote to front page. Click Save and the form will no longer appear on your Home page.

    Drupal

    Removing the form from the main content section of the front page

    To create a block to display the form, do the following:

    From the admin Menu, click Structure -> Blocks. Scroll down until you find the entry for Webform:TITLE, where TITLE is the title you gave to the webform you created. From the drop-down, select the location where you want the block be positioned, then click Save blocks. The webform should then appear in the location you chose. As you are creating the form, you can always go back to the Edit tab (before you save the form) and remove it from the front page in the Publishing options tab.

    As you can see, creating interactive forms for your Drupal site is simple, and it is worth your time, because forms make it easy to collect data from your users. With a bit of creativity, you can create impressive and helpful forms on your Drupal site.