You are here

Creating and Editing Webforms

Webforms in CSULB's instance of Drupal are to be used for simple contact or surveying use. For more advanced forms please consult with your area's web lead or the Office of Marketing and Communications.

After signing in to the Drupal Content Management System...

  • Create a new webform: Click 'Shortcuts' in the upper user menu band, then 'Add Content' and finally 'Webform'.
  • Edit an existing webform: Navigate to the article in your web browser and click the 'New Draft' link at the top of the body content.
  • Edit a draft of an webform: From the upper user menu band, select 'My Account' and then click 'View profile'. Click 'Edit' on the webform you want to edit under the 'Drafts' section of this page.

The initial webform page is for the content that would appear above the webform, the title, and body text explaining the form (if necessary). Banners for webforms can be managed by your group's web lead.

After saving the initial information you'll be redirected to a page where you're able to edit its components (the form fields). Note in the tab under the webforms title, you'll be in 'Webform' which has its own set of subtabs (described below).

Screenshot showing the component options of the webform as described in the text to follow.

For each component of your form you'll need to:

  • Add a title to describe the information a user would need to input.
  • Select a form field type (textfield for a single line response, text area for multiple lines, select options for dropdown, checkbox and radio buttons)
  • Select whether or not the component is required.
  • Click the 'add' button to customize the options of this field (such as inputting button options or selecting where the label is displayed)

Advanced features of webform design are available. It is recommended you work with your area's web lead if you run into any issues with form creation when manipulating these items.

  • The Conditionals subtab under Webform allows for responsive questions based on user answers/actions.
  • The Emails subtab deteremines who to and what information is submitted upon user completion.
  • The Form Settings subtab allows for confirmation message customization, URL redirects, submission limits, etc.

After creation, the webform area also serves as a location where authenticated users can see and analyze results (instead of simply just receiving email notifications).


Step 1: Create A New Webform

Follow the same steps as creating other contents by logging in, then click on Shortcuts, Add Content.

Screenshot #1

Click on Webform.

Screenshot #2

Add your title, body content, imagery, and select your Group Audience then click save.

Screenshot #3

Step 2: Add/Edit Form Components (Fields)

Under the Webform tab is where you will be able to add or edit existing fields.

Start out by adding a new field. Enter the Label Name and select the type of field then click Add.

Screenshot #4

The type of fields available is shown below. Most webforms you will only need to select textfield, textarea, select options, or e-mail.

Screenshot #5

PLEASE NOTE: If you are collecting an email address, select the E-mail type.

Screenshot #5

The most important fields are the Label and Form Key.

Screenshot #6

ACCESSIBILITY: If you are including a Description text, make sure to check "Description above field."

Screenshot #7

ACCESSIBILITY: The default radio/checkbox buttons are rendered inaccessible by the Drupal CMS. As a solution, please ensure that you move radio button and checkbox groups under a Fieldset component.

Screenshot #8

With the Radio/Checkbox component, scroll down to the Display settings. Under Label Display dropdown, select None.

Screenshot for Radio/Checkbox component

Insert a new Fieldset component. The label will be the grouping label for the radio/checkbox group. Add the description/instruction as it applies and it will appear under the label.

Screenshot for Fieldset

Move the Fieldset component above the radio/checkbox component. Hover on the radio/checkbox then drag to indent under the Fieldset component.

Screenshot for Fieldset/Radio & Checkbox

Here is an example of a contact form:

Screenshot #9

Step 3: Enable Email Notification

On the webform page, click the Webform tab.

Screenshot #10

While on the Webform tab, click on E-mails sub-tab.

Screenshot #11

There are two options you can use. The most common is to send all emails to one recipient. Type the e-mail address on the Address field and click Add.

Screenshot #12

The other option is to use the "Subject" select dropdown to automatically forward specific emails to an individual email address.

Screenshot #12

If using a "Subject" field, the next screen will have individual email fields as shown below:

Screenshot #13

To ensure the recipient will be able to respond directly to the sender, select the Component: Email and Component: Name options.

Screenshot #14

Step 4: View and Clear Results

View the results of the webform by clicking on the Results tab. You can also download the results on the Download sub-tab.

Screenshot #17

Remember to clear your webform results at least once a month. Click the Clear sub-tab under results.

Screenshot #18