Web form
Drupal offers a wide range of possibilities for creating web forms, but it is also a large and complex tool. For example, you can create web forms to conduct surveys, collect expressions of interest for a conference, or as a way for visitors to get in touch with your organisation – but to create effective web forms, you need a basic understanding of how web forms in Drupal work.
Web forms and web form pages
When your visitors encounter a web form on your website, they are presented with a complete experience based on two distinct elements:
1. Web form, which is a content type.
2. A web form page, which is a page type.
You need to work with both elements. You create a page – a web form page – into which you place a content component, a web form. Together, these two elements form a complete web form that your website visitors can use.
There are two things to bear in mind when it comes to permissions for web forms in Drupal. You can access the permissions settings under Settings > Access.
The first point concerns who should be allowed to submit forms. In our case with Drupal at Lund University, it is essentially only web editors and other content managers who are able to log in to the website. För att fylla i ett webbformulär ska man i normalfallet aldrig vara tvungen att vara inloggad. Det är också förinställningen: Under Create Submissions är det ikryssat att Anonymous user ska ha den behörigheten.
The second point concerns who should be able to edit the web form and view the submissions. A website administrator can manage this in two different ways. Drupal has a ‘Webform editor’ role, which grants general permission to work with web forms on the site. You can assign it to a user, thereby granting that user access to all web forms on the site, using the standard user settings.
Another option is to scroll down the list of permissions until you reach ‘Administer web forms & submissions’. This setting applies specifically to this web form. Do not tick any of the boxes under ‘Roles’. For example, if you tick "Staff", you are specifying that all users with that permission on the website should have the right to "Administer web forms & submissions". Under "Users", you can instead use the Lucat ID to search for the individual user who should have access to this form (you must have created that user on your website beforehand).
Webform
As mentioned, a web form is a content component made up of various elements. By combining these different elements, you can create a form that can be reused. For web forms to be visible and usable by visitors, you must place them on web form pages; otherwise, they will not be visible anywhere and will simply remain in your content library.
Feel free to explore the tool on your own. A web form can contain many components and variations. Why not try creating a test form yourself using all of Drupal’s components to learn more about how they work? Send the results of the web form to yourself and try using different combinations to see what the outcome is.
Different elements and their applications
Basic elements
1. Checkbox: Provides a form element for a single checkbox.
2. Hidden: Specifies a form element for an HTML input element that is "hidden".
3. Textarea: A form element for entering text across multiple lines.
4. Text field: A form element for entering a single line of text.
Advanced elements
1. CAPTCHA: Provides a form element that determines/tests whether the user is human.
2. Email: Provides a form field for entering an email address.
3. Height (feet/inches): Provides a form field for entering height in feet and inches.
4. Number: Provides a form element for numerical input, with specific numerical validation.
5. Scale: A form element for entering a numerical scale.
6. Telephone: Provides a form field for entering a telephone number.
7. URL: Provides a form field for entering a URL.
Markup elements
1. Basic HTML: Provides an element for rendering basic HTML markup.
2. Personal data information: This section contains information on how personal data is collected.
3. View: Provides an element for embedding a view. Only users with the "Manage views" or "Edit web form source code" permissions can create and update this element.
Options elements
1. Checkboxes: Provides a form element for a set of checkboxes.
2. Likert: Provides a form field where users can answer several questions using a Likert scale.
3. Radio buttons: Provides a form element for a set of radio buttons.
4. Select: Creates a form element for a drop-down menu or drop-down selection box. Here, you can also choose to add a drop-down list containing all the countries in the world.
Date/time elements
1. Date: Provides a form element for selecting a date.
2. Time: Provides a form element for selecting a time.
Containers
1. Details: Provides an interactive element that the user can open and close.
2. Fieldset: Provides an element for a group of form elements.
3. Section: Provides an element for a section or group of form elements.
4. Table: Provides an element for rendering a table.
File upload elements
1. Document file: Provides a form element for uploading and saving a document.
2. File: Provides a form element for uploading and saving a file.
3. Image file: Provides a form element for uploading and saving an image file.
A web form page is a page type used to display web forms. A web form page consists of a main heading, a teaser, an introduction, and a field where a web form from the content library is retrieved and placed. Your web form page can be placed within the website’s menu structure. You can find information on how to create a web form page in the section on pages, or by following the link below.
Create a web form page
Helpful advice and recommendations
Points to consider when collecting personal data
If your web form collects any personal data, you need to consider whether you should inform visitors of this, depending on the context in which the form is used.
Please be aware that you should not use forms in Drupal if you are working with sensitive or confidential data.
For example
"When you submit the answers in this webform to Lund University, your personal data is processed in accordance with existing legislation. To find out more about the processing of your personal data, visit the Lund University website: https://www.lunduniversity.lu.se/about/contact-us/processing-of-personal-data-at-lund-university"
You can also use a "checkbox" or "radio button" if you need to obtain the visitor’s consent to the collection of personal data.
Improve accessibility and the user experience with “Autocomplete”
To make it easier and more convenient for users to fill in forms, particularly for people with cognitive impairments, the “Autocomplete” feature can be enabled in the various types of input fields. This feature suggests what to enter in the field and fills it in based on what has previously been entered in similar fields. This information is stored in the user’s web browser.
When you edit an element in your form, the “Autocomplete” setting can be found under the “General” tab. By default, this is set to “on”. If the element is, for example, of the type “Email” or “Telephone”, it is sufficient to set the option to “on”; the input field will then automatically suggest previously entered email addresses or telephone numbers to the user.
If, on the other hand, the element is of a more general type, such as a “text field” or “text area”, you can specify the type of information the field should collect. Go to the “Autocomplete” setting and select the “Autofill…” option from the list. Then select the type of user information the field should retrieve from the list under “Autocomplete autofill”. When you’re done, clickSave.
However, if an input field is intended to collect information that is only used once, you can set ‘Autocomplete’ to ‘Off’.
Web form page
Web forms are the purely technical aspect of the form. You manage the more presentation- and content-related aspects using a form page, a WebForm page.
You could think of it as ‘embedding’ your Webform into a Webform Page. You can then embed your Webform Page into the menu structure, give it a heading, an introduction, and so on.
Here's how to do it:
1. To create a form page, go to the administration menu and select Content > Add content > Webform page.
1. Enter the title and body text as usual.
2. Select the relevant web form from the ‘Webform’ drop-down list.
3. Under 'Webform settings', you can choose whether the form page should be open, closed or scheduled.
4. Add any infoboxes and the page administrator.
5. Click Save to save.
Your form page then groups together the form submissions sent in via that particular form page.
Example: You have a Webform for conference registration. You have one Webform Page for the conference during the spring term and another Webform Page for the conference during the autumn term. Provided that your Webform for conference registration is open, you can have your Webform Page for the autumn term open and the one for the spring term closed, or vice versa. If you go to your Webform for conference registration, you will see all the results that have ever been submitted. If, instead, you view the results via one of your Webform Pages, you will only see the results for the spring or autumn respectively.
You can then add your Webform page to the menu by creating a menu link under Menus > Main menu.
You can set up email confirmation for web forms to be sent to respondents. Here’s how to do it step by step.
Here's how to do it:
1. click on Settings
2. click on Emails/Handlers
3. click on 'Add email'
4. Enter a title under 'Title' (e.g. email)
5. Go to 'Send to' and 'To Email'
6. Select 'Email' from the drop-down menu under 'Elements'
7. scroll down to Message
8. Here you can select the 'Custom' heading and 'Custom message' to write your own message, or choose the 'Default' option, which is also fine.
9. Click Save
10. and click Save handlers
Please note that you must include the 'Email' element under 'Build' in the form itself for the settings under 'Emails/handlers' to work and for the email confirmation to be sent to the respondent.
Limit the number of responses in a web form
If you have a form, for example for an event registration, and want to limit the number of participants, you can set a maximum limit on the number of responses that can be submitted. If you do not have a maximum limit, you do not need to enter anything here.
Here's how to do it:
1. Go to Settings.
2. Välj Submissions.
3. Click on 'Submission limit settings'.
4. Under ‘Total submissions’, enter the maximum number of responses you wish to receive (e.g. 30) from respondents.
Avoid duplicate entries – limit the number of submissions from the same person
Sometimes the same person submits the form multiple times. To prevent this, you can set certain fields to be unique.
Here’s what to do instead:
1. Go to Build.
2. Click on 'Edit' in the 'Email' field.
3. Scroll down to Form validation.
4. Open the tab and tick the 'Unique' box.
5. You can also tick the ‘Unique per entity’ box here if you want the system to check that the value is unique to this particular entity.
Important!
Do not use the ‘Total submissions limit message’ field to prevent duplicate submissions – leave it blank. If you fill this in, it may prevent the web form from working properly.
If you use a web form on your website, you can receive an email every time a user submits the form, but in Drupal you can get a clear overview of the results.
User roles that can view the results
You can access the results of all web forms on your website if you have the Site admin, Site editor or Webform editor role. Users with the Site writer role can access the results of their own forms, but not those created by others.
It is also possible to grant someone with a different role permission to view the results on a specific form. The person authorised to manage the form can do this by first going to the web form itself, and then navigating to Settings > Access > View any submissions. Here, you can either choose to grant a specific role access to the results, or grant that permission only to specific users.
Find your results
1. To view all the forms on your website, go to Content > Webform > List and manage webforms in the menu. (Please note that not all roles have access to this menu)
2. Tap the title or the Build button for the form you want to view the results for. Then tap Results.
3. Under Results > Submissions, all submitted responses are listed, and you can also see the time and IP address from which they were sent. The list also includes a column showing which Drupal user submitted the form. In our case, it is almost exclusively the user ‘Anonymous’.
At the far right of the "Operations" column, there is an "Edit" button; if you click it, you can edit the details of the result or delete it. Next to the Edit button, there is also an arrow offering further options for that specific result.
Export results
To export the results to a file, go to Results > Download.
There are quite a few settings to choose from here, but you can leave everything as it is, in which case all the results will be exported as a .csv file that can be opened in Excel.