What is a Webform? - Drupal at Cal Poly

yieldingrabbleInternet και Εφαρμογές Web

7 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

96 εμφανίσεις












Drupal

Webforms


C
reate and
modify

forms in Drupal at Cal Poly






















ITS


Drupal Team

Author:

Steve Rutland, Karter Hischke

Revised
January 2012



ITS Application Services

Revised January 25, 2012




Table of Contents


Drupal Webforms

................................
................................
................................
.............

1

What is a Webform?

................................
................................
................................
.......

1

Structure
of a Webform

................................
................................
..............................

1

Creating a Webform

................................
................................
................................
........

1

Create the Webform Container

................................
................................
...................

1

Configure the Webform Container to Submit Form Input
................................
..........

2

Configure Webform Submission Settings

................................
................................
..

3

Create the Form Components (Input Fields) Inside of the Webform Container

........

4

Fieldsets

................................
................................
................................
......................

4

Textfield

................................
................................
................................
......................

6

Text Area

................................
................................
................................
....................

8

Select Options

................................
................................
................................
...........

10

Date

................................
................................
................................
...........................

12

Email

................................
................................
................................
.........................

14

File

................................
................................
................................
............................

16

Grid

................................
................................
................................
...........................

17

Time

................................
................................
................................
..........................

19

Hidden

................................
................................
................................
.......................

21

Markup

................................
................................
................................
......................

21

Edit Existing Form Components

................................
................................
...............

23

Delete Form Components

................................
................................
.........................

23

Clone Existing Form Components

................................
................................
............

24

Setting up a CAPTCHA Image on a Webform

................................
.............................

24

What is a CAPTCHA?

................................
................................
..............................

24

Adding a CAPTCHA to a Webform

................................
................................
.........

24

Publishing

................................
................................
................................
........................

25

Publish after editing the page

................................
................................
........................

25

Web Accessibility

................................
................................
................................
.....

25





1

Drupal Webforms

What is a Webform?

Input submitted from a Webform

can be

e
-
mailed to one or more users.
The input is also
tabulated in Drupal and can be made available using a spreadsheet.

Webforms are useful for simple one way f
orm submission from web users.
Example uses
could include account request forms
, email list
inclusion requests,

service requests,
questionnaires, register/cont
act forms, surveys, and polls.
Webforms can also be used for
small or
limited surveys.
A database in Drupal stores the responses submitted

from the
Webform submissions.
This data can be vie
wed in a simple tabulated form and can be
output as a .csv file by Advanced Authors and Site Administ
rators for further processing.
Webforms cannot respond with a secondary form based on input received from a first
form as the entire form must be contained

on one HTML page (one node).

Structure of a Webform

A Webform is a special content type and is made up of several components. It must
be viewed in several different contexts in order to be properly configured



The first development level of the form is th
e container (node). When a user is
logged in with an appropriate role, the edit mode can be selected and the form
container can be configured. The container defines how the form relates to the
web environment and is configured with a Title, Menu (navigati
on) settings, To
and From email addresses, email subje
ct line, and URL path settings [
some of
these items are similar to those of a

regular page (node)]



The next development level is adding the form input elements inside of the
container (node). In this s
tep each of the text fields, selection menus, radio
buttons, checkboxes
, etc. are added and configured



Lastly, validation testing can be setup for each form element. This is useful for
checking form input fields to see if a user keyed in valid content acc
ording to
the
prescribed validation rules



A finished Webform that is ready to be filled out and submitted by a user (a
regular web user) can be viewed via the website in the anonymous mode. The
user will see the input fields, checkboxes, radio buttons and

other fields just

as the
Webform author intended

Creating a Webform

Create the Webform Container

1.

To create a new Webform, go to
Create Content

in the menu and select
Webform

2.

You’ll be presented with the Title, Menu settings, the Editor for adding text
co
ntent to the top of the webform, and other settings. Key in content according to
the following:

o

Title



This appears at the top of the Webform content and is the first
level heading for the form. The title should clearly describe the purpose of
the Webform
. The Title will also be used to automatically name the

2

Webform unless this feature is specifically overridden (which may be
necessary if an existing Web site is being migrated into Drupal).

o

Menu Settings


These settings determine whether or not and where

a
menu link
for the new Webform
is to be created.



Menu link title



This field is automatically generated from the
Title field unless the
Automatically update Menu Title

checkbox
below is unchecked. If a menu link is not desired then uncheck
Automatically

update Menu

Title

and leave this field blank. To
create a custom menu link title, uncheck
Automatically update
Menu

Title

and type the desired menu link title



Automatically Update Menu Title checkbox



Leaving this
checked allows a menu link title to be a
utomatically created using
the text from the Title field described above. Unchecking this box
allows a custom menu name to be typed into the Menu link title
field. The box must be unchecked if no menu link is desired for the
page.



Parent item



This select
ion allows the Menu link title to be
placed into a menu. Valid menus are listed in brackets such as
<Sample Menu One>. Do not place an item into the <Administer>
menu



Weight



Leave this at zero

3.

Click
Save

(You must save now before you will see the next options for configuring the
Webform container)

Configure the Webform Container to Submit Form Input

1.

Go to the
Webform

tab if not already selected


2.

Click on the
E
-
mails

sub
-
tab

3.

Enter an E
-
mail to address

[
This is the “To:” address that
the
form data will be sent to. E.g.
juser@calpoly.edu
. For multiple addresses use commas to separate. Leave
blank for the data should not be sent (this might be used if survey information
is being collected)]

4.

Click
Add

5.

Fil
l in other email fields


3

Webform mail settings

This section defines how the form response information will be emailed when the user
submits their input.

o

E
-
mail to address



additional email “To:” addresses can be added.
For multiple addresses use commas t
o separate. Leave blank for the
data should not be sent (this might be used if survey information is
being collected)

o

E
-
mail subject


this is the “Subject:” line of the email which helps
identify the context of the email. E.g this could be similar to th
e Title
used above

o

E
-
mail from address



this is the “From:” address that will be seen in
an in
-
box when the email is received. The default for this is the email
address assigned to the Web site under
Administer > Site
configuration > Site information

o

E
-
mail from name


when the email shows up in an in
-
box, this tells
where the email came from. T
he default for this is the name of the
Web site
that was assigned under
Administer > Site configuration >
Site information
. A custom name can be given, or aft
er certain form
elements have been added they may be selected a
s the sender’s name
for e
-
mails

o

E
-
mail template


this is an email content template for customizing
the email that gets sent. ie:
Thank you for submitting a request.
Someone will be in contact
with you soon



Click
Save e
-
mail settings


Configure Webform Submission Settings

1.

Click on the Form settings sub
-
tab




Confirmation message


This custom message is displayed upon successful
completion of the Webform

and is used as a courtesy to indicate that the form
was filled out properly (no errors) and it has been submitted. This is
commonly referred to as a “Thank you” page



Redirect location


Selecting
confirmation page

under Redirection location
will show the
above message as its own page, otherwise this displays as a
message. You can also put in a custom URL.

Redirect pages must start with
http://

for external sites or
internal:

for an internal path. i.e.
http://www.example.com

or
internal:node/10”



Submission
s limit



Limits the number of submissions by a user


4



Submissions access

-

Preface message with
message:

for a simple message
that does not require a page refresh



URL path settings



If the Webform

is replacing an existing form on a site
that isn’t in Drupal, then you can setup a URL Alias that can help prevent
links from breaking that point to the form from other web sites. For guidance
on setting up a URL Alias, see the Working With Content user
Guide, section:
Setting the URL Alias to Mimic the original .html File Name



Publishing Options



When ready to publish the form, go to
Publishing
Options

and select
Published

and then
Save

the page



CAPTCHA: challenge "Image"
disabled/
enabled



Leave this s
et to
“disabled” when the Webform is in any of the Edit modes. (If this were
enabled, it would set a CAPTCHA challenge for persons who are editing the
form which is not desirable. Instead, a CAPTCHA challenge should be set for
users who are filling out t
he form. This is addressed below)

2.

Select
Save

configuration

at the bottom of the Form settings page

3.

The new Webform page should display with a message that states: “The new
Webform [
webform title
] has been created. Add new fields to your webform with
the

form below.” Form components can now be added to the Webform container

Create the Form Components (Input Fields) Inside of the Webform
Container

It’s time to build the form components where users will enter content

1.

Go to the
Webform

page and select the
Form components

tab


2.

Form components (input and selection fields) can be added using the Form
components view (see above). Each component is created one at a time and
must be added, configured, and then submitted before adding additional
components

Field
sets

These act as containers for grouping like sets of form elements such as contact
information.

1.

Select the
Webform

tab

2.

Select
Form Components

tab

3.

Create a fieldset element by typing in a legend name such as “Contact
Information”

4.

Select
fieldset

from the

dropdown menu

5.

Do not check the
Mandatory

or
E
-
mail
checkboxes (they are not applicable to a
fieldset)


5

6.

Select the
Add

button

7.

On the
Edit component…

page key in content according to the following:

a.

Label



this is the legend for the fieldset

and should match what you
keyed in above

b.

Field Key



This is used as the name attribute of the form element and has
no effect on the way data is saved

c.

Description


A description is not necessary for a fieldset. The description
will appear below the field
set in a small font and is used to help a user
understand the purpose of the fieldset

d.

CAPTCHA: no challenge enabled



ignore

e.

Display

i.

Collapsible



allows the user to open or close the information
inside of the fieldset when viewing the Webform

ii.

Collapsed by

Default



presents the fieldset as closed (collapsed)
by default when initially viewed by a user. The user must select
the fieldset Label (legend) in order to un
-
collapse and see the
information inside of the fieldset

i.

Hide component title



Select to
remove the title or label of
current field form the form

8.

Click
Submit
. This form will appear under
Form Components



6


Textfield

This is a text box that can be used as something to show the user, but not let them edit it
or it can be used to gather informat
ion from the user, for example an amount of money
they will donate.

1.

Select the
Webform

tab

2.

Select
Form Components

tab

3.

Create a Textfield element by typing in a label name such as “First Name”

4.

Select
textfield
from the dropdown menu

5.

Check
Mandatory

to requ
ire that the user complete this field in order to submit
the form

6.

Select the
Add

button

7.

This allows you to configure details about the text field

a.

Label


this is the legend for the fieldset and should match what you
keyed in above

b.

Field Key



This is used as the name attribute of the form element and has
no effect on the way data is saved

c.

Default Value


This

can either be left blank or you can give it a value
that it will start o
ut with when the page is loaded


7

d.

Description


The description
text area is used to describe the textbox that
is created. It wi
ll be located under the textbox

e.

CAPTCHA: no

challenge enabled



ignore

f.

Validation

i.

Mandatory



Check this opti
on if a user must enter a value

ii.

Unique



Check this option of the same value
is no
t allowed to be
used twice

iii.

Maxlength


This controls how many characters that the user can
enter into the textbo
x

g.

Display

i.

Width


This controls how long the textbox will be. It doesn’t
control the length of

what the user can enter though

ii.

Label placed to t
he left of the textfield



an additional text label
can be placed to the left of the fieldset

iii.

Label placed to the right of the textfield



an additional text
label can be placed to the left of the fieldset

iv.

Hide component title



Select to remove the title or label of
current field form the form

v.

Disable


If this is checked, then the user will not be able to
change the default value

8.

Select
Submit


8


Text Area

This is a text area that the user can enter data or it can be used to
display some data for
the user to read, but not change.

1.

Select
Webform

tab

2.

Select
Form c
omponents

tab

3.

Create a Text Area element by typing in a label name such as “Comments”

4.

Select
textarea

from the dropdown menu

5.

Check
Mandatory

to require that the user complete this field in order to submit
the form

6.

Select the
Add

button

7.

On the
Edit component…

page key in content according to the following:

a.

Label



this is the legend for the fieldset and should match what you
keyed in above

b.

Field Key



This is used as the name attribute of the form element and has
no effect on the way data is saved

a.

Default Value


This

can either be left blank or you can give it a value that
it will start o
ut with when the page is loaded

c.

Description Area



Wha
tever is typed here will be located under the text
area, but above where the user can choose to switch to the plain text editor

d.

CAPTCHA: no

challenge enabled



ignore

e.

Validation



Check
Mandatory

if a user MUST enter a value

f.

Display


9

i.

Width Textbox



This co
ntrols how big the text area will be. This
only affects the text area in the plain text editor. It does not limit
the amount of characters the user can enter

ii.

Height Textbox



This controls how high the text area will be. It
does not limit the amount of cha
racters the user can enter

iii.

Resizable



If this is checked, the user can resize the field

ii.

Hide component title


Select to remove the title or label of
current field form the form

iv.

Disabled



If this is checked, then the user will not be able to
change the d
efault value

8.

Select
Submit



10



Select Options

The select component is used for creating checkboxes, radio lists, dropdown box, or a list
box.

1.

Select
Webform
tab

2.

Select
Form Components

tab

3.

Create a
Select Option

element by typing in a label name such as “Credit Card
Type”

4.

Select
Select Options
from the dropdown menu

5.

Check
Mandatory

to require that the user complete this field in order to submit
the form

6.

Select the
Add

button

7.

On the
Edit component…

page key in con
tent according to the following:

a.

Label



this is the legend for the fieldset and should match what you
keyed in above


11

b.

Field Key



This is used as the name attribute of the form element and has
no effect on the way data is saved

c.

Default Value



Used to defi
ne a default value. The text here has to match
the value of one of the choices in the options text area to work. Also, if
you want more than one option to start out selected, then separate the
options by a comma.

d.

Description Area



Whatever is typed here w
ill be located at the bottom
of this section

e.

Options



Used to create options. This section is used to create the
choices users have to choose from

i.

Example: “0|Yes” or “1|No”

f.

Multiple



If you want to allow the user to select multiple values, then the
“mul
tiple” checkbox should be checked and the “list box” should be left
unchecked

g.

Load a pre
-
built option list



Use a pre
-
built list of options rather that
entering options manually. Options will not be editable if using pre
-
built
list

h.

CAPTCHA: no

challenge e
nabled



ignore

i.

Validation



Check
Mandatory

if a user MUST enter a value

j.

Display

i.

Listbox



If a dropdown list where the user can only select one
option is needed then only the

listbox

checkbox should be checked

1.

If radio buttons are wanted, than both
checkboxes should
be left unchecked

2.

If a multi
-
select list box is needed, then both checkboxes
should be checked

ii.

Randomize options



If selected, this will randomize the order of
the options displayed in the form

iii.

Hide component title


Select to remove the

title or label of
current field form the form

8.

Select
Submit


12





Date

This component lets the submitter select a date from drop down lists.

2.

Select

Webform

tab


13

3.

Select
Form Components
tab

4.

Create a Date element by typing in a label name such as
Today’s Date

5.

Select
Date

from the dropdown menu

6.

Check
Mandatory

to require that the user complete this field in order to submit
the form

7.

Select the

Add
button

8.

On the
Edit component…

page key in content according to the following:

a.

Label



this is the legend for the fie
ldset and should match what you
keyed in above

b.

Field Key



This is used as the name attribute of the form element and has
no effect on the way data is saved

c.

Default Value



Start date for the dropdown boxes. You can enter the date
in any valid format

i.

Example: “+2 days” or “mm/dd/yyyy” or “Jan 1 2011”

d.

Description



Give the date a description. It can be used to describe the
purpose of your date component. The description will be located below the
dropdown boxes

e.

CAPTCHA: no

challenge enabled



ignore

f.

Val
idation



Check
Mandatory

if a user MUST enter a value

i.

Start and End Year



These determine what year the dropdown
box starts at (which is also its minimum) and what year it will end(
which will be the maximum)



Example: “
-
4” and “3” to represent how many y
ears back
or forward from current year or “2007” and “2014”

g.

Display

i.

Use a textfield for year



This will allow the user to enter in any
year they choose, but if the value exceeds the end date or is lower
than the start date, then an error message will be d
isplayed and the
form will not be submitted until it is corrected

ii.

Hide component title


Select to remove the title or label of
c
urren
t field form the form

9.

Select
Submit


14



Email

This component lets the creator make sure that a valid email is being
submitted without
having to do any validation themselves.

1.

Select
Webform

tab

2.

Select
Form Components

tab

3.

Create an Email element by typing in a label name such as “Your Email Address”

4.

Select
Email

from the dropdown menu

5.

Check
Mandatory

to require that the user complete this field in order to submit
the form

6.

Select the
Add
button

7.

On the
Edit
component…

page key in content according to the following:


15

a.

Label



this is the legend for the fieldset and should match what you
keyed in above

b.

Fiel
d Key



This is used as the name attribute of the form element and has
no effect on the way data is saved

c.

Default Value



Enter a value to be the default email address

d.

User email as default



Sets the default value as the current user’s email
if the user i
s logged in

e.

Description



A short description of the field will be seen below the
textbox

f.

CAPTCHA: no

challenge enabled



ignore

g.

Validation



Check
Mandatory

if a user MUST enter a value. Check
“unique” if the same value is not allowed to be used twice

h.

Dis
play

i.

Width



This determines the width of the email textbox. It only
affects the display, not the amount of characters that a user can
enter

i.

Hide component title


Select to remove the title or label of
current field form the form

ii.

Disabled



If this option

is checked, it will stop all users from
entering data in the email field and will only use the default value

8.

Select
Submit



16


File

This component creates a field that allows the user to upload a file.

1.

Select the
Webform

tab

2.

Select the
Form Components

tab

3.

Create a File element by typing in a label name such as “Upload a file”

4.

Select
File

from the dropdown menu

5.

Select the
Add

button

6.

On the
Edit component
… page, key in content according to the following:

a.

Label



This is the legend for the fieldset and should

match what you
keyed in above

b.

Field Key



This is used as the name attribute of the form element and has
no effect on the way data is saved.

c.

Description



A short description of the field will be seen below the
textbox .

d.

Upload Directory



This allows yo
u the option to specify a subfolder to
store your files.

e.

CAPTCHA: no

challenge enabled



ignore

f.

Validation

i.

Mandatory


Check this option if the user must enter a value

ii.

Category/Types



Here you are allowed to select the types of files
that will be allowed.

This is done by checking the boxes the boxes
one by one or selecting them all.

iii.

Additional Extensions



If a file extension cannot be found in the
previous option, they can be entered in this textbox. Multiple
extensions can be entered, but must be separat
ed by a comma.

iv.

Max Upload Size



This will limit the size of the file that the users
can upload

g.

Display

i.

Width



This will be used to control the size of the textbox that
users can type the file path in. It will not limit the length of the
text, only the di
splay.


17

7.

Select
Submit



Grid

This component creates a questionnaire
-
like section that has similar answers to all the
questions. Example: teacher evaluation sheets.

1.

Select the
Webform

tab


18

2.

Select the
Form Components

tab

3.

Create a Grid element by typing in a

label name such as “Grid Sample”

4.

Select
Grid

from the dropdown menu

5.

Select the
Add

button

6.

On the
Edit component


page, key in content according to the following:

a.

Label



This is the legend for the fieldset and should match what you
keyed in above

b.

Field K
ey



This is used as the name attribute of the form element and has
no effect on the way data is saved

c.

Options



Used to create the choices that can be selected by the user.

i.

Example: “0|
Yes” or “1|Maybe” or “2|No”

d.

Question
s



This is where the questions w
ill be created. Each question
needs to be on its own line

i.

Example: “0|Do you have any pets?” “1|Do you play a sport?”

e.

Descriptions



A short description of the field will be seen below the
textbox

f.

CAPTCHA: no

challenge enabled



ignore

g.

Validatio
n


Check
M
andatory

if a user MUST enter a value

h.

Displa
y

i.

Randomize Options



If checked, this will randomize the order of
the choices the user has to select from

ii.

Randomize Questions



If checked, this will randomize the order
of the questions in the grid

ii.

Hide
component title



Select to remove the title or label of
current field form the form

7.

Select
Submit


19



Time

This component lets the user select a time by using dropdown boxes.

1.

Select the
Webform
tab

2.

Select the
Form Components

tab

3.

Create a Time component by

typing in a label such as “Time”


20

4.

Select
Time

from the dropdown menu

5.

Select the
Add

button

6.

On the
Edit component


page, key in content according to the following:

a.

Label



This is the legend for the fieldset and should match what you
keyed in above

b.

Filed Ke
y



This is used as the name attribute of the form element and has
no
effect on the way data is saved

c.

Default Value



Used to set a default value. It will be what the user sees
when they enter the web form. The format for this can be e
ither
“10:10p.m.” or
“+2 hours”

d.

Description


A short description of the field will be seen below the
textbox

e.

CAPTCHA: no

challenge enabled



ignore

f.

Validation



Check
Mandatory

if a user MUST enter a value

g.

Display

i.

Time Format



determines whether the time is o
n a 12 hour
format or a 24 hour
format

ii.

Hide component title


Select to remove the title or label of
current field form the form

7.

Select
Submit


21



Hidden

This component is for advanced admin. It creates hidden forms that site visitors will not
see.

Markup

This component allows for custom HTML or
PHP

1.

Select the
Webform

tab

2.

Select the
Form Components

tab

3.

Create a Markup component by typing in a label such as “Markup”

4.

Select
Markup
from the dropdown menu

5.

Select the
Add
button

6.

On the
Edit Component
… page, key i
n content according to the following:


22

a.

Label



This is the legend for the fieldset and should match what you
keyed in above

b.

Field Key



This is used as the name attribute of the form element and has
no effect on the way data is saved

c.

Value



Insert custom H
TML in this field. PHP logic and token values
may also be used but they should be utilized mostly by administrators.
Token values will be replaced by dynamic values provided by Drupal
when the form is displayed

d.

Input format


see picture below

i.

Filtered HTM
L



Begin tags and end tags must be manually
inserted

ii.

CP Standard Filter


a good standard filter already coded

by
CalPoly staff

iii.

CP Extended Filter


if you know what you are doing,

you can
program your own filter

e.

CAPTCHA: no

challenge enabled



ignore

7.

Select
Submit



23


Edit Existing Form Components

1.

Select the
Webform

tab

2.

Select the
Form Components

tab

3.

Choose the
Edi
t

option under the Operations heading


Delete Form Components

1.

Select the
Webform

tab

2.

Select the
Form Components

Tab

3.

Choose the
Delete

option under the
Operations
heading


24


Clone Existing Form Components

ITS strongly discourages the use of the Clone operation as it tends to duplicate element
ID without making the ID unique for the form. Thus the HTML page could end up with
duplicate IDs

thus rendering the HTML invalid markup.

Setting up a CAPTCHA Image on a Webform

What is a CAPTCHA?

A CAPTCHA is a challenge
-
response test most often placed within web forms to
determine whether the user is human. The purpose of CAPTCHA is to block form
su
bmissions by spambots, which are automated scripts that post spam content everywhere
they can. (Definition borrowed from CAPTCHA Drupal module project page at
http://drupal.org/project/captcha
)

Note: a CAPTCHA configuration option is presented at the botto
m of nearly all Webform
pages used View and Edit including the pages for configuring the container, form
element creation, and form element validation. Each of these are context specific to the
page, component, or element being worked on. Only the CAPTCH
A for the View page
should be enabled as described below.

Adding a CAPTCHA to a Webform

1.

Open the Webform and select the
View

tab at the top of the Webform

2.

Scroll to the bottom of the Webform

3.

Find the section titled “
CAPTCHA: no challenge enabled
” (If the
section is
instead titled “
CAPTCHA: challenge
Image

enabled
”, this means that a
CAPTCHA is already enabled for the form)

4.

Select
Place a CAPTCHA here for untrusted users.

5.

The CAPTCHA point administration page will appear. Select from the Challenge
type
drop
-
down menu: [default challenge type]


25



6.

The CAPTCHA feature should now be available on the Webform. To verify this,
go to the Webform, again scroll to the bottom of the page and find the section
titled “
CAPTCHA: challenge "Image" enabled


Publishing

B
y default, Drupal content nodes (pages) have been set to draft mode (Unpublish). This
prevents the accidental publishing of incomplete documents. When the published
checkbox is selected and the item is saved, the content is immediately available for
viewin
g via the Web site. Also, unpublished items will not appear in a navigation menu
until the Published mode is selected for the node.

Publish after editing the page

1.

With a page open in the edit mode, scroll to the bottom of the page and open the
Publishing options

section

2.

Select the
Published

checkbox

3.

Select
Save

Web Accessibility

Content contributors are responsible for ensuring the accessibility of any content that they
place into the WCMS

including Web content, PDF documents, MS Word docs, Flash,
etc. See the Accessibility section of the Web Authoring Resource Center for more
information (
http://warc.calpoly.edu/accessibility/
)