Ana səhifə

Madison Area Technical College

Yüklə 53.45 Kb.
ölçüsü53.45 Kb.

Drupal Training with Web Forms

Madison Area Technical College

November 12, 2009

Madison Area Technical College 1

Introduction: 3

Locating the create web form link: 3

Creating a Web form: 3

Setting up the form components: 6

Arranging your Components 18

Viewing results from the web form: 19


This guide covers information that is needed to create and use web forms to the maximum effect. At the end of the guide you will know all the important abilities of web forms in Drupal and be able to use them.

Locating the create web form link:

After logging into the site as an authenticated user that has the permission to create web forms select the “create content” menu option on the left side menu. Next click the “Webform” link; it will be the second option in the main content area. This link will lead you to the first steps of creating your web form.

Creating a Web form:

Permissions –leave permissions as is, do not change
Menu Settings –choose the parent item that you want this form to reside under. Be aware if you are choosing a primary, facstaff or plus page as your parent item.
URL Path Settings –create the URL Path based upon what area you want your form to appear in.

  • Primary: [gallery title]

  • Facstaff: in/[gallery title]

  • Plus: plus/[yourPlusAreaName]/[gallery title], e.g. plus/fitness-center/sports-equipment-gallery

Remember to use normal URL rules, only letters/numbers/hyphens, no other punctuation or spaces.

IMPORTANT: Be sure that the URL path that you specify matches the location you choose in the menu settings (e.g, if you choose a menu parent item that is a plus page, make sure you set your URL path with the Plus naming convention).

Webform Settings –the main settings that will be used for the web form. These setting can be changed later if desired.

  1. The first option is the “Title” textbox. This text will be the name of the Web form, which will be displayed at the top of the web form.

  2. The next option is the “Description” field. This will be located below the name that the Web form was given, but will be above the rest of the Web form.

  3. The confirmation message or redirect option is what you want the user to see when they have submitted the Web form. It can be a little message that displays to the user or it can be a separate webpage.

  4. For web access control in the roles section the default for the Web form is anonymous user and authenticated user selected. Anonymous users refer to users that have not logged on and authenticated users are any who have logged on to the web site. Also if the results need to have a name associated with them then only authenticated users should be checked since the results list the submitters with their login name. Anonymous users will not have any information except the information that you have them submit and there IP address. Also if all the roles are unchecked then no one will be able to submit the Web form, which is useful for when submissions are no longer needed.

Webform mail settings – see corresponding letters for explanation

      1. Where the results should be sent

      2. Display Name of the sender (e.g. “MATC Public Site”)

      3. Address that the email is sent from

      4. Email subject line

Webform advanced settings – in this section there are two useful settings.

    1. The first useful option is being able to limit the number of submissions that a user can give. It is recommended that the unlimited radio button is selected to allow multiple submissions from the same IP addresses. The example below is the default and will only allow a submission from an IP address only once.(circled in red)

    1. The second useful option is the “Submit button text” textbox. It gives the creator the ability to change the submit button text to anything. Enter any text into the textbox to change what the button says. The example above would have the default submit as the text.(circled in blue)

Webform Configuration is Complete – Now that the configuration is complete, the next section will deal with adding components. These components are used to collect the information from the submitters.

Setting up the form components:

When creating a new web form the “form components” page automatically displays when the configuration of the web form is saved. To add components to the web form type a name that is descriptive of the component then select the component that is desired from the drop down list. The options are date, email, fieldset, file, grid, hidden, markup, pagebreak, select, textarea, textfield, and time. Examples and specific uses will be described after each of the components.
The first option for each component is to give it a name, which will be shown above that component. The Label will default to the name that was entered when the component was added.

      • Date – Lets the submitter select a date from drop down lists.

  1. Label (see above)

  2. Start date for the dropdown boxes. You can enter the date in any valid format, but the easiest thing to do is to use relative dates, such as “+2 months”, “+5 days”, and “today”.

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

  4. Choose the time zone. The website time zone is the best choice as it will get our current time.

  5. Observe daylights savings. This option won’t do much in this component since it has little effect, but if you think it might affect your web form check the option. It won’t do any harm.

  6. Begin and end year. They determine what year the dropdown box starts at which is also its minimum and what year will be the maximum.

  7. Make the year a textbox. This will allow the user to enter in any year they choose, but if the value exceeds the end date or is lower then the start date then an error message will be displayed and the form will not be submitted until it is corrected.

      • Email – Lets the creator make sure that a valid email is being submitted without having to do any validation themselves.

  1. Label

  2. “User email as default” will display the current (logged in) user’s email if checked is stored on the system in the textbox when the page is loaded. This only works if the user is logged in.

  3. Enter a value to be the default email address.

  4. Component description - the user will see it below the textbox.

  5. The width of the email textbox – only affects the display, not the amount of characters that a user can enter.

  6. The next checkbox is used for when the email address entered is supposed to get a copy of the submission. It will show everything, the information entered, IP address, and name of the submitter.

  7. “Disabled” if checked will stop all users from entering any data in the email field and will only use the default value.

      • Fieldset – Enables components to be grouped together. Also allows the user the option of collapsing all the components in the fieldset.

  1. Label

  2. Description of the fieldset - will be located under the title, but above all the rest of the components that are located inside the fieldset.

  3. Whether or not to allow the fieldset to collapse. If checked, this option will allow the users to collapse the fieldset and hide all the components that are located inside the fieldset.

  4. If the fieldset defaults to collapsed when the page loads. If checked the fieldset will start collapsed and will have to be opened by the user to see the components inside. This option is ignored if the collapsible option is unchecked.

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

  1. Label

  2. Description of the file component - will be located under the textbox and browse button.

  3. Selecting the types of files that are being allowed. This can be done by either checking the boxes one by one or by clicking the “(select)” located to the right of the category names which will select all types of that category.

  4. If a file extension can’t be found in the previous option, they can be entered in the “additional extension” textbox. Multiple extensions can be entered, but must be separated by a comma. These extensions will now be allowed as well.

  5. Max upload size. This will limit the size of the file that the users can upload.

  6. Leave the “Upload Directory” textbox blank. This will not be used.

  7. Width - this will be used to control the size of the textbox that users use to type the file path in. It will not limit the length of the text only the display.

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

  1. Label

  2. Used to create the choices that can be selected by the user. They need to be in the format where the value is first then what is displayed to the user. Separated by a pipe. The user will see “Yes”, “No”, and “Maybe / Not Sure” but the value they are choosing will be “yes”, “no”, or “Maybe”.

  3. For creating the questions that the users will be answering. Each question needs to be on its own line.

  4. Used for a description of the grid. This description will be located under the whole grid.

  5. Randomize option checkbox. If checked this will randomize the order of the choices the user has to select from.

  6. Randomize questions checkbox. If checked this will randomize the order of the questions in the grid.

      • Hidden – To create hidden form fields. This option is for advanced users only and should be ignored.

      • Markup – allows the display of code as code on the page. This option is for advanced users only and should be ignored.

      • Pagebreak – To create multi-page forms. This option is for advanced users only and should be ignored

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

        1. Give the select component a name. It will be shown at the top of the select component. It will have as a default value the name that was entered when the component was added

        2. Used to define 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 then one option to start out selected then separate the options by commas.

        3. U
          sed to create options. This section is used to create the choices users have to choose from. The values for the choices can be the same as what is typed or they can be different. An example of them being different is shown below. The user will see “one”, “two”, and “three” but the value they are choosing will be “1”, “2”, or “3”.

        4. Description area. Whatever is type here will be located at the bottom of this section.

        5. Multiple” and “List box”.

          1. If checkboxes are wanted then the “multiple” checkbox should be check and the list box should be left unchecked.

          2. If radio buttons are wanted then both checkboxes should be left unchecked.

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

          4. If a dropdown list where the user can only select one option is needed then only the “listbox” checkbox should be checked.

        6. Email a submission copy” checkbox. If checked this option will send an email to whomever the user selects. For this component email addresses are need as the values of the options text area. Example: “| bob’s email” or just “”.

      • 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. Label

        2. Default value. This will be what the user will see when the web form is loaded up.

        3. Description area. Whatever is type here will be located under the text area, but above where the user can choose to switch to plain text editor.

        4. Width textbox. This controls how long the text area will be. This only affects the text area when in the plain text editor. Doesn’t limit the amount of characters the user can enter.

        5. Height textbox. This controls how high the text area will be. Doesn’t limit the amount of characters the user can enter.

        6. Disabled” checkbox. If this is checked then the user will not be able to change the default value.

      • Text field – 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 information from the user, for example an amount of money they will donate.

        1. Label

        2. default value. This can either be left blank or you can give it a value that it will start out with when the page is loaded.

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

        4. width textbox. This controls how long the textbox will be. It doesn’t control the length of what the user can enter though.

        5. max length of the textbox. This controls how many characters that the user can enter into the textbox.

        6. used to place whatever is entered in it to the left of the textbox. An example of this would be entering a dollar sign, “$”, in the textbox to make it seem like a money amount without the user entering it.

        7. used to place whatever is entered in it to the right of the textbox. An example of this would be entering a percent sign, “%”, in the textbox to make it seem like a percent without the user entering the symbol.

        8. “Disabled” checkbox. If this is checked then the user will not be able to change the default value.

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

        1. Label

        2. 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 either “10:10p.m.” or “+2 hours”.

        3. Used to describe the time selector that is created. It will be located under the drop down boxes.

        4. Select what time zone will be used as a general reference for the drop down boxes. The options are the user’s time zone, websites time zone, and GMT. Also included is the option to automatically adjust the time during daylight savings.

        5. F
          ormat of the time. The two choices are 12 hour format or 24 hour format.

Arranging your Components

After all of the components are created it would be beneficial to move them into a coherent order. By simply clicking and holding the four point symbol (circled in red on the picture), the component can be moved up or down on the list. To move components into fieldsets so that when they are closed the components will be hidden, simply move the components under and to the right of the fieldset. Be careful when deleting fieldsets because when a fieldset is deleted all of the components under it will be deleted as well. An example of this is the component circled in blue below:

The two more options that are useful in this menu are the “Mandatory” checkbox and the “E-mail” checkbox. Both of these are in the blue circle above and are checked. If checked, the “Mandatory” checkbox will force the user to enter there own data in the component. Even if you specify a default value the user still has to enter their own data and if they don’t the form won’t be submitted. If the “E-mail” checkbox is selected then the components data will be included in the e-mail that is sent to the specified email address when the form was originally created. Otherwise, the data will still be stored in the results section, they just won’t be included in the email.

Save and Preview the web form:

Don’t forget to save the web form by clicking the submit button. At the moment no one will be able to access the web form to make submissions, but a view will be created so you can see how the user will see the web form.

o view your web form, click the view tab at the top of the page. This will be how everyone will view your web form. If you are unhappy with the layout then click the edit tab and click on the form components button. You can now rearrange, update, add, or delete components on your form. After your done click the submit button.

If there is something wrong that you want to change just click on the edit tab at the top of the page and it will take you to the configuration page that we started at and you can change anything. If one of the components needs to be changed just click on the “form components” button which will be right under the tabs in the edit menu. (Circled in red in the picture)

Viewing results from the web form:

Now that the web form is viewable by the users you can now view the results of the submitters. To view the results click on the “results” tab at the top of the web form. There are a few things that can be done to the data. The options you have are submissions, analysis, table and download.

  • Submissions option, which is the view the results start out on, just shows the users who submitted the form. When using the submissions option there are separate options for each of the submissions. They are view and edit.

    1. View will allow you to view all the data that was submitted, by who, and when, but you won’t be able to change any of it.

    2. Edit is exactly like view, but you can change the data that was submitted.

  • Analysis shows how many times each option was chosen, how many times a text area was left blank. Also it counts default values that are left alone to be blank. It doesn’t show any names or any information about who submitted the data.

  • Table shows the user as well as their answers to the questions. Some of the questions answers will only be viewable if the user entered data. So if a component like email contains a default value it will not be seen in the table. It will just be blank.

  • Download allows you to convert the data that is collected to be saved as a delimited text or as a excel spreadsheet. This is useful if you want to have a hard copy of the data that is gathered.

Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur © 2016
rəhbərliyinə müraciət