Webforms

Webforms are a user-friendly means to gather exactly the information you need. Captured data can be easily viewed and analyzed. Learn how to create and use webforms.

Formular und Stift

Introduction
Creating the node
Entering form components/setting field properties

  • Cloning text components: Academic title, first name, surname, name at birth, street, city, country
  • Number type: Zip Code
  • Email type
  • Listbox: Salutation
  • Checkboxes/Radio buttons: Migrant background
  • Date type: Date of birth
  • Grid type: Abilities
  • File Upload
  • Text area type: Comment

Notification of data transmitting
Confirmation email

Final settings
Testing your form
Viewing and exporting results
Formatting forms


Introduction

When you offer a vacancy or grant and ask for applications, as well as in many other cases, you may want to provide a form to make sure that you get the data you need. Of course you could create forms in Word or Adobe, but sometimes, users may not have the suitable software to fill them in or get annoyed because they have to download - fill in - save and re-upload. Moreover, after you have received the data, you will have to transmit the results manually into tables or databases which can be a time-eating procedure. Using a webform however, delivers the user inputs as email content. In addition, all the data will automatically be stored online in a database and you can browse through neat data sheets or tables to view them. Moreover, if you prefer spreadsheets (such as Excel) or database software for analysis, you can export them. By the way: Webforms can be translated in Drupal. So it is easy to provide them in more than one language.

Still our webforms should not be used for surveys and are not at all equivalents of good survey tools such as the free and OpenSource Limesurvey which offer even more options for developing, publishing and collecting online & offline surveys and their analysis. Besides, we don't have the resources to support you when you create very sophisticated forms in the CMS.

Let's now see , how to create and analize a simple application form for a job vacancy. Please understand, that this is and can be just an example and that you will have to adapt the information to your own needs and perhaps to try out things or contact the Drupal help Community in order to get a deeper understanding.

Creating the node

Let me start by creating the webform node. To do so, I click on Content - Add Content - Webform:

I provide a Title and enter an information about the vacancy in the Body. It will be shown as an introduction to the form:

Please note: For my webform I closed the comments field, which is by default open. Moreover, forms will be published immediately if you don't unpublish them. However, as there is no link to the form on a landingpage yet, only users who know the URL will be able to view it.

Entering form components/setting field properties

I am moving on by adding the desired form components. These are the fieldnames of my form. To do so, I click on Webform in the blue linkline on top and will be taken to the components overview page.

I start with First name which has to be a simple Textfield:

As the name (first and surname) is vital in applications,  I check Mandatory and click on Add.

Now, I define the component properties in Edit component.

The fields of the Edit component form are well described in the CMS interface, so I am not going to repeat this here. Just a few remarks:

It is recommended to leave the Field Key as provided. Field keys have to be unique (there cannot be two or more fields with identical field keys).

Token Values section: As I don't want to replace tokens by database values, I leave this section untouched here. In most cases, this section should be used by advanced users with background knowledge on databases only.

Validation section: 

  • Mandatory: If I hadn't checked before on the components overview page, I would do it here, as the name is vital in applications and the field must not be left empty.
  • Unique: As applicants' names cannot be unique, I leave this field untouched.
    Check "unique" only, if you want to avoid ambiguous inputs.

I also leave the Display section untouched as it provides well tested properties as preset default values for this component. I go on by saving the component and am taken back to the components overview.

Cloning text components: Academic titlesurname, name at birth, street, city, country

There will be more textfields similar to First name in my webform and their properties will be almost identical. That's why I simply clone the existing First name field by clicking on Clone on the right:

In the Edit component form, I can now simply rename First name by Surname and enter another Field Key as field keys have to be unique. Then I save.

Afterwards, I repeat the cloning for all text fields such as name at birth, academic title, street, city, country.

Number type: Zip Code

For some fields, the number of users' typos or faulty entries can be decreased or even prevented through clever component settings. Let me explain that for the Zip-Code component. As I want to ensure that only digits can be entered, I don't clone this field, but Add a new component and define it as Number type.

Please note: The number type is primarily intended for counting data (for instance sum up prices) , anyway, let me use it here for explanation purposes:

In the Edit components form, I choose Integer as zip codes in Germany consist of integer numbers only. As a result, users will get an alert when entering any characters other than digits. Moreover, I entered 0 as minimum value to prevent negative numbers. Here are my settings:

Email address

Email is one of the components for which some faulty entries can be reduced as email addresses follow a fixed pattern. That's why I choose E-mail as component type (instead of textfield type). I make it mandatory because I want to use email communication. I can leave almost all the component properties as preset and only check Unique in the Validation section and save.

Listbox: Salutation

In some cases, you can achieve more data validity (and also more comfort for users) when you offer preset values in a list or checkbox. In our example this is true for the Salutation-field. I want to provide a choice between Mrs. and Mr. Therefore, I add a component, name it Salutation and choose Select options as component type. In the Token Values section, I have to provide the list options. I can enter one value per line, so I type:

Mr. in line 1
Mrs. in line 2

The 01| and 02| in front of the values are so called safe-keys. By the help of these self-designed keys I am telling the database where to store the values. The safe-keys have to be provided in the form: "safe-key-name|" followed by the option. Instead of 01|Mr. etc. I could also have typed in a|Mr. 

Further down in the form, I am telling the system that my options are to be displayed in a listbox:

Checkboxes/Radio buttons: Migrant background

The form is supposed to gather information whether applicants have a migrant background or not. The term "migrant background" is not really clear, that's why I decided to write a short explanation into the Description field here which will hopefully help users to better understand what they are supposed to do here:

Moreover, I decided to gather this information by using checkboxes. I added a new component, also Select options type. In the Token Values section, I didn't check Multiple as it is an either/or question and only radio buttons shall be displayed. Again I have to enter the options with safe-keys followed by an | and the value :

Date type: Date of birth

To gather the date of birth, I choose Date as component type. There are multiple advantages of choosing the date type over a text type: First of all, users can pick day, month and year from a list. This way, a coherent input format in the form: dd mm yyyy is guaranteed. Moreover, the system can count with date-type values, as for instance sort them or tell the age on the basis of the date of birth. See, how counting with the date works for our example:

As I want only people between 18 and 67 of age to apply for the position, I limit the year range to be displayed. I override the preset Start and the End dates in the Validation as follows:

Start date: -67 years means: The first year shown in the calendar will be the year 2015 minus 67 years (this is 1948), as 67 is the retirement age in Germany.

End date: -18 years means: The result of it will be, that the calendar will end in 2015 minus 18 years (this is 1997) as only applicants older than 18 years are allowed to work in the foundation.

 

Grid type: Abilities

Now I would like to ask users to self-assess their abilities. The easiest would be to do it in a Matrix. That's why I create a new component, name it Abilities and make it Grid type. And these are my settings:

In Options I defined the values for the table column headings. Again I have to define Key-values (d|, e|, f|) in front of each line. I have also added some blanks (&nbsc;) around the words to have some space in between. Please note that without profound html-knowledge, you will not be able to format a neat table-like grid.

The Question field contains the line headings, again introduced by key-values:

File upload

Finally, I want to give applicants the chance to upload their documents and add a File upload component of the type File. In the Edit component form, I can define the maximum upload size and which file extensions are allowed. In my example, only text files are allowed.

Text area type: Comment

Finally, I want to give applicants the opportunity to leave a comment and therefor add a component type Text area. It is not mandatory, but should provide enough (multiline) space for users' own texts. I leave all the presets and save.

Now, as I have entered all components to my webform, this is what the components overview table looks like after having rearranged the order of components by just dragging and dropping them into the desired spots:

Notifications of data transmitting

As I want to receive notifications containing the data whenever a user submits the form, I have to enter my email adress. To do so, I click on the E-mails tab on the top right and enter my address into the E-MAIL-TO line. I have to click on the ADD-button to save my setting.

Email confirmation

If I want users to receive an email confirmation after having submitted their data (for instance if the form is used for an event registration) I need to define the email address to which the confirmation is sent to. I do this by also using the E-mails tab and by picking E-Mail as component value from the list of data fields. When I click on the ADD-button to save my setting, a new form opens where I can enter the subject, E-mail from address, E-mail from name and the text of the email (E-Mail Template) which will be send to users:

In the E-Mail Template section I can either decide to use the default template (not recommended) or create my own custom template with the text and data fields I want users to receive. In the case of a registration confirmation it could look like this (leave in the Submitted values in order to inform users about the data they submitted):

Nach Eingabe aller Daten bitte das Formular speichern. Es kann im Nachhinein editiert werden.

Final settings

Finally, I make some settings concerning the submission of the form. I click on the Form settings tab and start by typing a confirmation message that users will see when they submitted their form:

 

Instead (and may be for other purposes than applications), I could also have created a Thank-you-landingpage and provided its URL in the Custom URL field.

As I want to allow only one application per user, I limit the number of submissions to "1 ever".

The Submission Access section defines, who can submit the webform and I have to add "reader" here to ensure the access to the form also for people who are not logged in to the CMS.

Testing your form

Before you link to your form and make it finally available to the public, it is very important to test it extensively. Please plan ample time and really try all possible inputs: Check whether they work as supposed and deliver the desired results. For testing purposes, it will be necessary to reset the allowed limit of submissions as well as to make components un-unique because otherwise you will not be able to submit your test forms.

Viewing form results

Congratulation! After all, your form seems to work and you can publish it. When applicants click on the Submit-button, an email containing the data you requested will be sent out:

To view all results online, click on the respective link in the email. Now you can browse through the result sheets by clicking on Next/Previous submission on the top right:

When you want to view your results in a table, click on your form and on Results in the blue link line, then on the Table tab in the next screen:

To export your data to a spreadsheet or database, click on the Download tab and make the settings you need. I downloaded All Submissions to an Excel file:

Formatting a form

Please note, that apart from the default CMS formatting (which also includes spreading questions over multiple pages), there are not many design options. In particular, it is - by the means provided for editors - not possible to align fields next to each other, to provide sub-headings or to even create multiple tabs as seen here:

Though design options are limited and though it might not be that easy at the beginning to build a webform which meets your wishes, our webforms are a great means, all the more, as you can create them yourselves and have full access to the captured data anytime without having to pay for external software or services.

So try it out. Hope, it works!